@charset "utf-8";

.mobile_only {display:none}


img{max-width:100%}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:250px}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{position:relative;width:300px;height:auto;border-radius:0;text-align:left;opacity:1;background:transparent;margin:0 12px}
.swiper-pagination-bullet .num{display:block;opacity:0.5;transition:opacity 0.6s;font-family:'Roboto';font-size:1.5em;font-weight:900;color:#ccc}
.swiper-pagination-bullet .progress{position:relative;display:block;height:7px;background:rgba(255,255,255,0.6)}
.swiper-pagination-bullet .progress>span{position:absolute;display:block;width:0%;height:7px;background:#fff;left: 0; overflow: hidden;}
.swiper-pagination-bullet-active .num{opacity:1;color:#fff}
.swiper-pagination-bullet-active .progress>span{width: 100%; animation: fullWidth 5s ease-in-out;}
.swiper-pagination-bullet.swiper-pagination-bullet-active:nth-child(3) .num{color:#fff}
.swiper-pagination-bullet:nth-child(3) .progress>span{background:#fff}

@keyframes fullWidth {
    from { width: 0%; }
    to { width: 100%; }
}

.section {width: 100%; height: 100%;}
section{margin:0 auto;padding-top:30px}
section#company{padding-top:78px}
.swiper {width: 100%; height: 100%;}
.swiper .swiper-slide .bg {width: 100%; height: 100%; position:relative;}
.swiper .swiper-slide .bg:after{content:""; width:100%; height:100%; position:absolute; top:0; left:0; background:#000; opacity:0.35;}
.swiper-slide>.bg{background-position:50% 0;background-repeat:no-repeat;background-size:cover;-webkit-transform:scale(1.4);-o-transform:scale(1.4);transform:scale(1.4)}
.swiper-slide.swiper-slide-active>.bg{-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:5s all ease-in-out;-o-transition:5s all ease-in-out;transition:5s all ease-in-out}
.swiper-slide.swiper-slide-active>.bg.first{-webkit-transition:4s all ease-in-out;-o-transition:4s all ease-in-out;transition:4s all ease-in-out}
.swiper-slide>.bg.noscale{-webkit-transform:scale(1) !important;-o-transform:scale(1) !important;transform:scale(1) !important;-webkit-transition:3s all ease-in-out;-o-transition:3s all ease-in-out;transition:3s all ease-in-out}
.swiper-slide .textWrap{position:absolute;z-index:10;top:40%;left:50%;width:69%;transform:translate(-50%, -50%);letter-spacing:-0.05em; color:#fff;}
.swiper-slide .textWrap>h2{margin-bottom:0.2em;font-size:4.2em;font-weight:100;line-height:1.3;font-family: 'BusanBada'; text-shadow: 3px 3px 8px rgba(0,0,5, .2);}
.swiper-slide .textWrap>h2>strong{display:block;font-weight:900;color: #fff;  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);}
.swiper-slide .textWrap>p{font-size:2.45em;line-height:1.6; text-shadow: 3px 3px 8px rgba(0,0,5, .5);}
.swiper-slide .textWrap.dark {color:#fff}
.swiper-slide .textWrap .line {display: flex; align-items: flex-start;}
.swiper-slide .textWrap h3 {margin-bottom: 1em;    margin-right: 0.5em;    font-size: 3.6em;    font-weight: 100;    line-height: 1;    font-family: 'BusanBada';    text-shadow: 3px 3px 8px rgba(0, 0, 5, .2);}
.swiper-slide .textWrap h3 strong{display:block;font-weight:900;color: #fff;  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);}
.swiper-slide .textWrap .line p {font-size: 2.45em;    line-height: 1;   transform: translateY(-0.2em);}
.swiper-slide .textWrap .line:last-child h3 {margin-bottom: 0; }



#fullpage_nav {position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 5;}
#fullpage_nav li {position: relative;}
#fullpage_nav li.active::after {content: ''; width: 26px; height: 26px; border: 1px solid #fff; background: transparent; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#fullpage_nav li.dark::after {border: 1px solid #000;}
#fullpage_nav li + li {margin-top: 30px;}
#fullpage_nav li a {font-size: 0;}
#fullpage_nav li a span {width: 8px; height: 8px; background: #fff; border-radius: 50%; display: block; position: relative;}
/* #fullpage .section .inner_container {padding: 0;} */

.section h2.main_title {padding-top:200px;font-size:3.2em;font-weight:800;text-align:center;font-family: 'BusanBada';line-height: .5;}
.section p.main_info {padding-top:12px;text-align:center;font-size:1.4em}
.section div.inner_container{margin:50px auto 0;width:1320px;max-width:90%}
.section>div {display: block;}
.section .swiper{margin:0 auto;width:100%;max-width:100%;overflow:hidden}
.section#business div.inner_container {margin:0 auto 0;}
section#business ul{margin:0 auto;width:100%; display: flex; flex-wrap: wrap;  justify-content: center; align-items: center;}
section#business ul:after{content:'';display:block;clear:both}
section#business ul>li{position:relative;float:left;width:33.333%; height: 360px;overflow: hidden;}
section#business ul>li h3{position:absolute;top: 50%; left: 50%;  transform: translate(-50%, -55%); font-size:2em;font-weight:200;color:#fff;line-height:1.3;letter-spacing:-0.05em;transition: all 0.25s; text-align: center; width: 100%;    display: flex;   flex-direction: column;   justify-content: center;   align-items: center;gap: 40px;}
section#business ul>li h3>strong{font-weight:500;font-family: 'BusanBada';line-height: .6;}
section#business ul>li .hover{position:absolute;bottom:0;right:0;background:rgb(196 196 196 / 70%); display:inline-block;width:70px;height:70px;text-align:center; transition: all 0.25s;}
section#business ul>li .hover:after{content:'+';font-family:'Roboto';font-size:3.4em;font-weight:100;color:#fff;line-height:1.3}
section#business ul>li:hover .hover {width:100%;height:100%;background:rgb(255 255 255 / 90%);color:rgba(218,32,39,.5)}
section#business ul>li:hover .hover:after {display:none}
section#business ul>li:hover h3 {color: #222;}
section#business ul>li .bg img {width: 100%; height: 100%; object-fit: cover;}
section#business ul>li:hover .hover>button{background:#da2027}
section#business .flex_box {display: flex;  justify-content: center;  align-items: center; height: 100%; padding-bottom: 0;}
section#business .inner_container {height: 100%;}
section#business ul>li .bg {position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;}
section#business ul>li .bg:after {content:""; width:100%; height:100%; position:absolute; top:0; left:0; background:#000; opacity:0.55;}
section#business ul>li .ico img {max-height: 150px;filter: grayscale(1) invert(1) brightness(5);transition: all 0.15s;}
section#business ul>li:hover .ico img { filter:grayscale(0) invert(0) brightness(1);}

section#business ul>li h3.renew {top: 70%;gap: 10px;font-size: 1.8em;}
section#business ul>li h3.renew b {font-family: 'BusanBada'; font-weight: 500;}
section#business ul>li h2 {position: absolute;   left: 20px;  top: 20px;  color: #fff;  font-size: 4em;  line-height: 1em;}
section#business ul>li h2 span {display: block;    font-size: 0.4em;  letter-spacing: 0; line-height: 1em;}
section#business ul>li:hover h2 {color: #000;}





section#promote{background: url('../img/images/promoteBg.png') no-repeat; background-size: cover;}
section#promote .box{position:relative;z-index:100;display:block;padding-top:100px;width:100%;height:300px;margin:0 auto;box-sizing:content-box;background:transparent;overflow:hidden}
section#promote .box>.border{position:absolute;opacity:0;top:-50%;left:-50%;z-index:-9;height:200%;width:200%;transform:rotate(-45deg);overflow:hidden;background:linear-gradient(to right, #fff 20%, #fff 40%, #873fd4, #d43fb1, #d44043, #fff 70%, #fff 100%);background-size:200% auto}
section#promote .box:hover{margin-top:-25px}
section#promote .box:hover>.border{opacity:1;-webkit-animation:shine .6s ease-in 1 forwards;-moz-animation:shine .6s ease-in 1 forwards;-ms-animation:shine .6s ease-in 1 forwards;-o-animation:shine .6s ease-in 1 forwards;animation:shine .6s ease-in 1 forwards}
section#promote .box>.mainElement{position:absolute;z-index:1;top:2%;left:3%;display:block;height:96%;width:94%;margin:auto;align-self:center;background:#fff;box-sizing:border-box;padding:65px 0 0;text-align:center}
section#promote .textWrap{margin:30px auto 0;padding-top:35px;width:74%;border-top:thin solid #dfdfdf}
section#promote .textWrap>h3{font-size:2.5em;font-weight:700;letter-spacing:-0.05em}
section#promote .textWrap>p{margin-top:20px;font-size:1.05em;color:#999}
section#promote h2.main_title, section#promote p.main_info {color: #fff;}
section#promote .slick-prev, section#promote .slick-next {top: -30px; width: 50px; height: 50px; border: 1px solid #fff; border-radius: 50%; transition: all .3s ease;}
section#promote .slick-prev:hover, section#promote .slick-next:hover {background: var(--key-color); border: 1px solid var(--key-color);}
section#promote .slick-prev {left: auto; right: 75px;}
section#promote .slick-next {right: 10px;}
section#promote .slick-prev::before {font-size: 0; background: url(../img/images/arrow_left.png) no-repeat; background-size: cover; width: 13px; height: 21px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: block; opacity: 1;}
section#promote .slick-next::before {font-size: 0; background: url(../img/images/arrow_left.png) no-repeat; background-size: cover; width: 13px; height: 21px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(180deg); display: block; opacity: 1;}

section#recruit ul{margin:0 auto;width:100%; display:flex; justify-content: center;}
section#recruit ul:after{content:'';display:block;clear:both}
section#recruit ul>li{position:relative;float:left;width:50%;text-align:center; max-height: 450px;}
section#recruit ul>li:before{content:'';position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;height:100%;background:rgba(0,0,0,.4);-webkit-transition:.3s all ease;-o-transition:.3s all ease;transition:.3s all ease}
/*section#recruit ul>li:hover:before{width:100%;height:100%;transform:translate(-50%, -50%)}*/
section#recruit ul>li img {width: 100%;height: 100%;    object-fit: cover;   display: block;}
section#recruit ul>li h3{font-size:1.9em;font-weight:500;line-height:1;letter-spacing:-0.05em;font-family: 'BusanBada';}
section#recruit ul>li p{margin-top:15px;font-size:1.1em;font-weight:300;color:#eee}
section#recruit ul>li>a{position:absolute;z-index:3;display:inline-block;min-width:70%;top:50%;left:50%;transform:translate(-50%, -50%);color:#fff}
section#recruit ul>li>a>button{margin-top:42px;background:transparent;border:thin solid #fff;padding:7px 20px 9px;font-family:'Roboto';font-size:3.4em;font-weight:100;color:#fff;line-height:1}
section#recruit ul>li:hover>a>button, section#recruit ul>li>a:hover>button{border:thin solid var(--key-color);background:var(--key-color)}
section#footer{margin:0 auto;width:100%;height:auto;min-height:0;padding:0;background:#23292d;font-size:.95em;font-weight:200;color:#ddd}
section#footer>div>div{position:relative; margin:0 auto;padding:0 0 50px}
section#footer .quick{margin-bottom:25px;padding:34px 0 18px;border-bottom:thin solid #777}
section#footer .quick>a{position:relative;display:inline-block;margin-left:23px;padding:10px 0;font-weight:300;color:#eee}
section#footer .quick>a:before{content:'|';position:absolute;top:13px;left:-14px;font-size:.5em}
section#footer .quick>a:first-child{margin:0}
section#footer .quick>a:first-child:before{content:''}
section#footer .copy{position:relative; padding-top: 50px;}
section#footer .copy button{position:absolute;top:4px;right:0;background:transparent;border:1px solid #bbb;border-radius:30px;padding:13px 26px;font-size:.93em;color:#bbb}
section#footer .copy button:hover{background:#5a5c6e}
section#footer .copy .copyright{position:absolute;top:50px;right:0}
section#footer .copy p {margin-bottom: 0.5em;}
section#footer .copy p .ft_bar {display: inline-block;  font-size: 0.7em;  margin: 0 1em;  transform: translateY(-0.2em); opacity: 0.7;}
section#footer .copy p a {color: inherit;  cursor: default;}



.pageDown{position:fixed;;z-index:110;bottom:42px;left:50%;transform:translateX(-50%)}
.pageDown>button{background:transparent;border:0;font-size:.95em;font-weight:700;letter-spacing:-0.05em;color: #fff;}
.pageDown>button>i{display:block;margin-top:10px;font-size:1.5em}
.pageDown>button.dark{color:#fff}
body.fp-viewing-Page4 .pageDown {opacity: 0;}

@-moz-keyframes shine {
    99.9%{background-position:200% center}
    100%{background:#da2027}
}
@-ms-keyframes shine {
    99.9%{background-position:200% center}
    100%{background:#da2027}
}
@-o-keyframes shine {
    99.9%{background-position:200% center}
    100%{background:#da2027}
}
@-webkit-keyframes shine {
    99.9%{background-position:200% center}
    100%{background:#da2027}
}
@keyframes shine {
    99.9%{background-position:200% center}
    100%{background:#da2027}
}

@media only screen and (max-width:1920px) {
	section#business ul>li {height: 300px;}
}

@media only screen and (max-width:1500px){
    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:150px}
    .swiper-slide>.bg{background-position:50% 80%}
    .pageDown{bottom:15px}
    .section div.inner_container{margin:30px auto 0}
    .section h2.main_title{padding-top:150px;font-size:2.4em}
    section#business ul>li h3{font-size:1.8em}
    .section div.inner_container{width:68%}
}

@media only screen and (max-width:1400px){
    .row .col{padding:0 .75rem}
    .col .row{margin-left:-0.75rem;margin-right:-0.75rem}
    section#footer .copy .copyright{position:relative;margin-top:15px}
	section#business ul>li {height: 360px;}
}

@media only screen and (max-width:1050px) {
	section#business ul>li {height: 260px;}
}

@media only screen and (max-width:991px){
	section#business ul>li{float:none;width:100%;margin-bottom:10px}
	section#recruit ul{display:unset;}
	section#recruit ul>li{margin-bottom:10px;width:100%}
}

@media only screen and (max-width:980px) {
	section{padding-bottom:60px}
	.section, #recruit.section, #business.section .fp-tableCell {height: auto !important;}
	#recruit.section h2.main_title {/* padding-top: 0; */ font-size: 2.5em;}
	
	.swiper-slide .textWrap h3 {font-size: 3.6em;}
	.swiper-slide .textWrap .line p {font-size: 1.6em;}
}

@media only screen and (max-width:768px){
    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:130px}
    .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{width:25%}
    .swiper-pagination-bullet .num{font-size:2.4em}
    .swiper-slide>.bg{background-position:55% 70%}
    .swiper-slide .textWrap{top:20%;left:50px;width:auto;transform:translate(0, 0)}
    .swiper-slide .textWrap>h2{margin-bottom:20px}
    
    .section h2.main_title{padding-top:80px}
    section#company{padding-top:76px;padding-bottom:0}
    section#business ul{width:90%}
    section#promote>p{margin:0 auto;width:70%}
/*     section#promote div.inner_container{width:65%} */
    section#promote .box{margin-bottom:23px;height:260px}
    section#promote .box:hover{margin-top:0}
    section#promote .box>.mainElement{padding-top:50px}
    section#promote .textWrap{margin:20px auto 0;padding-top:25px;width:80%}
    .section div.inner_container{width:90%}
    section#recruit ul>li>a{width:90%}
    section#recruit ul>li:before{width:100% !important;height:100% !important;transform:translate(-50%, -50%)}
    section#recruit ul>li p{min-height:90px;font-size:1.05em}
    section#recruit ul>li>a>button{margin-top:0;padding:3px 16px 5px;font-size:3em}
    #fullpage_nav, .pageDown{display:none}
	/* footer {display: none;} */
	
/* 	.fp-section.fp-table, .fp-slide.fp-table, .fp-tableCell {height: auto !important;} */
}

@media only screen and (max-width:600px){
    .swiper-slide>.bg{height:700px;background-position:55% 50%}
    .swiper-slide .textWrap{font-size:.8em}
    section#business ul{width:100%}
    section#business ul>li h3{/*top:25px;left:30px;font-size:1.7em */}
    section#business ul>li>a{width:60px;height:60px}
    section#promote div.inner_container{width:90%}
    section#promote>p{width:80%}
    section#recruit ul{width:82%}
    section#recruit ul>li:last-child{width:100%}
    section#footer .copy>p{padding:5px 0}
	section#business ul>li {height: 240px;}
    section#business ul>li .ico img { max-height: 100px;}
    section#business ul>li h3 {  font-size: 1.5em; }
    section#business {padding-bottom: 0;}

	section#promote .slick-prev, section#promote .slick-next {width: 45px; height: 45px;}
	section#promote .slick-prev::before, section#promote .slick-next::before {width: 10px; height: 16px;}
	section#promote .slick-prev, section#promote .slick-next {top: -40px; transform: translateX(-50%);}
	section#promote .slick-next {right: 27%;}
	section#promote .slick-prev {right: 45%;}





}

@media only screen and (max-width:480px){
    .section .swiper {height: 30vh;position: relative;}
		.swiper-slide .textWrap { left: 30px;}
    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {   bottom: 20px; }
    .swiper-pagination-bullet .progress, .swiper-pagination-bullet .progress>span {height: 5px;}
		.swiper-slide .textWrap h3 {    font-size: 2.6em;  } 
		.swiper-slide .textWrap .line p {   font-size: 1.5em;  }
		
		
    section#business ul {display: flex; flex-wrap: wrap; gap:15px}
    section#business ul li {width: calc((100% - 15px) / 2);   margin-bottom: 0;  height: 150px;}
    section#business ul>li .ico img {  max-height: 60px; }
    section#business ul>li h3 {gap: 25px}
    section#business ul>li .hover {width: 30px; height: 30px;}
    section#business ul>li .hover:after {font-size: 2em;}

    section#recruit ul {display: flex; flex-wrap: wrap; gap:15px}
    section#recruit ul li, section#recruit ul>li:last-child {width: calc((100% - 15px) / 2);   margin-bottom: 0; }
    section#recruit ul:after {display: none;}
    section#recruit ul>li h3 { font-size: 1.5em; }
    section#recruit ul>li>a>button {  margin-top: 0; padding: 2px 8px 3px; font-size: 1.6em;}

    .section h2.main_title {  padding-top: 40px; }

    section#footer {display: none;}

    section#business ul>li h2 {  left: 15px;   top: 15px; font-size: 2.5em;}
    section#business ul>li h3.renew {  gap: 0;  font-size: 1.3em; font-weight: 400; }
		
	
 
}


@media only screen and (max-width:430px){
    .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 8px}
    .swiper-pagination-bullet .num{font-size:1.2em}
    .swiper-slide>.bg{height:600px;background-position:65% 40%}
    .swiper-slide>.bg:after{content:'';position:absolute;z-index:5;width:100%;height:100%;background:rgba(0,0,0,.2)}
    /*.swiper-slide .textWrap{top:160px;left:20px;color:#fff} */
    .swiper-slide .textWrap>h2{margin-bottom:10px; font-size: 2.6em;}
    .swiper-slide .textWrap>p{font-size:1.7em}

    /*.section div.inner_container{max-width:80%} */
    .section p.main_info{margin:0 auto;width:90%;font-size:1.3em;letter-spacing:-0.05em}
    section#company{padding-top:71px}
    .section div.inner_container{width:90%}
    section#business ul>li h3{font-size:1.5em}
    section#business ul>li>a{width:50px;height:50px}
    section#business ul>li>a:after{font-size:3em}
    section#promote .box{padding-top:50px;height:200px}
    section#promote .box>.mainElement{padding-top:30px}
    section#promote .box>.mainElement>img{width:60%}
    section#promote>p{width:90%}
    section#promote .textWrap>h3{font-size:2em}
    section#recruit ul{width:100%}
    /*section#recruit ul>li h3{font-size:2.1em}*/
    section#recruit ul>li p{font-size:1.3em}
}

@media only screen and (max-width:376px){
    section#promote .box{height:170px}
    section#promote .box>.mainElement>img{width:50%}
    section#promote .textWrap>h3{font-size:1.8em}
    section#recruit ul{width:100%}
    section#recruit ul>li p{font-size:1.4em}
    section#footer>div{max-width:90%}
}

@media only screen and (max-width:320px){
    .swiper-slide>div{height:500px;background-position:65% 45%}
    .swiper-slide .textWrap{left:30px}
    .swiper-slide .textWrap>h2{font-size:3em}
    .swiper-slide .textWrap>p{font-size:1.5em}
    .section div.inner_container{max-width:90%}
    section#promote .box>img{width:70%}
    section#promote .textWrap>h3{font-size:1.8em}
    section#recruit ul>li p{font-size:1.3em}
    section#footer .quick>a{margin-left:15px;font-size:.9em}
    section#footer .quick>a:before{top:11px;left:-10px}
}