@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
*      
 * SUMMARY:
 * 1) MAIN animation
 * 2) MAIN CONTENTS
*/

/* **************************************** *
 * Main animation set
 * **************************************** */
[data-txt-motion]{}
[data-txt-motion="hidden"]{overflow:hidden;}
[data-txt-motion="hidden"] > span{display:block; opacity:0;}

.swiper-slide-active [data-txt-motion="hidden"] > span{animation:text_hidden_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="left"]{animation:text_left_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="right"]{animation:text_right_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="up"]{animation:text_up_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="down"]{animation:text_down_motion 1.6s ease 0.1s forwards;}

@keyframes text_hidden_motion {
 from{opacity:0; transform:translateY(-70rem);}
 to{opacity:1; transform:translateY(0);}
}
@keyframes text_left_motion {
 from{opacity:0; transform:translateX(70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_right_motion {
 from{opacity:0; transform:translateX(-70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_up_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateX(0);}    
}
@keyframes text_down_motion {
 from{opacity:0; transform:translateY(-70rem);}
 to{opacity:1; transform:translateX(0);}
}

@media all and (max-width:540px){
	[data-ani="right"]{transform:translateY(30rem);}
	[data-ani="left"]{transform:translateY(30rem);}
}

/* **************************************** *
 * Site custom
 * **************************************** */
/* common */
.main-title {margin-bottom: 60rem; font-size: 60rem; font-weight: 700; color: var(--f-01); line-height: 1.4;}
.main-title span::after {content:''; display: inline-block; width:18rem; height: 18rem; margin: 0 15rem -5rem; border-radius: 3rem; border: 5rem solid var(--c-01);}
h3:has(.ic-more) {display: inline-flex; align-items: center;}

@media all and (max-width:1023px){
	.main-title {margin-bottom: 50rem; font-size: 55rem;}
}

@media all and (max-width:860px){
	.main-title {margin-bottom: 40rem; font-size: 47rem;}
}

@media all and (max-width:540px){
	.main-title {margin-bottom: 25rem; font-size: 27rem;}
	.main-title span::after {width: 11rem; height: 11rem; margin: 0 8rem -3rem; border-width: 3rem;}
}

/* main visual */
.main-visual{position: relative; height:var(--height-full);}
.main-visual > h3 {z-index: 1; position: absolute; left: 50rem; bottom: 100rem; width: 75%;}
.main-visual > h3 img {width: 100%;}
.main-visual__scroll {z-index: 1; position: absolute; right: 50rem; bottom: 100rem; width: 60rem; height: 60rem; background: url(../img/main/ic-scroll.svg) no-repeat center / contain;}
.main-visual__scroll span {opacity: .3; position: absolute; left:0; bottom: 0; font-weight: 700; font-size: 14rem; color: var(--f-01); white-space: nowrap; text-transform: uppercase; transform: translateX(-100%); animation:opacity_motion 1s linear infinite alternate;}

@keyframes opacity_motion {
	from{opacity:0.3;}
	to{opacity:1;}
}

.video-wrap video{object-fit: cover;position: absolute;top: 50%;left: 50%;width: 100vw;height: 100vh;transform: translate(-50%, -50%);}
.video-wrap iframe{object-fit: cover;position: absolute;top: 50%;left: 50%;width: 100vw;height: 100vh;transform: translate(-50%, -50%);}

.video-wrap::after{content:'';width: 100%;height: 100%;background: #000;opacity: 0.4;position: absolute;left: 0;top: 0;}

@media (min-aspect-ratio: 16/9) {
  .video-wrap video{height: 56.25vw;}
  .video-wrap iframe{height: 56.25vw;}
}
@media (max-aspect-ratio: 16/9) {
	.video-wrap video{width: 177.78vh;}
	.video-wrap iframe{width: 177.78vh;}
}

.main-visual-container,
.main-visual-wrapper,
.main-visual .swiper-slide{height:100% !important;}
.main-visual .swiper-slide::before{content:'';position:absolute;background-position:50% 50%;transition:all 1s ease;transform:scale(1);inset:0;background-repeat:no-repeat;background-size: cover;}
.main-visual .swiper-slide .wrap{width:100%;}
.main-visual__bg{position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual__bg i{display:block; height:100%; background-position:50% 50%; background-size: cover;}

.main-visual__btn{position:relative;width:30rem;height:30rem;cursor:pointer;display: flex;align-items: center;font-size: 16rem;color: #fff;font-weight: 600;}
.main-visual__btn::after{content:"";display:block;min-width: 30rem;height: 30rem;background:url(../img/common/arrow-basic_w.svg) no-repeat 50% 50%;background-size: 14rem;}
.main-visual__btn.button-prev{flex-direction: row-reverse;}
.main-visual__controls{position:absolute;bottom: 0;left:0;display: inline-flex; align-items: center; z-index:999;}
.main-visual__controls > div{display:flex;align-items:center;justify-content: center;}
.main-visual__count{display:flex; align-items:center; margin:0 15rem; font-weight: 700; font-size:16rem; color:var(--f-01);}
.main-visual__count i{display:flex; align-items:center; position:relative;}
.main-visual__btn.button-next::after{transform:rotate(-90deg);}
.main-visual__btn.button-prev::after{transform: rotate(90deg);}
.main-visual__btn i {display: none;}

.main-visual__text {position:absolute; top:23vh; width:100%; color:#fff;}
.main-visual__text h2{overflow:hidden; line-height:1.3; font-weight:700; font-size:60rem; letter-spacing:-0.5rem;}
.main-visual__text p{margin-top:17rem; font-weight:700; font-size:23rem;}
.main-visual__text .wrap-wide {padding-bottom: 70rem;}

.main-visual__bar{position: relative; width: 60rem; height: 2rem; margin: 0 15rem; background:rgba(255, 255, 255, .2)}
.main-visual__bar > i{position:absolute; width:0%; height:100%; background:var(--c-02);}
.main-visual .swiper-slide-active .main-visual__bar > i{width:100%; transition:all 5s ease;}

@media all and (max-width:1023px){
	.main-visual__text {top: 20vh;}
	.main-visual > h3 {left: 40rem; bottom: 70rem;}
	.main-visual__scroll {opacity: .3; bottom: 70rem; animation: opacity_motion .7s linear infinite alternate;}
	.main-visual__scroll span {display: none;}
}

@media all and (max-width:860px){
	.main-visual__text h2 {font-size: 50rem;}
	.main-visual__text .wrap-wide {padding-bottom: 60rem;}
	.main-visual__scroll {width: 45rem; height: 45rem;}
}

@media all and (max-width:540px){
	.main-visual__text{top:120rem;}
	.main-visual__text .wrap-wide {padding-bottom: 50rem;}
	.main-visual__text h2{ font-size:30rem;}
	.main-visual__count{margin:0 8rem; font-size:13rem;}
	.main-visual__bar {width: 50rem; margin: 0 10rem;}
	.main-visual__btn{font-size:14rem;}
	.main-visual__btn::after {background-size: 12rem;}

	.main-visual__scroll {display: none;}
	.main-visual > h3 {left: 0; bottom: 30rem; width: 100%; padding: 0 20rem;}
	.main-visual > h3 img {width: 100%;}
}

/* company */
.main-about {padding:220rem 0; background:#111;}
.about-list {gap:40rem}
.about-list__item a {overflow: hidden;position: relative;display: flex;flex-direction: column;justify-content: space-between;height: 500rem;padding: 60rem 50rem;color: var(--f-01);border-radius: 10rem;transition: var(--trans-01);}
.about-list__item a::before {position: absolute;left:0;top:0;content:'';width: 100%;height: 100%;background-repeat: no-repeat;background: #000;background-image: none !important;!I;!;opacity: 0.5;}
.about-list__item:nth-child(1) a::before {background-image: url(../img/main//about-img-01.png); background-size: 83%; background-position: right -86% bottom -40rem;}
.about-list__item:nth-child(2) a::before {background-image: url(../img/main//about-img-02.png); background-size: 78%; background-position: right -100% bottom -17rem;}
.about-list__item p {opacity: .6; position: relative; line-height: 1.6;}
.about-list__item h3 {position: relative; font-size: 42rem; font-weight: 700;}
.about-list__item a:hover {background:var(--c-02) url(../img/main/about-item-bg.png) no-repeat center / cover;}
.about-list__item a:hover p {opacity: 1;}
.about-list__item a:hover .ic-more::after {transform: rotate(-45deg);}
.about-list li{background-size:cover; background-position:50% 50%; border-radius:10rem;}
.about-list li:first-child{background-image:url(../img/sub/business-intro02.jpg);}
.about-list li:nth-child(2){background-image:url(../img/sub/business-intro01.jpg);}
.about-list__item a:hover::before{opacity:0;}

@media all and (max-width:1023px){
	.main-about {padding: 200rem 0;}
	.about-list {grid-template-columns: 1fr; gap: 10rem;}
	.about-list__item a {height: 400rem;}
	.about-list__item:nth-child(1) a::before {background-size: 65%; background-position: right -28% bottom -33rem;}
	.about-list__item:nth-child(2) a::before {background-size: 71%; background-position: right -49% bottom 21rem;}
}

@media all and (max-width:860px){
	.main-about {padding: 150rem 0;}
	.about-list__item a {height: 340rem; padding: 50rem 40rem;}
	.about-list__item h3 {font-size: 35rem;}
}

@media all and (max-width:540px){
	.main-about {padding: 80rem 0 90rem;}
	.about-list__item a {height: 250rem; padding: 30rem 20rem;}

	.about-list__item h3 {font-size: 24rem;}
	.about-list__item:nth-child(1) a::before {background-size: 85%; background-position: right -86% bottom -13rem;}
	.about-list__item:nth-child(2) a::before {}
}


/* main-bg */
.main-bg-wrap {background:linear-gradient(0deg, #111 0%, #22357A 50%, #111 100%);;}

/* product */
.main-product {margin-bottom: 300rem; padding-left: 50rem;}
.main-product .main-title {margin-right: 50rem;}
.main-product .swiper-slide {width: 420rem !important; background:transparent;}
.main-product .swiper-slide a {overflow: hidden;width: 100%;height: 500rem;
display: flex;flex-direction: column;justify-content: space-between;
padding: 50rem;text-align: center;color: var(--f-01);
font-weight: 700;font-size: 27rem;
text-transform: capitalize;border-radius: 10rem;background: linear-gradient(180deg, #22357A 0%, #2E4BB4 100%);}
.main-product .swiper-slide a::before {position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center;}
.product-slider__img {z-index: 1; display: flex; justify-content: center; align-items: center; height: 300rem; }
.product-slider__img img {width: auto; max-width: 100%; max-height: 100%;}
.product-slide__item-01 a::before {background-image: url(../img/main/product-bg-01.png);}
.product-slide__item-02 a::before {background-image: url(../img/main/product-bg-02.png);}
.product-slide__item-03 a::before {background-image: url(../img/main/product-bg-03.png);}
.product-slide__item-04 a::before {background-image: url(../img/main/product-bg-04.png);}
.product-slide__item-05 a::before {background-image: url(../img/main/product-bg-05.png);}
#cursor .cur_cir span {opacity:0; transition:opacity 0.3s .1s cubic-bezier(0.25, 1, 0.5, 1);}
#cursor.overlay .cur_cir {display: flex; align-items: center; justify-content: center; width: 130rem; height: 130rem; text-align: center;  background:var(--f-01);}
#cursor.overlay .cur_cir span {opacity:1; display: inline-flex; align-items: center; text-transform: uppercase; justify-content: space-between; width: 100%; font-size: 14rem; font-weight: 600; color: var(--b-01);}
#cursor.overlay .cur_cir span::after,
#cursor.overlay .cur_cir span::before {content:''; width: 12rem; height: 12rem; margin: 0 20rem; background: url(../img/layout/ic-arrow.svg) no-repeat center / contain;}
#cursor.overlay .cur_cir span::before {transform: scaleX(-1);}
#cursor.overlay .cur_cir::before {display: none;}

@media all and (max-width:1023px){
	.main-product {margin-bottom: 250rem; padding-left: 40rem;}
}

@media all and (max-width:860px){
	.main-product {margin-bottom: 220rem;}
	.main-product .swiper-slide {width: 350rem !important;}
	.main-product .swiper-slide a {height: 450rem; font-size: 24rem;}
}

@media all and (max-width:540px){
	.main-product {margin-bottom: 100rem; padding-left: 20rem;}
	.main-product .swiper-slide {width: 250rem !important;}
	.main-product .swiper-slide a {height: 300rem; padding: 30rem; font-size: 18rem;}
	.product-slider__img {height: 250rem;}

	#cursor.overlay .cur_cir {width: 100rem; height: 100rem;}
	#cursor.overlay .cur_cir span {font-size: 12rem;}
	#cursor.overlay .cur_cir span::after,
	#cursor.overlay .cur_cir span::before {width: 8rem; height: 8rem; margin: 0 10rem;}
}

/* partner */
.main-banner {height: var(--height-full);}
.main-banner__inr {gap: 0; height: 100%;}
.banner-img {overflow: hidden; opacity: 1; position: relative;}
.banner-img i { position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: url(../img/main/partner-img.jpg) no-repeat center / cover; transform: scale(1.1); transition: 1s .1s ease-in;;}
.banner-img.is_moved i {transform: scale(1);}
.banner-con {display: flex; flex-direction: column; padding: 100rem; background: #080B1E;} 
.banner-con p {opacity: .6; margin-top: auto; color: var(--f-01);}
.banner-con ul {display: inline-flex; align-items: center; margin-top: 40rem;}
.banner-con ul li {margin-right: 8rem;}
.banner-con ul a {display: block; width: 230rem; line-height: 80rem; font-weight: 600; color: var(--f-01); text-align: center; border-radius: 10rem; background: var(--c-01); transition: var(--trans-01);}
.banner-con ul a:hover {font-weight: 700; color: var(--c-01); background: var(--f-01);}

@media all and (max-width:1023px){
	.main-banner__inr {grid-template-columns: 1fr;}
	.banner-img {display: none;}
	.banner-con {background: url(../img/main/partner-img.jpg) no-repeat center / cover;}
	.banner-con::before {mix-blend-mode: multiply; opacity: .7; position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: #080B1E;}
	.banner-con > * {position: relative; text-align: center;}
	.banner-con ul {justify-content: center;}
}

@media all and (max-width:540px){
	.pin-spacer {width: 100% !important;}
	.main-banner {width: 100% !important; max-width: none !important;}
	.main-banner__inr {display: flex; flex-direction: column; justify-content: center; align-content: center; height: 100%;}
	.banner-con {height: 100%; padding: 60rem 20rem 50rem;}
	.banner-con ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 10rem;}
	.banner-con ul li {margin: 0;}
	.banner-con ul a {width: auto; line-height: 55rem; border-radius: 5rem;}
}

/* board */
.main-board {padding: 200rem 0 240rem;}
.main-board .main-title {text-align: center;}
.main-board .empty_li {padding:120rem 0; text-align: center; font-weight: 600; color:rgba(255, 255, 255, .5); border-bottom: none; border-top: 1px solid rgba(255, 255, 255, .1);}
.main-board .gallery-list__title strong {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.main-board .gallery-list__img {position: relative;}
.main-board .gallery-list__img:not(:has(img)) {background: rgba(255, 255, 255, .1);}
.main-board .gallery-list__img:not(:has(img))::after {opacity: .1; position: absolute; left:50%; top: 50%; content:''; width: 221rem; height: 60rem; background:url(../img/layout/logo_w.svg) no-repeat center / contain; transform: translate(-50%, -50%);}

@media all and (max-width:1023px){
	.main-board {padding: 150rem 0 180rem;}
	.main-board .gallery-list__img {min-width: auto; width: 100%; height: 220rem;}
	.main-board .gallery-list__title {margin-top: 22rem;}
	.main-board .gallery-list__title strong {font-size: 20rem;}
	.main-board .gallery-list__img:not(:has(img))::after {width: 200rem; height: 40rem;}
	.gallery-list__title i {margin-top: 40rem; font-size: 16rem;}
}

@media all and (max-width:540px){
	.main-board {padding: 80rem 0 100rem;}
	.main-board .gallery-list__title {margin-top: 15rem;}
	.main-board .gallery-list__title strong {font-size: 14rem;}
	.gallery-list__title i {margin-top: 20rem; font-size: 12rem;}
}