/* common */
header{ background: #fff; }
header .header-box .logo,
#menu img{ filter:invert(1); -webkit-filter: invert(1); }

.subVisual{ position: relative; opacity: 1; }
.subVisual .txt-box{ position: relative; position: absolute; bottom: 0; left: 0; margin-bottom: 120px; width: 100%; z-index: 5; }
.subVisual .txt-box .title{ font-family: var(--lora); color:#fff; letter-spacing: -1.88px; }
.subVisual .txt-box .txt{ color:#fff; font-weight: 100; line-height: 1.7; letter-spacing: -0.44px; margin-top: 40px; }
.subVisual .scroll{ position: absolute; bottom: 40px; right: 100px; z-index: 5; animation:scroll 2s infinite both }
.subVisual .bg{ position: relative; width: 100%; height: 720px; opacity: 1; clip-path:inset(0 100% 0 0); transition:all 1s 0.2s; }
.subVisual .bg:after{ content:''; display:block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.3); }
.subVisual .bg img{ transform:translate(-50%,-50%) scale(1.05); transition:all 2s 0.5s; }
.subVisual.aos-animate .bg{ clip-path:inset(0 0 0 0); }
.subVisual.aos-animate .bg img{ transform:translate(-50%,-50%) scale(1);}

@keyframes scroll{
	0%{ transform:translateY(0)}
	50%{ transform:translateY(-15px)}
	100%{ transform:translateY(0)}
}

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

h4.title{ display:flex; color:#111; font-family: var(--lora); font-weight: 500; letter-spacing: -0.64px; margin-bottom: 80px;}
h4.title:before{ content:''; display:block; width: 6px; height: 6px; border-radius:50%; background: var(--mainC); margin: 25px 10px 0 0;} 

#subContents section:not(:last-child){ margin-bottom: 180px; }

#tab-box{ display:flex; align-items:center; margin-bottom: 80px;}
#tab-box li{ position: relative; display:flex; align-items:center; }
#tab-box li:not(:last-child):after{ content:''; display:block; width: 3px; height: 3px; border-radius:50%; background: #ccc; margin: 0 30px;}
#tab-box li a{ position: relative; font-family: var(--lora); color: #CCC; letter-spacing: -0.46px; transition:all 0.5s; }
#tab-box li a:before{ content:''; display:block; position: absolute; bottom: -8px; left: 0; width: 100%; height: 2px; background: #000; opacity: 0; }
#tab-box li:hover a,
#tab-box li.on a{ color:#111; }
#tab-box li.on a:before{ opacity: 1; }

/* sub */
#company .strategy .ctn-box{ display:flex; align-items: flex-start; gap:50px; }
#company .strategy .ctn-box .item-box{ width: calc((100% - 100px) / 2); min-height:535px; background: #F8F8F8; padding: 80px 60px; transition:all 0.7s; }	
#company .strategy .ctn-box .item-box:hover{ transform:translateY(-20px); }
#company .strategy .ctn-box .item-box .num{ color:#ccc; font-weight: 600; letter-spacing: -0.84px; font-family: var(--lora);}
#company .strategy .ctn-box .item-box .title{ min-height:85px; color:#111; line-height: 1.55; font-weight: 600; letter-spacing: -0.56px; margin: 40px 0; } 
#company .strategy .ctn-box .item-box .line{ display:block; width: 100%; border-bottom:1px dashed #AAA; margin-bottom: 60px; }
#company .strategy .ctn-box .item-box .txt{ color:#333; font-weight: 300; line-height: 1.7; letter-spacing: -0.38px; }
#company .history{ position: relative; min-height: 100vh; width: 100%; overflow: hidden;}
#company .history .title-box{ position: absolute; top: 180px; left: 0; width: 100%; }
#company .history .bg{ position: absolute; top: 0; left: 0; width: 101%; height: 100%; z-index: -1;}
#company .history h4.title{ color:#fff; margin-bottom: 120px;}
#company .history .slide-box{ position: relative; height: 100%; padding-top: 340px; padding-left: 5%;}
#company .history .slide-box.on{ pointer-events:auto;  }
#company .history .slide-box .swiper-slide{ position: relative; max-width:450px; }
#company .history .slide-box .swiper-slide:first-child:before{ content:''; display:block; width: 100%; height: 1px; background: rgba(255,255,255,0.1); position: absolute; top: 122px; left: -100%;}
#company .history .slide-box .swiper-slide:after{ content:''; display:block; width: 100%; height: 1px; background: rgba(255,255,255,0.1); position: absolute; top: 122px; left: 0;}
#company .history .slide-box .swiper-slide .year{ color:#fff; font-family: var(--lora);  }
#company .history .slide-box .swiper-slide .year:after{ content:''; display:block; width: 1px; height: 25px; background: #fff; margin: 40px 0; }
#company .history .slide-box .swiper-slide ul li{ display:flex; color:rgba(255,255,255,0.8); font-weight: 300; }
#company .history .slide-box .swiper-slide ul li:not(:last-child){ margin-bottom: 20px; }
#company .history .slide-box .swiper-slide ul li:before{ content:''; display:block; width: 6px; height: 1px; background: rgba(255,255,255,0.8); margin-top: 12px; margin-right: 10px; flex-shrink:0; }
#company .history .slide-nav{ position: absolute; transform:translateX(-50%); left: 50%; bottom: 80px; z-index: 5; display:flex; align-items:center;  justify-content: center;}
#company .history .slide-nav span{ display:block; width: 2px; height: 20px; background: rgba(255,255,255,0.1); margin: 0 30px;}

#team section:not(:last-child){ margin-bottom: 120px; }
#team h4.title{ margin-bottom: 40px; }
#team .ctn-box{ display:flex; flex-wrap:wrap;  gap: 40px; }
#team .ctn-box .item-box{ position: relative; width: calc((100% - 80px) / 3); height: 500px; cursor:pointer; }
#team .ctn-box .item-box:after,
#team .ctn-box .item-box:before{ content:''; display:block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition:all 0.6s;  }
#team .ctn-box .item-box:after{ background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, #AAA 100%); z-index: 0;}
#team .ctn-box .item-box:before{ background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, #FFF 100%); z-index: 0; opacity: 0; }
#team .ctn-box .item-box .txt-wrap{ position: relative; display:flex; align-items:flex-end; width: 100%; height: 100%; padding: 30px; color:#fff; z-index: 5; }
#team .ctn-box .item-box .txt-wrap:before{ content:''; display:block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50.33%, rgba(0, 0, 0, 0.50) 100%);z-index: 2; transition:all 0.6s; }
#team .ctn-box .item-box .txt-wrap .fit-box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
#team .ctn-box .item-box .txt-wrap .txt-box{ position: relative; z-index: 2; transition:all 0.6s; }
#team .ctn-box .item-box .txt-wrap .txt-box p span{ display:flex; align-items:center; }
#team .ctn-box .item-box .txt-wrap .txt-box .stxt{ font-weight: 500; letter-spacing: -0.4px; display:flex; align-items:center; margin-bottom: 10px; }
#team .ctn-box .item-box .txt-wrap .txt-box .stxt span:before{ content:''; display:block; width: 5px; height: 15px; background: url(/img/sub/slash.png) no-repeat 50% 50%; margin: 0 15px; }
#team .ctn-box .item-box .txt-wrap .txt-box .title{ display:flex; align-items:center; letter-spacing: -0.64px; font-weight: 500; }
#team .ctn-box .item-box .txt-wrap .txt-box .title span{ font-family: var(--lora); font-weight: 500; }
#team .ctn-box .item-box .txt-wrap .txt-box .title span.lora{ font-family: var(--lora); font-weight: 300;}
#team .ctn-box .item-box .txt-wrap .txt-box .title span:before{ content:''; display:block; width: 1px; height: 25px; background: rgba(255,255,255,0.6); margin: 0 15px; }
#team .ctn-box .item-box .txt-wrap .txt-box .view{ position: absolute; bottom: 0; left: 0; font-family: var(--lora); opacity: 0; transition:all 0.5s; }
#team .ctn-box .item-box .txt-wrap .txt-box .view svg{ margin-left: 20px; }
#team .ctn-box .item-box.on:after{ opacity: 0; }
#team .ctn-box .item-box.on:before{ opacity: 1; }
#team .ctn-box .item-box.on .txt-wrap .fit-box img{ transform:translate(-50%,-50%) scale(1.05); }
#team .ctn-box .item-box.on .txt-wrap .txt-box{ padding-bottom: 45px; }
#team .ctn-box .item-box.on .txt-wrap .view{ opacity: 1; }
#team .ctn-box .pop-box{ position: relative; position: fixed; transform:translate(-50%,-50%); top: 50%; left: 50%; z-index: 1002; max-width: 680px; width: 100%; padding: 50px; background: #fff; 
cursor:auto; display:none; }
#team .ctn-box .pop-box .close{ position: absolute; top: 30px; right: 30px; }
#team .ctn-box .pop-box .title-box{ padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #000; }
#team .ctn-box .pop-box .title-box ul{ display:flex; align-items:center; }
#team .ctn-box .pop-box .title-box .stxt-list{ margin-bottom: 10px;}
#team .ctn-box .pop-box .title-box .stxt-list li{ color: #111; font-weight: 500; letter-spacing: -0.34px; }
#team .ctn-box .pop-box .title-box .stxt-list li:not(:last-child):after{ content:'/'; margin: 0 10px;}
#team .ctn-box .pop-box .title-box .title-list li{ color: #111; font-weight: 600; letter-spacing: -0.72px; display:flex; align-items:center; }
#team .ctn-box .pop-box .title-box .title-list li:not(:last-child):after{ content:''; display:block; width: 1px; height: 20px; background: #000; margin: 0 15px; }
#team .ctn-box .pop-box .title-box .title-list li.lora{ font-family: var(--lora); font-weight: 400;}
#team .ctn-box .pop-box .txt-box:not(:last-child){ margin-bottom: 30px;}
#team .ctn-box .pop-box .txt-box .title{ color: #111; font-weight: 500; letter-spacing: -0.38px; margin-bottom: 15px; }
#team .ctn-box .pop-box .txt-box ul{ background: #F8F8F8; padding: 20px; }
#team .ctn-box .pop-box .txt-box ul li{ color: #333; font-weight: 300; letter-spacing: -0.34px; display:flex; align-items:center; }
#team .ctn-box .pop-box .txt-box ul li:before{ content:''; display:block; width: 5px; height: 5px; background: #000; margin-right: 10px;}
#team .ctn-box .pop-box .txt-box ul li:not(:last-child){ margin-bottom: 10px; }

#portfolio .ctn-box{ display:flex; flex-wrap:wrap; gap:40px; }
#portfolio .ctn-box .item-box{ position: relative; width: calc((100% - 120px) / 4); height: 300px; display:flex; justify-content:center; align-items:center; background: #F8F8F8; }
#portfolio .ctn-box .item-box .txt-box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0;  transition:all 0.5s;  }
#portfolio .ctn-box .item-box .txt-box a{ display:block; width: 100%; height: 100%; display:flex; align-items:flex-end; padding: 30px; }
#portfolio .ctn-box .item-box .txt-box .stxt{ position: absolute; top: 30px; left: 30px; color: #FFF; font-family: var(--lora); font-weight: 500; letter-spacing: -0.32px; }
#portfolio .ctn-box .item-box .txt-box dl{ width: 100%; }
#portfolio .ctn-box .item-box .txt-box dl dt{ color: #FFF; font-weight: 600; letter-spacing: -0.52px; padding-bottom: 20px; border-bottom: 1px solid #FFF; margin-bottom: 20px; }
#portfolio .ctn-box .item-box .txt-box dl dd p{ display:flex; color: #FFF; font-weight: 300; letter-spacing: -0.34px; }
#portfolio .ctn-box .item-box .txt-box dl dd p:not(:last-child){ margin-bottom: 10px; }
#portfolio .ctn-box .item-box .txt-box dl dd p span{ min-width:110px; font-weight: 600; }
#portfolio .ctn-box .item-box figure{ width: 100%; padding-bottom: 26%; position: relative; }
#portfolio .ctn-box .item-box figure img{ max-width: 100%; max-height: 100%; mix-blend-mode: darken; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#portfolio .ctn-box .item-box:hover .txt-box{ opacity: 1; }

#code .w1720 > div:not(:last-child){ margin-bottom: 80px; }
#code .title-box .txt{ color: #111; font-weight: 500; line-height: 1.7; letter-spacing: -0.46px; }
#code .ctn-box{ border-top: 1px solid #000; }
#code .ctn-box dl{ padding: 40px 0; border-bottom: 1px dashed #AAA; cursor:pointer; }
#code .ctn-box dl dt{ display:flex; justify-content:space-between; padding: 0 20px; }
#code .ctn-box dl dt p{ display:flex; align-items:center; color: #111; font-weight: 300; letter-spacing: -0.38px;  }
#code .ctn-box dl dt p span{ width: 40px; height: 40px; background: #000; display:flex; justify-content:center; align-items:center; color: #FFF; font-weight: 600; letter-spacing: -0.4px; 
margin-right: 20px; flex-shrink:0; }
#code .ctn-box dl dt button{ position: relative; width: 25px; height: 25px; }
#code .ctn-box dl dt button span{ display: block; width: 1px; height: 100%; background: #000; position: absolute; transform: translate(-50%,-50%); top: 50%;  left: 50%; transition: all 0.5s; }
#code .ctn-box dl dt button span.btn{ transform: translate(-50%,-50%) rotate(90deg); }
#code .ctn-box dl.on dt button span.top { transform: translate(-50%,-50%) rotate(270deg); }
#code .ctn-box dl.on dt button span.btn { transform: translate(-50%,-50%) rotate(360deg);  opacity: 0; }
#code .ctn-box dl dd{ background: #F8F8F8; padding: 60px;  margin-top: 40px; display:none;  }
#code .ctn-box dl dd > *{ color: #333; font-weight: 300; line-height: 1.7; letter-spacing: -0.34px; }
#code .ctn-box dl dd > *:not(:last-child){ margin-bottom: 20px; }
#code .ctn-box dl dd ul li{ display:flex; }
#code .ctn-box dl dd ul li:not(:last-child){ margin-bottom: 10px;}
#code .ctn-box dl dd ul li span{ min-width: 30px; }
#code .txt-box .title{ color: #111; font-weight: 600; letter-spacing: -0.42px; margin-bottom: 40px; }
#code .txt-box div:not(:last-child){ margin-bottom: 40px; }
#code .txt-box div p{ color: #111; font-weight: 500; letter-spacing: -0.38px; margin-bottom: 20px; }
#code .txt-box div ul{ color: #333; font-weight: 300; letter-spacing: -0.34px; }
#code .txt-box div ul li:not(:last-child){ margin-bottom: 10px; }

#esg .ctn-box{ position: relative; padding-top: 150px; margin-bottom: 180px; }
#esg .ctn-box:before{ content:''; display:block; position: absolute; top: 0; left: 0; width: 100%; height: 70%; background: #F8F8F8; z-index: -1;}
#esg .ctn-box dt{ color: #111; text-align: center;font-weight: 600; line-height: 1.5; letter-spacing: -0.72px; margin-bottom: 80px; }
#esg .ctn-box dd{ display:flex; justify-content:center; }
#esg .ctn-box dd figure{ position: relative; }
#esg .ctn-box dd figure:not(:last-child){ margin-right: 35px; }
#esg .ctn-box dd figure span{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; color: #FFF; text-align: center; font-family: var(--lora); font-weight: 600; letter-spacing: -0.64px; }
#esg .table-box{ display:flex; flex-wrap:wrap; border-top: 2px solid #000; } 
#esg .table-box div{ width: 50%; display: flex; flex-direction: column; border-bottom: 1px solid #E5E5E5; }
#esg .table-box div p{ background: #F8F8F8; color: #111; text-align: center; font-weight: 500; letter-spacing: -0.42px; padding: 25px 20px; } 
#esg .table-box div ul{ height: 100%; padding: 50px; }
#esg .table-box div:not(:last-child) ul{ border-right: 1px solid #E5E5E5; }
#esg .table-box div ul li{ color: #333; font-weight: 300; letter-spacing: -0.36px; }
#esg .table-box div ul li:not(:last-child){ margin-bottom: 15px; }

#contact > div{ display:flex; }
#contact .map-box{ max-width:1120px; width: 100%; height: ; }
#contact .map-box iframe{ width: 100%; height: 100%; }
#contact .txt-box{ opacity: 1;}
#contact .txt-box .inner{ background: #222; padding: 60px;  clip-path: inset(0 100% 0 0); filter:blur(5px); -webkit-filter(5px); transition: all 1s; }
#contact .txt-box h4.title{ color:#fff; margin-bottom: 95px; }
#contact .txt-box ul li{ color: #CCC; font-weight: 300; line-height: 1.5; letter-spacing: -0.42px; }
#contact .txt-box ul li:not(:last-child){ margin-bottom: 25px; }
#contact .txt-box ul li span{ display:block; color: #FFF; font-weight: 600; letter-spacing: -0.42px; margin-bottom: 10px; line-height: 1.3; }
#contact .txt-box.aos-animate .inner{ clip-path: inset(0 0 0 0); filter:blur(0px); -webkit-filter(0); }