@charset "utf-8";
/* ===================================================== */
/* MAIN-COMMON */
.body-main #skip-nav::before {content: ''; position: fixed; inset: 0; pointer-events: none; background-color: #000; z-index: 9999; animation: fade-out .8s ease-in .2s both;}


.color-b {color:#222 !important;}
.color-g {color:#666 !important;}
.color-1 {color:var(--color-main) !important;}
.color-2 {color:#2865b5 !important;}





.body-main .section {overflow: hidden; word-break: break-all;}



@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1280px){
}
@media (max-width: 1024px){
}
@media (max-width: 768px){
}
@media (max-width: 576px){
}
@media (max-width: 480px){
}
/* MAIN-COMMON */
/* ===================================================== */





/*Quick*/
.body-main .quick {bottom:12rem;}
.body-main.is-fix .quick {bottom:4rem;}
.body-main .quick.is-hold {bottom:calc(100% + 4rem); }


@media (max-width: 640px){
	.body-main .quick {bottom:4rem;}
	.body-main .quick.is-hold {bottom:calc(100% + 4rem); }
}


/* ===================================================== */
/* MAIN-VISUAL : S */

.mainvisual {position: relative; --visual-padding:20rem;}
.mainvisual-wrap {overflow: hidden; transition:all 0.5s linear 0.5s; position: relative;}

.mainvisual-slide {height:100vh; height: calc(var(--vh, 1vh) * 100 ); min-height: 70rem; max-height:96rem; background-color: #000; position: relative; transition: height 0.3s ease-in-out;}

.mainvisual-slide .slide-list {height: 100%;}
.mainvisual-slide .item {position: relative; height:100%; overflow: hidden; display: flex; align-items: flex-end;}
.mainvisual-slide .item .bg {height:100%; width:100%; position: absolute; z-index: -1;}
.mainvisual-slide .item .bg::after {content:''; display: block; width:100%; height:100%; position: absolute; top:0; left:0; background-color: rgba(0, 0, 0, 0.2); z-index: 2;}
.mainvisual-slide .item .bg span{display: block; width: 100%;height: 100%; background:no-repeat 80% center/cover; transform: scale(1); transition: all 10s linear;}
.mainvisual-slide .item.is-active .bg span {transform: scale(1.2);}

.mainvisual-slide .item.nth-1 .bg span {background-image: url('../images/main/visual_bg01.jpg');}
.mainvisual-slide .item.nth-2 .bg span {background-image: url('../images/main/visual_bg02.jpg');}
.mainvisual-slide .item.nth-3 .bg span {background-image: url('../images/main/visual_bg03.jpg');}
.main__visual-video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.mainvisual-slide .swiper-slide .bg.vod {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
	transition: all 10s ease-in-out;
	
}



.mainvisual-slide .copy-box {margin:0 var(--inner-padding); color:#fff;  padding-bottom:var(--visual-padding);}
.mainvisual-slide .copy-box h3 {font-family: var(--font-mont);border-bottom:1px solid rgba(255, 255, 255, 0.15); padding-bottom:1rem;}
.mainvisual-slide .copy-box h3 span {display: inline-block; width: 100%;}
.mainvisual-slide .copy-box h3 .nth-1{font-size:2.9rem; font-weight: 600;}
.mainvisual-slide .copy-box h3 .nth-2{font-size:8rem; font-weight:400;}
.mainvisual-slide .copy-box h3 .nth-2 img {height:5.8rem;}
.mainvisual-slide .copy-box p {margin-top:2.5rem; display: inline-flex; font-size:max(2rem, 1.8px); font-weight: 900; }

.mainvisual-slide .item.is-active .copy-box h3 {animation: clip-right 1s ease-in-out 1s both ;}
.mainvisual-slide .item.is-active .copy-box p {animation: fade-up 1s ease-in-out 1.2s both ;}



.mainvisual-slide .slide-control {position: absolute; z-index: 1; bottom:calc(var(--visual-padding) - 4rem); left:var(--inner-padding); width:calc(100% - var(--inner-padding) *2 ); max-width: 50rem; opacity: 0;transform:translateY(100%); }

.mainvisual-wrap.is-active .mainvisual-slide .slide-control {opacity: 1; transition: opacity 0.5s ease-in-out 1s;}

.slide-control-wrap {display: flex; width:100%; gap:3rem; align-items: center;}

.slide-control-wrap .btn-wrap {display: flex; align-items: center; gap:1rem;}
.slide-control-wrap .slide-btn {font-size:0; width:5.4rem; height:5.4rem; overflow: hidden; cursor:pointer; text-align: center; flex-shrink: 0; transition: all 0.5s ease-in-out; border-radius: 50%; border:1px solid rgba(255, 255, 255, 0.3);}
.slide-control-wrap .slide-btn span {display: inline-block; width:16.7%; height:100%; background:url('../images/main/ico_arrow01.png') no-repeat center/contain; transition: all 0.3s ease-in-out;}
.slide-control-wrap .slide-btn.next {transform: rotate(180deg);}
.slide-control-wrap .slide-btn:hover {background-color: var(--color-main); border-color:var(--color-main)}
.slide-control-wrap .slide-btn:hover span {transform: translateX(-3px);}


.slide-control-wrap .play {position: relative; top:0%; left:0%; z-index: 2; display: flex; align-items: center; justify-content: center; width:5rem; height:100%; cursor: pointer; font-size: 0; text-indent: -99999px; overflow: hidden;}

.slide-control-wrap .play span {display: inline-block; width: 0; height: 0; transition: all 0.5s ease-in-out; border: solid transparent; border-width: 7px 0 7px 12px; margin-left:1px;}
.slide-control-wrap .play span::before,
.slide-control-wrap .play span::after {content:''; display: block; width:1px; height:18px; position: absolute; top:50%; left:50%;  transition: all 0.5s ease-in-out; background-color: #fff;}
.slide-control-wrap .play span::before {transform: translate(-0.5rem, -50%);}
.slide-control-wrap .play span::after {transform: translate(0.3rem, -50%);}

.slide-control-wrap .play.on span { border-color: transparent transparent transparent #fff;}

.slide-control-wrap .play.on span::before,
.slide-control-wrap .play.on span::after {background-color: transparent; transform: translate(-50%, -50%);}






@media (max-width: 1440px){
	.mainvisual-slide .copy-box {margin:0 calc(var(--inner-padding) * 2);}
	.mainvisual-slide .slide-control {left:calc(var(--inner-padding) * 2);}
}


@media (max-width: 1280px){
	
}


@media (max-width: 1024px){
	.mainvisual-slide .copy-box h3 .nth-1{font-size:max(2rem, 17px);}
	.mainvisual-slide .copy-box h3 .nth-2{font-size:6rem;}
	.mainvisual-slide .copy-box h3 .nth-2 img {height:4.8rem;}
}

@media (max-width: 480px){
	.mainvisual-slide .copy-box {text-align: center;}
}




/* 스크롤 다운 */
.visual-scroll { display: flex; flex-direction: column; align-items: center; width:6rem; position: absolute; right: var(--outer-padding); bottom: 0; transition: .3s; z-index: 1;} 
.visual-scroll-line { overflow: hidden; position: relative; width: 1px; height:10rem; background-color: var(--color-white-a2); } 
.visual-scroll-line::before { position: absolute; top: 0; left: 0; width: 100%; height: 50%; background-color: #fff; content: ''; animation: scroll-line 2.5s linear infinite; } 
@keyframes scroll-line { 
  0% { transform: translateY(-110%); } 
  10% { transform: translateY(-60%); } 
  60% { transform: translateY(160%); } 
  70% { transform: translateY(210%); } 
  100% { transform: translateY(210%); } 
}



.scroll-btn {position: absolute; top:0; left:0; width:100%; height:100%; z-index: 1; opacity: 0;}
.scroll-btn a {display: block; height:100%; font-size:0; text-indent: -8888px; }

@media (max-width: 640px){
	.visual-scroll {width:1rem; right:50%;}
}

/*.is-fix .mainvisual-wrap.is-active {margin:0; border-radius: 0;}*/


/* MAIN-VISUAL : E */
/* ===================================================== */








/* ===================================================== */
/* SECTION 2 : S */

/*사업안내*/
.main__business {--busiTab-height:37rem;}
.main__business .slide-con {height:100vh; height: calc(var(--vh, 1vh) * 100 ); min-height: 70rem; max-height:96rem; position: relative; transition: height 0.3s ease-in-out;}

.main__business .slide-con .slide-list {height: 100%;}

.main__business .slide-con .item {position: relative; height:100%; overflow: hidden; display: flex; align-items: flex-end;pointer-events: none; }
.main__business .slide-con .item.is-active {pointer-events: auto;}

.main__business .slide-con .item .bg {height:100%; width:100%; position: absolute; z-index: -1;}

.main__business .slide-con .item .bg span{display: block; width: 100%;height: 100%; background:no-repeat 70% center/cover; transform: scale(1); transition: all 10s linear;}
.main__business .slide-con .item.is-active .bg span {transform: scale(1.2);}

.main__business .slide-con .item.nth-1 .bg span {background-image: url('../images/main/section02_bg01.png');}
.main__business .slide-con .item.nth-2 .bg span {background-image: url('../images/main/section02_bg02.png'); background-position: 60% 50%; }
.main__business .slide-con .item.nth-3 .bg span {background-image: url('../images/main/section02_bg03.png'); background-position: 50% 50%; }
.main__business .slide-con .item.nth-4 .bg span {background-image: url('../images/main/section02_bg04.png'); background-position: 50% 50%; }




.main__business .slide-con .item-box {margin:0 var(--inner-padding); padding-bottom:calc(var(--busiTab-height) + 2rem);}
.main__business .slide-con .item-box .tit {font-size:3.5rem; color:var(--color-main); font-weight: 800;}
.main__business .slide-con .item-box .stit {font-size:9rem; color:#fff; font-weight: 800;}
.main__business .slide-con .item-box .txt {font-size:max(1.8rem, 16px); color:#fff; font-weight: 700; line-height:1.5; margin-top:1rem;}

.main__business .slide-con .item.is-active .item-box .stit {animation: clip-right 1s ease-in-out 1s both ;}
.main__business .slide-con .item.is-active .item-box .txt {animation: fade-up 1s ease-in-out 1.2s both ;}




.main__business .slide-con .item-box .link {width:15rem; height:4rem; position: relative; font-size: 0; text-indent: -99999px; margin-top:4rem;}
.main__business .slide-con .item-box .link span {display: block; width:100%; height: 100%;  background:url('../images/main/section02_arrow01.svg') no-repeat right center / contain;}
.main__business .slide-con .item-box .link::before,
.main__business .slide-con .item-box .link::after {content:''; display: block; width:4rem; height:4rem; background-color: var(--color-main); position: absolute; border-radius: 50%; transition: all 0.5s ease-in-out; z-index: -1;}

.main__business .slide-con .item-box .link::before {right:0; top:0; transform: translate(1.2rem, 0);}
.main__business .slide-con .item-box .link::after {right:100%; top:0; opacity: 0;}

.main__business .slide-con .item.is-active .item-box .link {animation: fade-right 1s ease-in-out 1.5s both ;}

.main__business .slide-con .item-box .link:hover::before {right:-10%; opacity: 0;}
.main__business .slide-con .item-box .link:hover::after {right:0; opacity: 1; transform: translate(1.2rem, 0);}




.main__business .slide-tab {position: absolute; left:var(--inner-padding); bottom:0; width:calc(100% - var(--inner-padding) * 2); }
.main__business .slide-tab .slide-list {overflow: visible;}
.main__business .slide-tab .item {cursor: pointer; height: auto;}


.main__business .slide-tab .item-box {height:100%; position: relative;padding-bottom:12rem;}
.main__business .slide-tab .item-box::before {content:''; display:block; width:100%; height:200%; position: absolute; bottom:0; left:0%;  background: url('../images/main/section02_symbol01.svg') no-repeat center bottom/contain; opacity: 0; transition: all 0.5s ease-in-out;}

.main__business .slide-tab .item.is-active .item-box::before {animation: fade-up 0.5s ease-in-out both; opacity: 1;}


.main__business .slide-tab .desc {display: flex; align-items: center; justify-content: center;flex-direction: column; transition: all 0.5s ease-in-out;}


.main__business .slide-tab .desc.is-off {padding-top:3rem;}
.main__business .slide-tab .desc.is-off::before,
.main__business .slide-tab .desc.is-off::after {content:''; display: block; position: absolute; top:0; left:0; transition: all 0.5s ease-in-out;}
.main__business .slide-tab .desc.is-off::before {width:100%; height: 1px; background-color: var(--color-white-a2);}
.main__business .slide-tab .desc.is-off::after {width:0%; height: 1px; background-color: var(--color-main);}


.main__business .slide-tab .desc.is-on {position: absolute; width: 100%; top:-40%; left:50%; transform: translate(-50%, 0%); opacity: 0; }

.main__business .slide-tab .item.is-active .is-off {opacity: 0;}
.main__business .slide-tab .item.is-active .is-on {opacity: 1;}



.main__business .slide-tab .desc .stit {font-size:1.8rem; font-weight: 500; width:100%; text-align: center;}
.main__business .slide-tab .desc.is-off .stit {color:rgba(255, 255, 255, 0.5); text-align: right;}
.main__business .slide-tab .desc.is-on .stit {color:var(--color-main); font-weight: 900; margin-top:5rem;}


.main__business .slide-tab .item:hover .desc.is-off::after {width:100%;}
.main__business .slide-tab .item:hover .desc.is-off .stit {color:var(--color-main);}


.main__business .slide-tab .item .is-on .ico {width:26.25%; font-size: 0;}

.main__business .slide-tab .item .is-on .ico,
.main__business .slide-tab .item .is-on .stit {opacity: 0;}
.main__business .slide-tab .item.is-active .is-on .ico {animation: flipInY 1s ease-in-out 0.3s both; opacity: 1;}
.main__business .slide-tab .item.is-active .is-on .stit {animation: fade-up 0.5s ease-in-out 0.5s both;}

@media (max-width: 1280px){
	.main__business {--busiTab-height:30rem;}
	.main__business .slide-con .item-box .stit {font-size:7rem;}

	.main__business .slide-tab .item-box {padding-bottom:10rem;}
}

@media (max-width: 1023px){
	.main__business {--busiTab-height:25rem;}

	.main__business .slide-tab .item-box {padding-bottom:7rem;}

	.main__business .slide-tab .desc.is-off {padding-top:2rem;}
	.main__business .slide-tab .item .is-on .stit {display: none;}
}

@media (max-width: 960px){
	.main__business {--busiTab-height:20rem;}
	.main__business .slide-tab .item-box {padding-bottom:6rem;}
}

@media (max-width: 640px){
	.main__business .slide-con .item-box .stit {font-size:5rem;}
	.main__business .slide-con .item-box .txt br{display: none;}



	.main__business .slide-tab .desc.is-off::before{height:2px; background-color: var(--color-white-a4);}
	.main__business .slide-tab .desc.is-off::after {height: 2px;}
	.main__business .slide-tab .desc.is-off .stit {display: none;}
}
@media (max-width: 480px){
	.main__business {--busiTab-height:15rem;}

	.main__business .slide-tab .item-box {padding-bottom:4rem;}
}
@media (max-width: 376px){
	.main__business .slide-tab .item-box {padding-bottom:3rem;}
}

/* SECTION 2 : E */
/* ===================================================== */





/* ===================================================== */
/* SECTION 3 : S*/

/*R&D*/
.main__rnd {padding:16rem 0 18rem; background: url('../images/main/section03_bg01.png') no-repeat center bottom / cover;}
.main__rnd-wrap {display: flex; align-items: center; }
.main__rnd .sec__header {width:35%;margin:0 0 0 var(--inner-padding);}
.main__rnd .sec__header .tit{color:var(--color-sub); line-height: 1; transition: 0.5s ease-in-out;}
.main__rnd .sec__header .tit strong {font-size:15rem; font-weight: 800;}
.main__rnd .sec__header .tit strong em {font-weight: 100;}
.main__rnd .sec__header .tit span {font-size:9rem; font-weight: 800; display: block;}

.main__rnd .sec__header .txt {font-size:max(1.8rem, 16px); margin-top:2rem; font-weight: 700;  transition: 0.5s ease-in-out;}
.main__rnd .sec__header .txt strong {font-size:max(2rem, 18px); font-weight: 800; color:#222; margin-bottom:2rem; display: inline-block; transition: 0.5s ease-in-out;}

.main__rnd .sec__header-wrap a {display: block; position: relative; padding-bottom:5rem;}
.main__rnd .sec__header-wrap a::before,
.main__rnd .sec__header-wrap a::after {content:''; display: block; position: absolute; bottom:0; background-color:var(--color-sub); transition: 0.5s ease-in-out; opacity: 0;}

.main__rnd .sec__header-wrap a::before {width:4rem; height:2px; bottom:0; left:0;}
.main__rnd .sec__header-wrap a::after {width:4rem; height:2px; right:calc(100% - 4rem); bottom:0; transform:translate(0.5rem, -1.4rem) rotate(45deg);}

.main__rnd .sec__header-wrap a:hover::before,
.main__rnd .sec__header-wrap a:hover::after {opacity: 1;}
.main__rnd .sec__header-wrap a:hover::before {width:calc(100% - 4rem);}
.main__rnd .sec__header-wrap a:hover::after { right:4rem; bottom:0;}


.main__rnd .sec__header-wrap a:hover .tit{color:var(--color-main);}
.main__rnd .sec__header-wrap a:hover .txt,
.main__rnd .sec__header-wrap a:hover .txt strong {color:var(--color-main)}



.main__rnd-symbol {position: relative;width:65%; display: flex; height:100%;}
.video-wrap { position: relative; z-index: 1; width: 100%; height: 100%;
	-webkit-mask: url('../images/main/section03_bg02.svg') no-repeat right center/contain;
	mask: url('../images/main/section03_bg02.svg') no-repeat right center/contain;
}
.video-wrap video { width: 100%; height: 100%; object-fit: cover; object-position: right; transform: scale(1.5); transform-origin: right;}
.shadow-svg { position: absolute; object-fit: contain; object-position: right; width: 100%; height: 100%; top:0; left:0; filter: drop-shadow(0 0 4rem rgba(0,0,0,0.4));}
.shadow-svg.mo {display: none;}

@media (max-width: 1024px){
	.main__rnd .sec__header .tit strong {font-size:12rem;}
	.main__rnd .sec__header .tit span {font-size:7rem;}
}


@media (max-width: 768px){
	.main__rnd {padding:10rem 0 12rem;}
	.main__rnd-wrap {flex-wrap: wrap; gap:5rem;}
	.main__rnd .sec__header {width:100%; text-align: center; margin:0 var(--inner-padding);}
	.main__rnd .sec__header .tit strong {font-size:9rem;}
	.main__rnd .sec__header .tit span {font-size:5rem;}


	.main__rnd .sec__header-wrap a::before {width:4rem; height:1px; left:4rem;}
	.main__rnd .sec__header-wrap a::after {width:4rem; height:1px;}
	.main__rnd .sec__header-wrap a:hover::before {width:calc(100% - 8rem);}
	
	.main__rnd-symbol {width:auto; margin:0 var(--inner-padding);}
	.video-wrap {
		-webkit-mask: url('../images/main/section03_bg03.svg') no-repeat right center/contain;
		mask: url('../images/main/section03_bg03.svg') no-repeat right center/contain;
	}
	.shadow-svg {display: none;}
	.shadow-svg.mo {display: block;}
}

/* SECTION 3 : E */
/* ===================================================== */









/* ===================================================== */
/* SECTION 4 : S */

/*인재채용*/
.main__recruit  {padding:16rem 0 20rem;  background: url('../images/main/section04_bg01.png') no-repeat center bottom / cover; position: relative; height:100vh; max-height: 96rem;}
.main__recruit::after {content:''; display: block; width:100%; max-width: 192rem; height:100%; background: url('../images/main/section04_bg02.png') no-repeat center bottom / contain; position: absolute; bottom:0; left:50%; transform:translate(-50%, 0.86%); z-index: -1;}
.main__recruit-wrap {margin:0 var(--inner-padding); display: flex; gap:4rem; align-items: center; position: relative; z-index: 1;height:100%; justify-content: space-between;}


.main__recruit .sec__header .tit{font-size: max(3.5rem, 26px); color:#fff; font-weight: 800;}
.main__recruit .sec__header .txt.nth-1{font-size: 7rem; color:#222; font-weight: 100; margin-top:2rem; line-height: 1;}
.main__recruit .sec__header .txt.nth-1 img {height:5.8rem; margin-right:1rem;}

.main__recruit .sec__header .txt.nth-2{font-size: 5.6rem; color:#fff; font-weight: 300; margin-top:1.5rem;}
.main__recruit .sec__header .txt.nth-2 strong {font-weight: 700;}


.main__recruit-list {width: 50%;}


.main__recruit-list .list {display: flex; gap:3rem;}
.main__recruit-list .item {flex:1;}

.main__recruit-list .link {display: flex; height:100%; width:100%; border-radius: 4rem; background-color: #fff; text-align: center; flex-direction: column; align-items: center; justify-content: center; padding:4rem; transition: all 0.5s ease-in-out;}
.main__recruit-list .link::after {content:''; display: block; width: 100%; height: 6rem; background: no-repeat right bottom / contain; transition: all 0.5s ease-in-out;}
.main__recruit-list .item:nth-child(1) .link::after {background-image: url('../images/main/section04_ico01.png');}
.main__recruit-list .item:nth-child(2) .link::after {background-image: url('../images/main/section04_ico02.png');}
.main__recruit-list .item:nth-child(3) .link::after {background-image: url('../images/main/section04_ico03.png');}



.main__recruit-list .link .tit {font-size:max(2.4rem, 20px); color:#222; font-weight: 500; padding-bottom:2rem; margin-bottom:3rem; border-bottom:1px solid #dcdcdc; display: flex; flex-wrap: wrap; align-items: flex-end; transition: all 0.5s ease-in-out;}
.main__recruit-list .link .tit em {font-size:max(1.4rem, 14px);}


.main__recruit-list .link:hover {background-color: var(--color-main);}
.main__recruit-list .link:hover .tit {color:#fff; font-weight: 800; border-color:#20adeb;}
.main__recruit-list .item:nth-child(1) .link:hover::after {background-image: url('../images/main/section04_ico01_on.png');}
.main__recruit-list .item:nth-child(2) .link:hover::after {background-image: url('../images/main/section04_ico02_on.png');}
.main__recruit-list .item:nth-child(3) .link:hover::after {background-image: url('../images/main/section04_ico03_on.png');}

@media (max-width: 1280px){
	.main__recruit-list .link {padding:3rem; border-radius: 3rem;}
}


@media (max-width: 1024px){
	.main__recruit .sec__header .txt.nth-1{font-size:6rem;}
	.main__recruit .sec__header .txt.nth-1 img {height:4.8rem;}
	.main__recruit .sec__header .txt.nth-2{font-size: max(4rem, 32px);}


	.main__recruit-list {flex-grow: 1;}
}

@media (max-width: 960px){
	.main__recruit-wrap {flex-wrap: wrap;}
	.main__recruit .sec__header {width: 100%;}
	.main__recruit-list {width:100%;}
}

@media (max-width: 768px){
	.main__recruit  {padding:10rem 0 14rem;}
	.main__recruit {height: auto; max-height: none;}
	.main__recruit .sec__header {text-align: center;}
}


@media (max-width: 576px){
	.main__recruit .sec__header .txt br{display: none;}

	.main__recruit-list .list {flex-wrap: wrap;}
	.main__recruit-list .item { width:100%; flex-basis: 100%;}

	.main__recruit-list .link {flex-direction: row; border-radius: 2rem; padding:2rem 3rem; align-items: center; justify-content: space-between;}
	.main__recruit-list .link::after {width:6rem; background-position: center;}
	
	.main__recruit-list .link .tit { padding-bottom:0; margin-bottom:0; border-bottom:0; align-items: center;}
	.main__recruit-list .link .tit br {display: none;}
	.main__recruit-list .link .tit em {display: none;}
}

/* SECTION 4 : E */
/* ===================================================== */









/* ===================================================== */
/* SECTION 5 : S */
/*카달로그*/
.main__cata {padding: 8rem 0 8rem;}
.main__cata-wrap {display: flex; justify-content: space-between; align-items: center; gap:4rem;}

.main__cata .test {width:3.6rem; height:3.6rem; animation: ani-bg01 2s linear infinite;
		-webkit-mask: url('../images/main/section05_ico01.svg') no-repeat right center/contain;
		mask: url('../images/main/section05_ico01.svg') no-repeat right center/contain;
	}


.main__cata .sec__header-wrap {display: flex; gap:4rem;}

.main__cata .sec__header .stxt {flex-shrink: 0; font-size:max(1.3rem, 11px); color:var(--color-main); font-weight: 800; letter-spacing: 1em; text-indent:1em; text-transform: uppercase; border-radius:5rem; padding:1rem 1.5rem; text-align: center; background-color: var(--color-sub);  writing-mode:sideways-rl ; text-orientation: mixed;}



.main__cata .sec__header-wrap > a {display: block; padding:1rem 0;}
.main__cata .sec__header .tit{font-size: 5rem; color:#222; font-weight: 800;}
.main__cata .sec__header .tit strong {color:var(--color-main);}
.main__cata .sec__header .tit em {font-weight: 100;}
.main__cata .sec__header .txt{font-size: 5rem; color:#000; font-weight: 100; margin-top:2rem; padding-right:5rem; position: relative; display: inline-block;}
.main__cata .sec__header .txt::before,
.main__cata .sec__header .txt::after {content:''; display: block; width:3.6rem; height:3.6rem; position: absolute;}

.main__cata .sec__header .txt::before {bottom:0; right:0; transform: translate(0, -1.2rem); animation: ani-click01 2s linear infinite;
	-webkit-mask: url('../images/main/section05_ico01.svg') no-repeat right center/contain;
	mask: url('../images/main/section05_ico01.svg') no-repeat right center/contain;
}
@keyframes ani-click01 { 
	0% { background-color: var(--color-sub1); opacity: 0;}
	40% { background-color: var(--color-sub1); opacity: 1;}
	50% { background-color: var(--color-sub); opacity: 1;}
	60% { background-color: var(--color-sub1); opacity: 1;}
	100% { background-color: var(--color-sub1);opacity: 0;}
}


.main__cata .sec__header .txt::after {bottom:0; right:0; transform: translate(0, -1.2rem); background: url('../images/main/section05_ico02.svg') no-repeat center / contain; transform:translate(50%, 20%); animation: ani-click02 2s linear infinite;}

@keyframes ani-click02 { 
	0% {right:-10rem; bottom:3rem;}
	40% {right:0; bottom:1rem;}
	50% {bottom:0rem; }
	55% {bottom:1rem; opacity: 1;}
	75% { opacity: 0;  bottom:3rem; right:0rem;}
	100% { opacity: 0;  bottom:3rem;}
}



.main__cata-wrap .image {padding-top:5rem;}


@media (max-width: 1024px){
	.main__cata .sec__header .tit br{display: none;}
}
@media (max-width: 640px){
	.main__cata .main__cata-wrap {flex-wrap: wrap;}
	.main__cata .sec__header-wrap {gap:2rem;}
	
	
	.main__cata .sec__header .stxt {letter-spacing: 0.7em; text-indent:0.7em;}



	.main__cata .sec__header .tit {font-size:4rem;}
	.main__cata .sec__header .tit br{display: none;}
	.main__cata .sec__header .txt {font-size:4rem;}
	.main__cata-wrap .image {padding:0rem 0 0 3rem; margin:0 auto; text-align: center;}
}


/* SECTION 5 : E */
/* ===================================================== */