/* common */
.inner100{ padding: 0 100px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap:30px; }

main section{ overflow: hidden; }

/* main */
main .visual{ position: relative; width: 100%; height: 100vh; overflow: hidden; } 
main .visual .slide-box{ width: 100%; height: 100%; }
main .visual .slide-box .slick-list,
main .visual .slide-box .slick-track{ height: 100%; }
main .visual .slide-box .slick-slide{ position: relative; padding: 200px 100px 160px; display:flex; overflow: hidden; height: 100%; }
main .visual .slide-box .slick-slide:after{ content:''; display:block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;     background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.45) 90%), rgba(0, 0, 0, 0.0) 30% / cover no-repeat;}
main .visual .slide-box .slick-slide video{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }
main .visual .slide-box .slick-slide .bg{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; width:101%; height:101%; }
main .visual .slide-box .slick-slide .bg img { width:100%; height:100%; object-fit:cover; }
main .visual .slide-box .slick-slide .txt-box{ color:#ffff; position: relative; z-index: 2; display: flex; flex-direction: column;  justify-content: flex-end;}
main .visual .slide-box .slick-slide .txt-box .title{ margin-bottom: 30px; font-weight: bold;}
main .visual .slide-box .slick-slide .txt-box .txt{ letter-spacing: -1.38px;  position: relative; z-index: 5; color:#fff; letter-spacing: -1.8px; line-height: 1.33; width: 100%;} 
main .visual .slide-box .slick-slide .txt-box .txt2{ margin: 10px 0 0; }
main .visual .slide-box .slick-slide .txt-box .title span { font-family:var(--imp); font-weight:400; }
main .visual .slide-box .slick-slide .sbox { position: absolute; z-index: 3; right: 100px; bottom: 137px; border:none; background: rgba(0, 0, 0, 0.80); padding: 0 15px; height: 50px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 1); font-weight: 600; letter-spacing: -0.66px; line-height: 1.54; }
main .visual .slide-box .slick-active .txt-box .title{ animation: fadeRight 1.2s both; }
main .visual .slide-box .slick-active .txt-box .txt{ animation: fadeLeft 1s 0.5s both; }
main .visual .slide-box .slick-active .txt-box .txt2{ animation: fadeRight 1s 0.8s both; }
main .visual .slide-box .slick-active .sbox{ animation: txtOn 1s 0.4s both; }
main .visual .slide-nav{ position: absolute; left: 100px; bottom: 60px; z-index: 5; display:flex; align-items:center; }
main .visual .slide-nav .slick-dots{ width: auto; order:-1; display:flex; align-items:center; }
main .visual .slide-nav .slick-dots li{ opacity: 0.3; width: 6px; height: 6px; background: #fff; transition:all 0.5s; }
main .visual .slide-nav .slick-dots li:not(:last-child){ margin-right: 10px;}
main .visual .slide-nav .slick-dots li.slick-active{ opacity: 1; } 
main .visual .slide-nav .slick-dots li button{ font-size:0; }
main .visual .slide-nav .slide-arrow{ display:flex; align-items:center; margin-left: 30px; } 
main .visual .slide-nav .slide-arrow figure{ cursor:pointer; }

@keyframes fadeRight{
	0%{ transform: translate3d(-100px, 0, 0);  opacity: 0; filter:blur(15px); }
	100%{  opacity: 1; filter:blur(0); transform: translate3d(0, 0, 0);}
}

@keyframes fadeLeft{
	0%{ transform: translate3d(100px, 0, 0); opacity: 0; filter:blur(15px); }
	100%{  opacity: 1; filter:blur(0); transform: translate3d(0, 0, 0);}
}

@keyframes txtOn{
	0%{  opacity: 0; transform: scale(0.9); }
	100%{  opacity: 1; transform: scale(1); }
}

main .about{ position: relative; overflow: hidden;}
main .about > div{ display:flex; align-items:center; }
main .about .bg-box{ position: relative; opacity: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;	}
main .about .bg-box .img{ position: relative; position: absolute; transform:translateY(-50%);  width: 100%; top: 50%; right: 0; transform-origin: right; transition:all 1.5s , right 1s; }
main .about .bg-box .img img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-height:100%; min-width:100%; width: 100%; }
main .about .bg-box .cover{ position: relative; position:absolute; transform:translateY(-50%) scale(12); top: 50%; right: 0; width: 100%; height: 100%; transition:all 1s; z-index: 5;}
main .about .bg-box .cover img{ width: 100%; height: 100%; }
main .about .bg-box.aos-animate .img{ transform:translateY(-50%); width: 60%; transform-origin: right; }
main .about .bg-box.aos-animate .cover{ transform:translateY(-50%) scale(1); }
main .about .txt-box{ padding: 0 100px; width: 100%; }
main .about .txt-box .title{ font-family: var(--gan); color:#000; font-weight: 600; transition: all 1s 1s; }
main .about .txt-box > div{ margin-left: 60px; transition: all 1s 1.2s; }
main .about .txt-box .txt{ margin: 40px 0 80px; letter-spacing: -0.66px; font-weight: 300; color:#333; line-height: 1.64;}

main .business{ }
main .business .inner100{ padding-top: 150px; padding-bottom: 60px; width: 100%; }
main .business .title-box{ display:flex; align-items:center; justify-content:space-between; }
main .business .title-box > div{ display:flex; align-items:center; }
main .business .title-box .title{ margin-right: 130px; font-weight: 500; color:#000; }
main .business .title-box .txt{ color:#222; font-weight: 300; letter-spacing: -0.6px; line-height: 1.7; }
main .business .content{ display:flex; gap:20px; }
main .business .content .item-box{ position: relative; width: calc((100% - 60px) / 4); height: 55.5vh; overflow: hidden;}
main .business .content .item-box a{ position: relative; display:block; width: 100%; height: 100%; }
main .business .content .item-box a:before{ content:''; display:block;  width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 78, 162, 0.00) -23.88%, #004EA2 59.55%); z-index: 3;
position: absolute; top: 0; left: 0; opacity: 0; transition:all 0.5s; }
main .business .content .item-box figure.icon{ position: absolute; z-index: 2; bottom: 95px; left: 40px;}
main .business .content .item-box figure img{ transition: all 0.5s; }
main .business .content .item-box .txt-box{ position: relative; position: absolute; bottom: -80px; padding: 0 40px 40px; width: 100%; z-index: 4; transition:all 0.5s; }
main .business .content .item-box .txt-box > div{ display:flex; justify-content:space-between; align-items:flex-end; opacity: 0; transform:translateY(30px); transition:all 0.5s; }
main .business .content .item-box .txt-box .title{ color:#fff; font-weight: 500; letter-spacing: -1.38px; margin-bottom: 15px; transition:all 0.5s; }
main .business .content .item-box .txt-box .txt{ color:#fff; line-height: 1.7; letter-spacing: -0.6px; font-weight: 300; }
main .business .content .item-box #viewbtn figure img{ transition:all 0.4s 0.3s; }
main .business .content .item-box:hover #viewbtn figure .on{ opacity: 0; left: 100%; }
main .business .content .item-box:hover #viewbtn figure .off{ left: 50%; opacity: 1; }
main .business .content .item-box:hover a:before{ opacity: 1; }
main .business .content .item-box:hover .txt-box{ bottom: 0; }
main .business .content .item-box:hover .txt-box .title{ font-weight: 600; font-size:46px; }
main .business .content .item-box:hover .txt-box > div{ opacity: 1; transform:translateY(0); }
main .business .content .item-box:hover figure.bg img{ transform:translate(-50%,-50%) scale(1.1); }

main .sustain{ position: relative; overflow: hidden;}
main .sustain .img-box{ position: relative; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
main .sustain .img-box figure{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition:all 0.5s; }
main .sustain .img-box figure.on{ opacity: 1; z-index: 10;}
main .sustain .inner100{ position: relative; z-index: 2; padding-top: 180px; padding-bottom: 120px; width: 100%; }
main .sustain .content .txt-box{ display:flex; flex-direction:column; align-items: flex-end; }
main .sustain .content .txt-box > div{ margin: 0 30px; transition:all 1s 0.2s; }
main .sustain .content .txt-box .title{ color:#fff; font-weight: 500; text-transform: uppercase; }
main .sustain .content .txt-box .txt{ color:#fff; letter-spacing: -0.6px; line-height: 1.7; font-weight: 300; margin: 30px 0 60px;}
main .sustain .content .item-box figure{ cursor:pointer; }
main .sustain .content .img-btn{ display:flex; }
main .sustain .content .img-btn .item-box{ width: calc((100% / 6)); text-align: center; font-weight: 600; letter-spacing: -0.66px;}
main .sustain .content .img-btn .item-box a{ display:inline-block; }
main .sustain .content .img-btn .item-box > *{ opacity: 0.6; transition:all 0.5s; }
main .sustain .content .img-btn .item-box figure{ cursor:pointer; position: relative; }
main .sustain .content .img-btn .item-box figure .bg{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; max-width:none; z-index: -1; opacity: 0; transition:all 0.5s; }
main .sustain .content .img-btn .item-box .txt{ margin-top: 30px; color:#fff; }
main .sustain .content .img-btn .item-box.on > *,
main .sustain .content .img-btn .item-box.on figure .bg{ opacity: 1; }

main .news .inner100{ padding-top: 120px; padding-bottom: 40px; justify-content:flex-start; gap:0; }
main .news .title-box{ display:flex; align-items:center; margin-bottom: 80px;}
main .news .title-box > div{ display:flex; align-items:center; }
main .news .title-box ul{ display:inline-flex; align-items:center; margin-left: 60px; background: #000; border-radius:50px; padding: 0 20px; height: 40px; }
main .news .title-box ul li{ opacity: 0.5; transition:all 0.5s; }
main .news .title-box ul li:not(:last-child){ margin-right: 20px;}
main .news .title-box ul li button{ color:#fff; letter-spacing: -0.54px; font-weight: 500; }
main .news .title-box ul li.on{ opacity: 1; }
main .news .title-box #viewbtn{ margin-left: auto; }
main .news .title-box .title{ color:#000; font-weight: 500; }
main .news .content-wrap{ position: relative; }
main .news .content{ position: relative; position:absolute; top: 0; left: 0; width: 100%; opacity: 0; pointer-events:none; transition: opacity 0.7s; }
main .news .content.on{ position: relative; opacity: 1; pointer-events:auto; }
main .news .content .slide-box{ width: 100%; overflow: hidden;}
main .news .content .slide-box .swiper-slide{ width: calc((100% - 40px) / 3); }
main .news .content .slide-box .swiper-slide .txt-box{ display:flex; align-items: flex-start; margin-bottom: 30px;}
main .news .content .slide-box .swiper-slide .txt-box .stitle{ color:#000; font-weight: 500; letter-spacing: -0.45px; display:flex; align-items:center; margin-top: 7px; }
main .news .content .slide-box .swiper-slide .txt-box .stitle:after{ content:''; display:block; width: 60px; height: 1px; background: #000; margin: 0 20px; }
main .news .content .slide-box .swiper-slide .txt-box .txt{ text-overflow: ellipsis; overflow: hidden;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
min-height: 65px; color:#111; font-weight: 500; letter-spacing: -0.72px; margin-bottom: 20px; }
main .news .content .slide-box .swiper-slide .txt-box .day{ color:#aaa; font-family: var(--gan); font-weight: 300; }
main .news .content .slide-box .swiper-slide figure{ width: 100%; height: 37.1vh; }
main .news .content .slide-box .swiper-slide figure img{ transition:all 0.5s; }
main .news .content .slide-box .swiper-slide:hover figure img{ transform:translate(-50%,-50%) scale(1.1); }
main .news .content .slide-dots{ margin-top: 55px; }
main .news .content .slide-dots span{ margin: 0; width: 6px; height: 6px; border-radius:0; background: #000; }
main .news .content .slide-dots span:not(:last-child){ margin-right: 10px;}

main .career .inner100{ padding-top: 100px; padding-bottom: 60px; flex-direction: row; }
main .career .inner100 > div{ width: calc((100% - 20px) / 2);} 
main .career .title-box{ position: relative; padding: 100px; height: 100%; display: flex; flex-direction: column; justify-content: space-between;}
main .career .title-box .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
main .career .title-box .txt-box{ color:#fff; }
main .career .title-box .txt-box .title{ font-weight: 500; }
main .career .title-box .txt-box > div{ margin-left: 60px; }
main .career .title-box .txt-box .txt{ letter-spacing: -0.6px; line-height: 1.7; font-weight: 300; margin: 30px 0 60px;  }
main .career .title-box .icon-box div{ width: calc( 100% / 3 ); color:#fff; text-align: center; }
main .career .title-box .icon-box div figure{ margin-bottom: 20px; }
main .career .content{ display:flex; flex-wrap:wrap; gap:20px; }
main .career .content .item-box{ position: relative; width: calc((100% - 20px) / 2); height: calc((100% - 20px) / 2); overflow: hidden; padding: 50px; }
main .career .content .item-box .bg{ position: absolute; top: 0; left: 0; z-index: -1; }
main .career .content .item-box p{ color:#fff; }
main .career .content .item-box .txt{ font-weight: 300; line-height: 1.5; letter-spacing: -0.6px; margin: 30px 0 40px; }
main .career .content .item-box .bg-icon{ position: absolute; bottom: 0; right: 0; }
main .career .content .link{ padding: 0; }
main .career .content .link a{ display:block; padding: 50px; width: 100%; height: 100%; }
main .career .content .link figure img{ transition:all 0.8s; }
main .career .content .link:hover figure img{ transform:translate(-50%,-50%) scale(1.1); }
main .career .content .item03{ background: #00529C; }
main .career .content .item04{ background: #007360; }


@media screen and (max-width:1024px){
	main .visual .slide-box .slick-slide .sbox { right: 50px; bottom: 80px; padding: 0 20px; height: 60px;  }
}
@media screen and (max-width:640px){
	main .visual .slide-box .slick-slide .sbox { right: 20px; bottom: 50px; padding: 0 15px; height: 55px; font-size:17px; }
}
@media screen and (max-width:540px){
	main .visual .slide-nav .slide-arrow{ margin-left: 10px; } 
	main .visual .slide-box .slick-slide .sbox { right: 10px; bottom: 30px; height: 45px; padding: 0 12px; }
}