@media screen and (max-width:1024px){html,body{font-size:54.61px !important}
}
@media screen and (min-width:320px) and (max-width:768px){html,body{font-size:17.06px !important}
}
@media screen and (min-width:375px) and (max-width:768px){html,body{font-size:20px !important}
}
@media screen and (min-width:414px) and (max-width:768px){html,body{font-size:22.08px !important}
}
@media screen and (min-width:480px) and (max-width:768px){html,body{font-size:25.6px !important}
}
@media screen and (min-width:768px) and (max-width:768px){html,body{font-size:40.96px !important}
}
.recruit-container{overflow:hidden;position:relative;height:100vh}
.recruit-container .item-wrap{position:absolute;top:0;left:0;height:100%;padding-left:50px;display:flex;transform:translateX(0);-webkit-transform:translateX(0)}
.recruit-container .item{background-color:#000;height:100%;color:#fff;display:flex}
.recruit-container .item:nth-child(2n){background-color:#fff;color:#181818}
.recruit-container .item:nth-child(2n) .img:after{background-color:#fff}
.recruit-container nav{position:absolute;z-index:2;bottom:0;left:50px;height:50px;width:100vh;border-bottom:1px solid #313131;display:flex;transform-origin:left bottom;-webkit-transform-origin:left bottom;transform:rotate(-90deg);-webkit-transform:rotate(-90deg);background-color:#000;transition:0.3s;-webkit-transition:0.3s}
.recruit-container nav.on{background-color:#fff}
.recruit-container nav.on a{color:rgba(0,0,0,0.5)}
.recruit-container nav:after{content:'';width:0.5px;height:100%;background-color:#313131;position:absolute;left:0;right:0;bottom:0;margin:auto}
.recruit-container nav a{height:100%;width:50%;display:flex;justify-content:space-around;align-items:center;color:rgba(255,255,255,0.5);overflow:hidden;transition:0.3s;-webkit-transition:0.3s}
.recruit-container nav span{display:block;font-size:16px}
.recruit-container .text-container{height:100%;width:70vw;box-sizing:border-box;padding-left:12.9vh;position:relative;display:flex;align-items:center}
.recruit-container .text-container > div{visibility:hidden}
.recruit-container .text-container.on > div{visibility:visible}
.recruit-container .text-container.on .text1{transform:translateX(0);-webkit-transform:translateX(0);opacity:1}
.recruit-container .text-container.on .text2{opacity:1}
.recruit-container .text-container.on .text-style1 div{opacity:1;transform:rotate(0);-webkit-transform:rotate(0)}
.recruit-container .text-container::after{content:"";display:block;width:2px;height:100%;background-color:#000;position:absolute;z-index:1;top:0;right:-1px}
.recruit-container .item:nth-child(2n) .text-container::after{background-color:#fff}
.recruit-container .text1{line-height:1;position:absolute;left:12.9vh;top:10.6vh;text-transform:uppercase;transform:translateX(60px);-webkit-transform:translateX(60px);opacity:0;transition:1.2s;-webkit-transition:1.2s}
.recruit-container .text1 span{text-transform:lowercase;color:#99999a;font-family:'Arial'}
.recruit-container .text2{position:absolute;bottom:10.6vh;right:11.1vh;line-height:1.85;width:31.6vw;opacity:0;transition:1.2s 0.6s;-webkit-transition:1.2s 0.6s;text-align:justify}
.recruit-container .text3 .text-style1{margin-bottom:10px}
.recruit-container .text3 .text-style1:nth-child(3){margin-bottom:0}
.recruit-container .text3,.recruit-container .text4{height:calc(1em * 3 + 20px);font-size:64px}
.recruit-container .text-style1{overflow:visible}
.recruit-container .text-style1 div{transform-origin:top left;-webkit-transform-origin:top left;transform:rotate(60deg);-webkit-transform:rotate(60deg);opacity:0;transition:1.4s;-webkit-transition:1.4s}
.recruit-container .text-style1:nth-child(2) div{transition-delay:0.2s;-webkit-transition-delay:0.2s}
.recruit-container .text-style1:nth-child(3) div{transition-delay:0.4s;-webkit-transition-delay:0.4s}
.recruit-container .text4 .text-style1:nth-child(1){font-size:78px;line-height:60px;font-weight:bold;font-family:'Arial'}
.recruit-container .text4 .text-style1:nth-child(2){margin:26px 0 22px}
.recruit-container .text4 .text-style1:nth-child(3){font-size:18px}
.recruit-container .img{height:100%;width:103.7vh;overflow:hidden;position:relative}
.recruit-container .img div{height:100%;background:no-repeat center;background-size:cover;transition:1.2s;-webkit-transition:1.2s}
.recruit-container .img:after{content:'';width:100%;height:100%;background-color:#000;position:absolute;top:0;left:0;transition:1s;-webkit-transition:1s}
.recruit-container .img.on div{transform:scale(1);-webkit-transform:scale(1)}
.recruit-container .img.on:after{width:0}
.mobil-recruit-container{display:none;padding-top:2rem;font-size:0.65rem}
.mobil-recruit-container nav{position:fixed;width:100%;height:2rem;line-height:2rem;border-bottom:1px solid #313131;display:flex;background-color:#000;left:0;top:0;z-index:999;font-size:0.7rem}
.mobil-recruit-container nav.on{background-color:#fff}
.mobil-recruit-container nav.on a{color:rgba(0,0,0,0.3)}
.mobil-recruit-container nav:after{content:'';width:0.5px;height:100%;background-color:#313131;position:absolute;left:0;right:0;bottom:0;margin:auto}
.mobil-recruit-container nav a{text-align:center;width:50%;height:100%;display:block;color:rgba(255,255,255,0.3);overflow:hidden;transition:0.3s;-webkit-transition:0.3s}
.mobil-recruit-container .item{background-color:#000;color:#fff}
.mobil-recruit-container .item:nth-child(2n){background-color:#fff;color:#181818}
.mobil-recruit-container .item:nth-child(2n) img:after{background-color:#fff}
.mobil-recruit-container .text-container{padding:1.6rem 5% 2.8rem;overflow:hidden}
.mobil-recruit-container .text-container.init > div{visibility:hidden}
.mobil-recruit-container .text-container.init .text-style1 div{transform:translateY(101%);-webkit-transform:translateY(101%)}
.mobil-recruit-container .text-container.init .text1{transform:translateX(2rem);-webkit-transform:translateX(2rem);opacity:0}
.mobil-recruit-container .text-container.init .text2{opacity:0}
.mobil-recruit-container .text1{line-height:1;text-transform:uppercase;transition:1.2s;-webkit-transition:1.2s}
.mobil-recruit-container .text1 span{margin-top:0.2rem;display:block;text-transform:lowercase}
.mobil-recruit-container .text2{text-align:justify;line-height:1.5;transition:1.2s 0.6s;-webkit-transition:1.2s 0.6s}
.mobil-recruit-container .text-style1:nth-child(2) div{transition-delay:0.2s;-webkit-transition-delay:0.2s}
.mobil-recruit-container .text-style1:nth-child(3) div{transition-delay:0.4s;-webkit-transition-delay:0.4s}
.mobil-recruit-container .text3,.mobil-recruit-container .text4{margin:2.8rem 0 2rem;font-size:1.8rem}
.mobil-recruit-container .text3 .text-style1{margin-bottom:0.3rem}
.mobil-recruit-container .text4 .text-style1:nth-child(1){font-family:'Arial';font-weight:bold;font-size:2.2rem;line-height:1.8rem}
.mobil-recruit-container .text4 .text-style1:nth-child(2){margin:0.6rem 0 0.4rem}
.mobil-recruit-container .text4 .text-style1:nth-child(3){font-size:0.8rem}
.mobil-recruit-container .img{width:100%;height:96.4vw;overflow:hidden;position:relative}
.mobil-recruit-container .img.init:after{width:100%}
.mobil-recruit-container .img.init div{transform:scale(1.2);-webkit-transform:scale(1.2)}
.mobil-recruit-container .img div{height:100%;background:no-repeat center;background-size:cover;transition:1.2s;-webkit-transition:1.2s}
.mobil-recruit-container .img:after{content:'';width:0%;height:100%;background-color:#000;position:absolute;top:0;left:0;transition:1s;-webkit-transition:1s}
@media screen and (max-width:1480px){.recruit-container .text3,.recruit-container .text4{font-size:54px}
  .recruit-container .text3 .text-style1{margin-bottom:8px}
  .recruit-container .text4 .text-style1:nth-child(1){font-size:64px;line-height:48px}
  .recruit-container .text4 .text-style1:nth-child(2){margin:22px 0 18px}
  .recruit-container .text4 .text-style1:nth-child(3){font-size:16px}
}
@media screen and (max-width:1024px){.recruit-container{display:none}
  .mobil-recruit-container{display:block}
}