@charset "UTF-8";


/* main
==========================================================*/

/*#menu { width: 100%; height: 100%; right: 0; top: 0; display: none; position: fixed; background: #fff; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; z-index: 9901 !important; overflow: scroll !important; }
.navInner { width: 40px; height: 40px; top: 30px; right: 30px; z-index: 9999; cursor: pointer; display: block; position: fixed;}
.menu-trigger { width: 100%; height: 100%; line-height: inherit; cursor: pointer; position: relative; display: inline-block; transition: all .3s; }
.menu-trigger span { width: 30px; height: 1px; left: 5px; display: inline-block; transition: all .3s; position: absolute; background: #000;  }
.menu-trigger span:nth-of-type(1) { top: 10px; }
.menu-trigger span:nth-of-type(2) { top: 20px; }
.menu-trigger span:nth-of-type(3) { top: 30px; }
.menu-trigger:not(.active):hover span:nth-of-type(1) { top: 11px; }
.menu-trigger:not(.active):hover span:nth-of-type(3) { top: 29px; }
.menu-trigger.active span {}
.menu-trigger.active span:nth-of-type(1) { transform: translateY(10px) rotate(-45deg); }
.menu-trigger.active span:nth-of-type(2) { display: none; }
.menu-trigger.active span:nth-of-type(3) { transform: translateY(-10px) rotate(45deg); }
*/
.rechead { }
.recheadlogo{ width: 315px;  left: 30px; top: 20px; position: fixed; z-index: 10}
@media screen and (max-width: 800px){
    .recheadlogo{ width: 220px;  left: 10px; top: 15px;}
}
.recgnavwrap { width: 100%; height: 100%; }
.recgnavul { margin-bottom: -10px;}
.recgnavul li { margin-bottom: 10px; }
.recgnavul li a { padding: 10px; display: block;}

@media screen and (max-width: 800px){
    .navInner { display: block; width: 40px; height: 40px; top: 10px; right: 10px;} 
}

#ind_mv { background: #45A4F5; }
.ind_mv__inner{width: 100vw; height: 100vh; }
/* .ind_mv__bgimg{width: 100vw; height: 100vh;} */
.ind_mv__bgimg_item{position: absolute; overflow: hidden;}
.ind_mv__bgimg_item.img_item1{width: calc(310 / 1400 * 100%); height: calc(400 / 800 * 100%); top: 0; left: 0;}
.ind_mv__bgimg_item.img_item2{width: calc(310 / 1400 * 100%); height: calc(400 / 800 * 100%); top: 0; left: calc(310 / 1400 * 100%); }
.ind_mv__bgimg_item.img_item3{width: calc(390 / 1400 * 100%); height: calc(513 / 800 * 100%); top: 0; left: calc(620 / 1400 * 100%); }
.ind_mv__bgimg_item.img_item4{width: calc(390 / 1400 * 100%); height: calc(287 / 800 * 100%); top: 0; right: 0; }
.ind_mv__bgimg_item.img_item5{width: calc(620 / 1400 * 100%); height: calc(400 / 800 * 100%); bottom: 0; left: 0;}
.ind_mv__bgimg_item.img_item6{width: calc(390 / 1400 * 100%); height: calc(287 / 800 * 100%); bottom: 0; left: calc(620 / 1400 * 100%); }
.ind_mv__bgimg_item.img_item7{width: calc(390 / 1400 * 100%); height: calc(513 / 800 * 100%); bottom: 0; right: 0;}

.ind_mv__bgimg_item.img_item1 .bg_img{width: 100%; height: 100%; background: url("../images/recruit/main01.jpg?001")center center no-repeat; background-size: cover;}
.ind_mv__bgimg_item.img_item2 .bg_img{width: 100%; height: 100%; background: url("../images/recruit/main02.jpg?001")center center no-repeat; background-size: cover;}
.ind_mv__bgimg_item.img_item3 .bg_img{width: 100%; height: 100%; background: url("../images/recruit/main03.jpg?001")center center no-repeat; background-size: cover;}
.ind_mv__bgimg_item.img_item4 .bg_img{width: 100%; height: 100%; background: url("../images/recruit/main04.jpg?001")center center no-repeat; background-size: cover;}
.ind_mv__bgimg_item.img_item5 .bg_img{width: 100%; height: 100%; background: url("../images/recruit/main05.jpg?001")center center no-repeat; background-size: cover;}
.ind_mv__bgimg_item.img_item6 .bg_img{width: 100%; height: 100%; background: url("../images/recruit/main06.jpg?001")center center no-repeat; background-size: cover;}
.ind_mv__bgimg_item.img_item7 .bg_img{width: 100%; height: 100%; background: url("../images/recruit/main07.jpg?001")center center no-repeat; background-size: cover;}
.ind_mv__bgimg .ind_mv__bgimg_item .bg_img{opacity: 0; position: relative; z-index: 2;}
.ind_mv__bgimg.active .ind_mv__bgimg_item .bg_img{opacity: 1; transition-duration: 1.5s; transition-timing-function: cubic-bezier(1,0,1,.91);} 

.ind_mv__bgimg_item .cover{width: 100%; height: 100%; opacity: 1; background-color: #99D9F1; position: absolute; top: 0; left: -100%; z-index: 3;}
.ind_mv__bgimg.active .ind_mv__bgimg_item .cover{animation: animation111 2s cubic-bezier(.05,1.01,.46,1) 0s 1 normal; }
.ind_mv__bgimg.active .ind_mv__bgimg_item.img_item2 .cover{animation: animation111 2s cubic-bezier(.05,1.01,.46,1) 0.2s 1 normal;}
.ind_mv__bgimg.active .ind_mv__bgimg_item.img_item3 .cover{animation: animation111 2s cubic-bezier(.05,1.01,.46,1) 0.4s 1 normal;}
.ind_mv__bgimg.active .ind_mv__bgimg_item.img_item4 .cover{animation: animation111 2s cubic-bezier(.05,1.01,.46,1) 0.1s 1 normal;}
.ind_mv__bgimg.active .ind_mv__bgimg_item.img_item5 .cover{animation: animation111 2s cubic-bezier(.05,1.01,.46,1) 0.3s 1 normal;}
.ind_mv__bgimg.active .ind_mv__bgimg_item.img_item6 .cover{animation: animation111 2s cubic-bezier(.05,1.01,.46,1) 0.2s 1 normal;}
.ind_mv__bgimg.active .ind_mv__bgimg_item.img_item7 .cover{animation: animation111 2s cubic-bezier(.05,1.01,.46,1) 0.5s 1 normal;}
@keyframes animation111 {
	0% {
    left: -100%;
	}
	45% {
		left: 0;
	}
	60% {
		left: 0;
	}
	100% {
		left: 100%;
	}
}

@media screen and (max-width: 860px){
    .ind_mv__inner{ height: calc(100vh - 80px); }
    .ind_mv__bgimg_item.img_item2, .ind_mv__bgimg_item.img_item7{display: none;}
    .ind_mv__bgimg_item.img_item1{width: 64.5%; height: 60%; top: 0; left: 0;}
    .ind_mv__bgimg_item.img_item1 .bg_img{ background: url("../images/recruit/main07.jpg")center center no-repeat; background-size: cover;}
    .ind_mv__bgimg_item.img_item3{width: 35.5%; height: 38%; top: 0; left: auto; right: 0;}
    .ind_mv__bgimg_item.img_item6{width: 35.5%; height: 22%; top: 38%; left: auto; right: 0;}
    .ind_mv__bgimg_item.img_item5{width: 37.5%; height: 40%; left: 0; right: auto;}
    .ind_mv__bgimg_item.img_item4{width: 62.5%; height: 40%; left: auto; right: 0; top: auto; bottom: 0;}
    }
    .maincatch { max-width: 745px; width: 90%; animation: maincatch 1s forwards 2s; opacity: 0; margin-top: 50px; z-index: 9; }
@keyframes maincatch {
	0% { opacity: 0; margin-top: 50px;}
    100% { opacity: 1; margin-top: 0; }
}

#indMainPlaybtn { bottom: 80px; left: calc(50% - 15px); cursor: pointer; position: absolute; z-index: 2; animation: indMainPlaybtn 1s forwards 1s; opacity: 0; }
@keyframes indMainPlaybtn {
	0% { opacity: 0;}
	100% { opacity: 100%; }
}
#indMainPlaybtn a {}
#indMainPlaybtn a span { position: absolute; top: 0; left: 50%; width: 30px; height: 50px; margin-left: -15px; border: 1px solid #fff; border-radius: 50px; box-sizing: border-box;}
#indMainPlaybtn a span::before {position: absolute; top: 10px; left: 50%; content: ''; width: 6px; height: 6px; margin-left: -3px; background-color: #fff; border-radius: 100%; -webkit-animation: sdb 2s infinite; animation: sdb 2s infinite; box-sizing: border-box; }
@keyframes sdb {
	0% {transform: translate(0, 0); opacity: 0; }
	40% {opacity: 1; }
	80% {transform: translate(0, 20px); opacity: 0; }
	100% {opacity: 0; }
}
@media screen and (max-width: 860px){
    #indMainPlaybtn { bottom: 60px; left: calc(50% - 10px); }
    #indMainPlaybtn a span { width: 20px; height: calc(50px / 3 * 2); margin-left: -10px;}
    #indMainPlaybtn a span::before {top: calc(10px / 3 * 2); width: 4px; height: 4px; margin-left: -2px; }
}

/* concept
==========================================================*/

.conceptwrap { padding: 160px 0; animation: bggrad-bl 15s infinite; }

.conceptwrap .inner1080 {}
.concept-l{ width: 50%; float: left;}
.conceptul {}
.conceptul li { margin-bottom: 60px;}
.conceptul li:last-child { font-size: calc(43em / 17); }
.conceptimg{ width: 50%; top: 160px; right: 0; float: right;}
@media screen and (max-width: 1000px){
    .conceptimg{ padding-left: 40px;}
}
@media screen and (max-width: 800px){
    .conceptwrap { padding: 80px 0; }
    .concept-l{ width: 100%; }
    .conceptul { margin-bottom: 60px;}
    .conceptul li { margin-bottom: 30px; }
    .conceptimg{width: 100%; max-width: 450px; margin: 0 auto; padding: 0; top: 0; right: 0; float: none; position: inherit;} 
}

.intwrap{ padding: 120px 0 calc(280px + 60px); background: url(../images/recruit/bg45.png) no-repeat top left #eee; background-size: 100% auto; }
.intwrap .inner1060{}
.midwrap{ margin-bottom: 80px; }
.midjp {}
.intul{ margin-bottom: -280px; }
.intul li{ margin-bottom: 280px; position: relative;flex-direction: row-reverse;}
.intul li:nth-child(2n) { flex-direction: row;}
.intimg{ top: 40px; width: calc(600 / 1060 * 100%); left: 0; position: absolute;}
.intul li:nth-child(2n) .intimg { left: inherit; right: 0; }
.inttxtwrap {width: calc(530 / 1060 * 100%); padding: 50px; background: #fff; }
.inttxt-t {}
.intnamewrap { margin-bottom: 25px; line-height: 1}
.intnamewrap .fs36 { letter-spacing: 0.2em;}
.intnamewrap .fs13 { margin-left: 30px; }
.intposiwrap { margin-bottom: 30px; line-height: 1}
.intposiwrap p:nth-child(2) { padding-left: 1em; margin-left: 1em; position: relative;}
.intposiwrap p:nth-child(2):after { content: ""; width: 1px; height: 100%; position: absolute; top: 0; left: 0;}
.fc-bl .intposiwrap p:nth-child(2):after { background: #1E50FF; }
.fc-re .intposiwrap p:nth-child(2):after { background: #FF4A51; }
.inttxt-b { text-align: justify;}
.inttag{ top: calc(100% + 40px); left: 0; font-style: italic; width: 100%;}
@media screen and (max-width: 1140px){
    .intwrap{ padding: 120px 0 calc(25vw + 60px); }
    .intul{ margin-bottom: -25vw; }
    .intul li{ margin-bottom: 25vw;}
    .intimg{ left: -40px; width: calc(600 / 1060 * 100% + 40px); }
    .intul li:nth-child(2n) .intimg { left: inherit; right: -40px;} 
}
@media screen and (max-width: 800px){
    .intwrap{ padding: 60px 0 calc(120px + 30px);}
    .midwrap{ margin-bottom: 40px; }
    .intul{ margin-bottom: -120px; }
    .intul li{ margin-bottom: 120px; position: relative; flex-direction: column;  }
    .intul li:nth-child(2n) { justify-content: flex-end; }
    .intimg{ top: 0; width: calc(100% - 80px); max-width: 500px; left: -20px; position: relative; }
    .intul li:nth-child(2n) .intimg { right: -20px; }
    .inttxtwrap {width: calc(100% - 40px); padding: 25px; left: 40px; top: -40px;}
    .intul li:nth-child(2n) .inttxtwrap { left: inherit; right: 40px; }
    .inttxt-t {}
    .intnamewrap { margin-bottom: 15px;}
    .intnamewrap .fs13 { margin-left: 20px; }
    .intposiwrap { margin-bottom: 20px;}
    .inttag{ top: calc(100% + 20px); font-size: 22px;}
}
@media screen and (max-width: 450px){
    .miden { font-size: 42px;}
    .intimg{  width: calc(100% - 10px); }
    .inttxtwrap { width: 100%; left: 0; top: -30px;}
    .intul li:nth-child(2n) .inttxtwrap { left: inherit; right: 0; }
    .intnamewrap { display: block; }
    .intnamewrap .fs36 { font-size: 24px;}
    .intnamewrap .fs13 { margin-top: 10px; margin-left: 0; }
    .intposiwrap { display: block;}
    .intposiwrap p:nth-child(1) { margin-bottom: 5px;}
    .intposiwrap p:nth-child(1):after { display: none;}
}  
    
#cboxOverlay { background: #000; opacity: 0.7 !important; }
#cboxTopLeft,
#cboxTopCenter,
#cboxTopRight,
#cboxMiddleLeft,
#cboxMiddleRight,
#cboxBottomCenter,
#cboxBottomRight,
#cboxBottomLeft{ display: none; }
#cboxLoadedContent { margin-bottom: 0; }
#cboxContent { padding: 60px; background: none; float: none !important; margin: 0 auto;}
#cboxClose { position: absolute; top: 0; right: 0; display: block; width: 40px; height: 40px; background: url(../js/colorbox/images/close.png) no-repeat center; background-size: cover; overflow: hidden; }

@media screen and (max-width: 1060px) {
    #cboxContent { padding: 40px; }
    #cboxClose { width: 30px; height: 30px; }
}
@media screen and (max-width: 750px) {
    #cboxContent { padding: 40px 0; border: none}
}

.gallerywrap{ padding: 100px 0 140px; }
.gallerywrap .inner1060{}
#galleryslide{ padding-top: 110px; margin-top: -110px;} 
#galleryslide .swiper-slide{ width: 600px; }
.galleryimg{ margin-bottom: 20px; }
.gallerytxt {}
#galleryslide .swiper-button{ width: 50px; height: 50px; top: 0; border: 1px solid #1E50FF; border-radius: 50%; background: none; margin: 0; }
#galleryslide .swiper-button:hover { background: #1E50FF; }
#galleryslide .swiper-button:after {  width: 10px; height: 10px; left: calc(50% - 10px);top: calc(50% - 5px); border-top: 1px solid #1E50FF; border-right: 1px solid #1E50FF; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ""; position: absolute;}
#galleryslide .swiper-button-prev:after {  left: calc(50% - 5px); border: none; border-bottom: 1px solid #1E50FF; border-left: 1px solid #1E50FF;}
#galleryslide .swiper-button:hover:after { border-color: #fff;}
#galleryslide .swiper-button-prev{ left: inherit; right: 250px; }
#galleryslide .swiper-button-next{ right: 170px;}
@media screen and (max-width: 1140px){
    #galleryslide .swiper-button-prev{ right: 120px; }
    #galleryslide .swiper-button-next{ right: 40px;}
}
@media screen and (max-width: 800px){
    .gallerywrap{ padding: 50px 0 70px; }
    .gallerywrap .inner1060{}
    #galleryslide{ padding-top: 0; margin-top: 0; padding-bottom: 60px; } 
    #galleryslide .swiper-slide{ width: 300px; }
    #galleryslide .swiper-button{ width: 40px; height: 40px; top: calc(100% - 40px); }
    #galleryslide .swiper-button:after {  width: 8px; height: 8px; left: calc(50% - 8px);top: calc(50% - 4px); }
    #galleryslide .swiper-button-prev:after { left: calc(50% - 4px);}
    #galleryslide .swiper-button-prev{ right: 70px; }
    #galleryslide .swiper-button-next{ right: 20px;}
}
@media screen and (max-width: 450px){
    #galleryslide .swiper-slide{ width: 250px; }
}

.companywrap{ padding: 120px 0; background-size: 100% auto; }
@media screen and (max-width: 800px){
    .companywrap{ padding: 60px 0; }
}

.messagewrap{ padding: 100px 0; animation: bggrad-re 15s infinite; }
.messagewrap .inner1080{}
.messagemid{ line-height: 1; margin-bottom: 60px;}
.messagetxt {}
@media screen and (max-width: 800px){
    .messagewrap{ padding: 60px 0; }
    .messagemid{ margin-bottom: 30px;}
}  
    
.bnrwrap {}
.bnrul { margin-left: -4px;}
.bnrul li { padding: 100px 0 90px; width: calc(100% / 2 - 4px); margin-left: 4px; flex-direction: column; }
.bnrbtnwrap { margin-left: -40px; line-height: 1}
.bnrbtnwrap a { margin-left: 40px; width: 200px; height: 50px; border-radius: 25px;}
.bnrbtnwrap a:after { right: 25px; top: calc(50% - 4px); width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.bnrbtnwrap a:hover:after { right: 20px; }
.bnrbtnwrap a p { margin-right: 15px;}
.bnrimg{ max-width: 300px; width: 80%; margin: 0 auto 60px; }
@media screen and (max-width: 1100px){
    .bnrbtnwrap { margin-left: -10px;}
    .bnrbtnwrap a { margin-left: 10px; width: 180px; height: 50px; border-radius: 25px;}
}    
@media screen and (max-width: 800px){
    .bnrul { margin-bottom: -2px;}
    .bnrul li { padding: 50px 0 45px; width: 100%; margin-bottom: 2px;}
    .bnrbtnwrap {}
    .bnrbtnwrap a { width: 140px; height: 40px; border-radius: 20px;}
    .bnrbtnwrap a:after { right: 15px; top: calc(50% - 3px); width: 6px; height: 6px; }
    .bnrbtnwrap a:hover:after { right: 10px; }
    .bnrbtnwrap a p { margin-right: 15px;}
    .bnrimg{ max-width: 260px; width: 70%; margin: 0 auto 40px; }
}



