/* common */
main section{ overflow: hidden; }
.p100{ padding: 0 100px;}

/* main */
main .visual{ position: relative; width: 100%; height: 100vh; overflow: hidden; } 
main .visual .slide-box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; }
main .visual .slide-box .swiper-slide{ position: relative; display:flex; align-items:center; overflow: hidden;}
main .visual .slide-box .swiper-slide figure{ position: relative; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }
main .visual .slide-box .swiper-slide .txt-box{ width: 100%; color:#ffff; position: relative; z-index: 2; }
main .visual .slide-box .swiper-slide .txt-box *{ opacity: 0; filter:blur(15px); transition:all 1s .3s; }
main .visual .slide-box .swiper-slide .txt-box .stxt{ transform: translate3d(100px, 0, 0);  position: relative; z-index: 5; color:rgba(255,255,255,0.8); font-weight: 500; letter-spacing: -0.72px; line-height: 1.3; width: 100%; margin-bottom: 20px; color:rgba(255,255,255,0.6); transition:all 0.8s 0.8s; } 
main .visual .slide-box .swiper-slide .txt-box .title{ transform: translate3d(-100px, 0, 0); font-weight: bold;}
main .visual .slide-box .swiper-slide-active .txt-box .title{ opacity: 1; filter:blur(0); transform: translate3d(0, 0, 0); }
main .visual .slide-box .swiper-slide-active .txt-box .stxt{ opacity: 1; filter:blur(0); transform: translate3d(0, 0, 0);}
main .visual .slide-nav{ position: relative; position: absolute; bottom: 60px; z-index: 5; display:flex; align-items:center; transform:translateY(100%); opacity: 0; width: 100%;
transition:transform 1s 0.2s, opacity 1.2s 0.4s; }
main .visual .slide-nav .slide-dots{ width: auto; } 
main .visual .slide-nav .slide-dots span{ border-radius: 0; opacity: 0.3; width: 6px; height: 6px; background: #fff; }
main .visual .slide-nav .slide-dots span.swiper-pagination-bullet-active{ opacity: 1; } 
main .visual .slide-nav .slide-arrow{ display:flex; align-items:center; margin-left: 30px; } 
main .visual .slide-nav .slide-arrow figure{ cursor:pointer; }
main .visual .scroll-box{ position: absolute; bottom: 60px; right: 60px; z-index: 5; display:flex; flex-direction:column; align-items: center; transform:translateX(100%); opacity: 0; transition:transform 1s 0.2s, opacity 1.2s 0.4s;  white-space: nowrap;}
main .visual .scroll-box .txt{ writing-mode: vertical-lr; transform:rotate(180deg); color:#fff; font-family: var(--gan); font-weight: 600; margin-bottom: 20px; text-transform: capitalize; font-weight: 600;  animation: scrolldown 1.5s forwards infinite; }
@keyframes scrolldown{
	0%{ transform:translateY(0) rotate(180deg);}
	50%{ transform:translateY(-20px) rotate(180deg);}
	100%{ transform:translateY(0) rotate(180deg);}
} 
main .visual .scroll-box .top-btn { transform:rotate(180deg); }
main .visual .slide-box.aos-animate .slide-nav,
main .visual .slide-box.aos-animate .scroll-box{ transform:translate(0); opacity: 1; }

main .career{ margin-bottom: 200px; }
main .career .link-box{ display:flex; gap:20px;}
main .career .link-box .item-box{ position: relative; width: calc((100% - 60px) / 4); height: 300px; background: var(--mainC); transform:translateY(10px);  transition:all 0.5s; }
main .career .link-box .item-box a{ position: relative; position: absolute; top: 0; left: 0; display:block; padding: 50px; display:flex; flex-direction:column; justify-content: flex-end; color:#fff; letter-spacing: -0.84px; font-weight: 600; width: 100%; height: 100%; }
main .career .link-box .item-box a em{ font-family: var(--gan);}
main .career .link-box .item-box #viewbtn > figure{ position: absolute; top: 20px; right: 20px;}
main .career .link-box .item-box .txt-box figure{ margin-bottom: 20px; }
main .career .link-box .item02{ background: #007360;}
main .career .link-box .item03{ background: #529E4B;}
main .career .link-box .item04{ background: #222;}
main .career .link-box .item-box:hover{ transform:translateY(0px) }
main .career > div > .txt-box{ position: relative; margin: 210px 0 100px; display:flex; justify-content:flex-end; overflow: hidden;}
main .career .txt-box .btxt{ position: absolute; transform:translateY(-50%); top: 50%; left: 0; font-size:200px; font-family: var(--gan); font-weight: 800; color:#f5f5f5; z-index: -1; }
main .career .txt-box .title{ text-align: right; color:#000; line-height: 1.37; font-weight: 800; letter-spacing: -2.4px; margin-right: 50px; }
main .career .txt-box .title em{ color:var(--mainC); }
main .career .txt-box span{ writing-mode: vertical-lr; position: absolute; transform:translateY(-50%); top: 50%; right: 0; font-family: var(--gan); color:var(--mainC); font-weight: bold; 
opacity: 0; letter-spacing: 15px; filter:blur(10px); -webkit-filter:blur(10px); transition:all 0.7s 0.3s; }
main .career .txt-box > div.aos-animate span{ opacity: 1; letter-spacing: 0; filter:blur(0);  -webkit-filter:blur(0); }
main .career .content{ position: relative; }
main .career .content .tab-box{ display:flex; justify-content:flex-end; align-items:center; margin-bottom: 40px; }
main .career .content .tab-box li button{ position: relative; color:#ddd; font-weight: bold; letter-spacing: -0.9px; transition:all 0.5s; display:flex; align-items:center; }
main .career .content .tab-box li:not(:last-child) button:after{ content:''; display:block; width: 1px; height: 10px; background: #ddd; margin: 0 30px;}
main .career .content .tab-box li.on button,
main .career .content .tab-box li:hover button{ color:#333; }
main .career .content .slide-box{ position: relative; width: 100%; position: absolute; top: 0; left: 0; opacity: 0; pointer-events:none; }
main .career .content .slide-box.on{ position: relative; top: auto; left: auto; z-index: 5; opacity: 1; pointer-events:auto; }
main .career .content .slide-box .wrapper-box{ height: 640px;}
main .career .content .slide-box .swiper-slide{ display:flex; flex-wrap:wrap; gap:20px; }
main .career .content .slide-box .swiper-slide .list{ position: relative; border: 1px solid #EEE; width: calc((100% - 60px) / 4);  height: 309px; transform:translateY(10px); transition:all 0.5s; }
main .career .content .slide-box .swiper-slide .list:hover{ transform:translateY(0px); }
main .career .content .slide-box .swiper-slide .list a{ display:flex; flex-direction:column; justify-content:space-between; height: 100%; padding: 40px 50px; }
main .career .content .slide-box .swiper-slide .list ul{ display:flex; margin-bottom: 20px;}
main .career .content .slide-box .swiper-slide .list ul li{ height: 30px; display:inline-flex; justify-content:center; align-items:center;  padding: 0 15px; color:#333; font-weight: 500; letter-spacing: -0.48px; border-radius:50px; border: 1px solid #DDD; line-height: 1; }
main .career .content .slide-box .swiper-slide .list ul li:not(:last-child){ margin-right: 5px; }
main .career .content .slide-box .swiper-slide .list ul li:first-child{ border:1px solid var(--mainC); background: var(--mainC); font-family: var(--gan); color:#fff; font-weight: 600; letter-spacing: 0; }
main .career .content .slide-box .swiper-slide .list .title{ color:#111; font-weight: 500; letter-spacing: -0.72px; line-height: 1.58; text-overflow: ellipsis; overflow: hidden;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
main .career .content .slide-box .swiper-slide .list .due{ color:#666; font-weight: 300; text-transform: capitalize; font-family: var(--gan);}
main .career .content .slide-box .swiper-slide .list .due img{ margin-right: 10px; } 
main .career .content .slide-box .swiper-slide .list:hover{ border:2px solid var(--mainC); }
main .career .content .slide-box .swiper-slide .list.last,
main .career .content .slide-box .swiper-slide .list:hover.last{ border:none; }
main .career .content .slide-box .swiper-slide .list.last a{ position: relative; padding: 50px;  color:#fff; background: linear-gradient(131deg, #004EA2 3.7%, #6FBA2C 95.09%); letter-spacing: -0.72px; line-height: 1.58; font-weight: 600; transition:all 0.7s; }
main .career .content .slide-box .swiper-slide .list.last p{ display: inline; background-image: linear-gradient(#fff, #fff); background-size: 0% 1px;  background-repeat: no-repeat;  background-position: 0 100%; transition: background-size 0.5s; }
main .career .content .slide-box .swiper-slide .list.last figure{ position: absolute; bottom: 0; right: 0; }
main .career .content .slide-box .swiper-slide .list.last:hover p{ background-size: 100% 1px; }
main .career .content .slide-box .nav-box{ margin-top: 60px; display:flex; justify-content:center; align-items:center; }
main .career .content .slide-box .nav-box .swiper-scrollbar{ position: relative; top: auto; left: auto; bottom: auto; width: 80px; height: 3px; background: rgba(0,0,0,0.2); display:block !important; }
main .career .content .slide-box .nav-box .swiper-scrollbar > div{ background: #000; }
main .career .content .slide-box .nav-box .arrow-box{ display:flex; align-items:center; margin-left: 30px; }
main .career .content .slide-box .nav-box .arrow-box figure{ cursor:pointer; }
main .career .content .slide-box .nav-box.off{ opacity: 0.2;}