.bored{border:1px solid red !important}
.none{display:none !important;}
.mobile-only{display:none !important;}


.header{position:relative;z-index:9;}
#top-logo{display:block;width:220px;height:95px;}



#mainpage{background:#f4eee1;position:fixed;top:0;left:0;z-index:0;width:100vw;height:100vh;padding:0 80px;display:flex;align-items:center;justify-content:center;}
#mainpage .mainContainer{position:relative;margin-top:130px;max-width:1200px;min-width:1000px;width:100%;height:calc(100% - 130px);display:flex;align-items:center;justify-content:center;}

.main-ani-wrapper{position:absolute;width:100%;height:100%;top:0;opacity:0;display:flex;align-items:center;justify-content:center;}

#business-wrapper{animation:start1 0.8s cubic-bezier(0.2,0,0,1.25) forwards;animation-delay:.7s;z-index:4;}
@keyframes start1{
	0%{transform:translateY(-50px) translateX(-80px);opacity:0;}
	100%{transform:translateY(0) translateX(0);opacity:1;}
}
#about-wrapper{animation:start2 0.8s cubic-bezier(0.2,0,0,1.25) forwards;opacity:0;animation-delay:.8s;z-index:2;}
@keyframes start2{
	0%{transform:translateY(-50px) translateX(80px);opacity:0;}
	100%{transform:translateY(0) translateX(0);opacity:1;}
}
#career-wrapper{animation:start3 0.8s cubic-bezier(0.2,0,0,1.25) forwards;opacity:0;animation-delay:.9s;z-index:5;}
@keyframes start3{
	0%{transform:translateY(50px) translateX(80px);opacity:0;}
	100%{transform:translateY(0) translateX(0);opacity:1;}
}
#board-wrapper{animation:start4 0.8s cubic-bezier(0.2,0,0,1.25) forwards;opacity:0;animation-delay:1s;z-index:3;}
@keyframes start4{
	0%{transform:translateY(-50px) translateX(80px);opacity:0;}
	100%{transform:translateY(0) translateX(0);opacity:1;}
}


.main-ani{position:absolute;transition:all 0.5s cubic-bezier(0.5,0,0,1.25);}
.main-ani.hover{transform:translateY(-35px) scale(1.09);}
.main-ani .text{transition:all .3s ease-in-out;z-index:5;position:absolute;}
.main-ani .default{opacity:1;}
.main-ani .active{opacity:0;}
.main-ani.hover .text{transform:scale(1.1);}
.main-ani.hover .default{opacity:0;}
.main-ani.hover .active{opacity:1;}
.main-ani.exp{filter:grayscale(80%);opacity:0.8;}
.main-ani .tmp{width:100%;}


#ani_main_business{width:59%;margin-right:48%;margin-bottom:3%;}
#ani_main_business .text{width:32%;left:17%;bottom:21%}
#ani_main_about{width:51%;margin-left:14%;margin-bottom:30%;}
#ani_main_about .text{width:32%;left:20%;bottom:9%}
#ani_main_career{width:37%;margin-left:6%;margin-top:30%;}
#ani_main_career .text{width:33%;left:50%;bottom:19%}
#ani_main_board{width:45%;margin-left:64%;margin-bottom:2%;}
#ani_main_board .text{width:28%;left:28%;bottom:10%}





#mainpage .link{position:absolute;z-index:6;display:block;opacity:0;cursor:pointer;}
#mainpage .link:before{content:'';font-size:0;height:0;margin:0;width:100%;display:block;}

#mainpage .link_business{width:59%;margin-right:45%;margin-bottom:2%;background:red;clip-path:polygon(38% 10%, 95% 63%, 57% 100%, 0 45%);}
#mainpage .link_business:before{padding-top:63%;}
#mainpage .link_about{width:51%;margin-left:24%;margin-bottom:20%;background:red;clip-path:polygon(48% 0%, 93% 45%, 44% 100%, 0 52%);}
#mainpage .link_about:before{padding-top:53%;}
#mainpage .link_career{width:39%;margin-left:6%;margin-top:34%;background:red;clip-path:polygon(55% 0%, 100% 42%, 44% 100%, 0 55%);}
#mainpage .link_career:before{padding-top:61%;}
#mainpage .link_board{width:44%;margin-left:62%;margin-bottom:-2%;background:red;clip-path:polygon(64% 0%, 100% 37%, 35% 100%, 0 67%);}
#mainpage .link_board:before{padding-top:58%;}



#dotted-line{background:url('./img/bg-line.svg') no-repeat center / 100% auto;width:93%;height:88%;position:absolute;margin-top:7%;margin-left:2%;z-index:1;animation:fadeIn .3s ease-in-out forwards;opacity:0;animation-delay:1s;}
@keyframes fadeIn{
	0%{opacity:0;}
	100%{opacity:1;}
}


.bg-object{position:absolute;z-index:0;}
.bg-object1{width:1000px;left:-120px;top:0;animation:bgFadeIn1 1s cubic-bezier(0.5,0,0,1.25) forwards;}
.bg-object2{width:390px;top:0;right:0;animation:bgFadeIn2 1s cubic-bezier(0.5,0,0,1.25) forwards;}
.bg-object3{width:600px;left:0;bottom:0;animation:bgFadeIn3 1s cubic-bezier(0.5,0,0,1.25) forwards;}

@keyframes bgFadeIn1{
	0%{transform:translateY(-60px) translateX(100px);opacity:0;animation-delay:.1s;}
	100%{transform:translateY(0) translateX(0);opacity:1;}
}
@keyframes bgFadeIn2{
	0%{transform:translateY(-60px) translateX(100px);opacity:0;animation-delay:.2s;}
	100%{transform:translateY(0) translateX(0);opacity:1;}
}
@keyframes bgFadeIn3{
	0%{transform:translateY(60px) translateX(-100px);opacity:0;animation-delay:.3s;}
	100%{transform:translateY(0) translateX(0);opacity:1;}
}