/* intro */
#intro{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index:  1000; animation: introHeight 1.2s 2.5s cubic-bezier(0.65, 0, 0.35, 1) both; }
#intro .bg{ height: 100%; background: #000; }
#intro .logo{ --gap: 40px; max-width: max-content; display: flex; justify-content: center; align-items: center; position: relative; top: 50%; z-index: 10; transform: translateY(-50%); margin: 0 auto; overflow: hidden; }
#intro .logo img{ width: auto; height: 81px; }
#intro .logo .symbol{ position: relative; left: calc(50% - var(--gap)); transform: translateY(120%); animation: introSymbol 2s 0.3s both; }
#intro .logo .txt{ animation: introTxt 2s 0.3s both; }

#intro .bottom{ --gap: 15px; width: 100%; position: absolute; bottom: 0; left: 0; transform: translateY(100%); }
#intro .bottom div{ background: #000; margin-top: calc(15px); }
#intro .bottom div:nth-of-type(1){ height: 50px; }
#intro .bottom div:nth-of-type(2){ height: 40px; }
#intro .bottom div:nth-of-type(3){ height: 30px; }
#intro .bottom div:nth-of-type(4){ height: 20px; }
#intro .bottom div:nth-of-type(5){ height: 10px; }
#intro .bottom div:nth-of-type(6){ height: 1px; }

@media screen and (max-width: 1700px){
	#intro .logo img{ height: 70px; }
}

@media screen and (max-width: 1280px){
	#intro .logo{ --gap: 30px; }
	#intro .logo img{ height: 60px; }
}

@media screen and (max-width: 900px){
	#intro .logo{ --gap: 20px; }
	#intro .logo img{ height: 50px; }
}


/* common */
#main{ position: relative; }
/* .ptH{ padding-top: var(--headerH); } */


/* viewmore */
.viewmore{ --bg: #000; --color: #222; display: flex; align-items: center; max-width: max-content; font-size: 18px !important; font-weight: 400; color: var(--color); letter-spacing: -0.03em; padding: 10px; margin-left: -10px; }
.viewmore:active, .viewmore:visited, .viewmore:link{ color: var(--color); }
.viewmore::after{ content: ""; width: 30px; height: 30px; display: inline-block; background: var(--bg) url("/img/main/viewmore.svg") no-repeat center center / auto; border: 1px solid var(--bg); border-radius: 50%; margin-left: 20px; transition: filter 0.5s, background 0.5s, border-color 0.5s; }

.viewmore.white{ --bg: transparent; --color: #FFF; }
.viewmore.white::after{ border: 1px solid #FFF; }

/* title-box */
.title-box h3{ font-size: 7rem; font-weight: 600; color: #FFF; letter-spacing: -0.03em; }
.title-box p{ font-size: 22px; font-weight: 400; color: #FFF; letter-spacing: -0.03em; margin-top: 20px; }
.title-box a{ margin-top: 75px; }

/* eng-title */
.eng-title{ text-align: center; margin-bottom: 100px; }
.eng-title h3{ font-family: var(--engFont); font-size: 8rem; font-weight: 400; color: #000; }
.eng-title p{ font-size: 20px; font-weight: 400; #333; letter-spacing: -0.03em; line-height: 1.7; margin-top: 20px; }

.eng-title.white *{ color: #FFF !important; }
.eng-title.white p{ font-weight: 300; }

/* btns */
.btns button{ width: 80px; height: 80px; background: transparent; border: 1px dashed #000; border-radius: 50%; padding: 10px; transition: border 0.5s, background 0.5s; }
.btns button:not(:last-of-type){ margin-right: 20px; }
.btns button img{ transition: opacity 0.5s, filter 0.5s; }

.btns button.none{ border-color: #DDD; }
.btns button.none img{ opacity: 0.1; }

@media screen and (hover: hover){
	/* viewmore */
	.viewmore:hover::after{ filter: invert(1); -webkit-filter: invert(1); border-color: #FFF; }
	.viewmore.white:hover::after{ --bg: #000; filter: invert(1); -webkit-filter: invert(1); border-color: var(--bg); }

	/* btns */
	.btns button:hover{ background: #000; border: 1px solid #000; }
	.btns button:hover img{ filter: invert(1); -webkit-filter: invert(1); }
}

@media screen and (max-height: 800px){
	/* common */
	.ptH{ padding-top: 0; }
}

@media screen and (max-width: 1700px){
	/* viewmore */
	.viewmore::after{ width: 25px; height: 25px; margin-left: 15px; }

	/* title-box */
	.title-box p{ font-size: 20px; }
	.title-box a{ margin-top: 60px; }

	/* eng-title */
	.eng-title{ margin-bottom: 70px; }
	.eng-title p{ font-size: 18px; }

	/* btns */
	.btns button{ width: 70px; height: 70px; }
}

@media screen and (max-width: 1280px){
	/* viewmore */
	.viewmore{ font-size: 17px !important; }

	/* title-box */
	.title-box h3{ font-size: 6rem; }
	.title-box p{ font-size: 18px; margin-top: 10px; }
	.title-box a{ margin-top: 40px; }

	/* eng-title */
	.eng-title{ margin-bottom: 40px; }
	.eng-title h3{ font-size: 7rem; }
	.eng-title p{ font-size: 17px; }

	/* btns */
	.btns button{ width: 60px; height: 60px; }
}

@media screen and (max-width: 1200px){
	/* common */
	.ptH{ padding-top: 0; }
}


/* visual */
#visual{ position: relative; overflow: hidden; }
#visual .visual-wrap{ animation: bgScale var(--active) both; }
#visual .visual{ overflow: hidden; z-index: 997 !important; opacity: 1 !important; }
#visual .visual.prev{ z-index: 998 !important; }
#visual .visual .bg{ height: 100vh; transform: scale(1.1); transition: var(--hidden); }
#visual .visual01 .bg{ background: url("/img/main/visual01_01.jpg") no-repeat center center / cover; }
#visual .visual02 .bg{ background: url("/img/main/visual02_01.jpg") no-repeat center center / cover; }
#visual .visual03 .bg{ background: url("/img/main/visual03_01.jpg") no-repeat center center / cover; }

#visual .visual.slick-active{ z-index: 999 !important; animation-name: bgClip; animation-fill-mode: both; }
#visual .visual.slick-active .bg, #visual .visual.slick-now .bg{ transform: scale(1); transition: var(--active); }

#visual .slide-option{ position: absolute; bottom: 0; left: 0; right: 0; padding-bottom: 30px; }
#visual .slide-option .text-box{ margin-bottom: 120px; }
#visual .slide-option .text-box h2{ display: inline-block; font-size: 7rem; font-weight: 700; color: #FFF; letter-spacing: -0.03em; line-height: 1.2857; will-change: opacity, transform, filter; }
#visual .slide-option .text-box > div:not(.animated){ display: none; }

#visual .slide-option .text-box .animated h2{ animation: textShow 0.7s both; }
#visual .slide-option .text-box .hidden h2{ animation: textHide 0.7s both; }

#visual .slide-option .dots .slick-dots{ width: 100%; display: flex !important; }
#visual .slide-option .dots .slick-dots button{ display: none; }
#visual .slide-option .dots .slick-dots li{ width: calc((100% - 40px) / 3); position: relative; }
#visual .slide-option .dots .slick-dots li::before{ content: ""; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.2); position: absolute; bottom: 0; left: 0; }
#visual .slide-option .dots .slick-dots li:not(:last-of-type){ margin-right: 20px; }
#visual .slide-option .dots .slick-dots .bar{ height: 3px; }
#visual .slide-option .dots .slick-dots .bar div{ width: 0; height: 100%; background: #FFF; }

@media screen and (max-width: 1700px){
	#visual .slide-option .text-box{ margin-bottom: 80px; }
}

@media screen and (max-width: 1280px){
	#visual .slide-option .text-box{ margin-bottom: 60px; }
}

@media screen and (max-width: 600px){
	#visual br{ display: none; }
	#visual .visual .bg{ height: var(--vh); }
}


/* business */
#business{ overflow: hidden; position: relative; padding: 150px 0; }
#business::before{ content: ""; width: 529px; height: 400px; background: url("/img/main/symbol_bg.svg") no-repeat center center / contain; position: absolute; bottom: -30px; right: -80px; }
#business .w1720{ height: 100%; }
#business .bottom{ height: 100%; /* padding-top: var(--headerH); */ display: flex; flex-direction: column; justify-content: flex-end; opacity: 1; }

#business .btns{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); padding-bottom: 30px; }

#business .slick-dots{ max-width: 760px; width: 100%; display: flex !important; flex-wrap: wrap; align-items: flex-end; position: absolute; top: 0; right: 0; margin-bottom: -20px; }
#business .slick-dots button{ display: none; }
#business .slick-dots li{ width: calc((100% - 40px) / 3); font-size: 20px; font-weight: 500; color: #AAA; letter-spacing: -0.03em; margin-right: 20px; margin-bottom: 20px; cursor: pointer; }
#business .slick-dots li:nth-of-type(3n){ margin-right: 0; }
#business .slick-dots li span{ display: block; margin-bottom: 15px; transition: color 0.5s; }
#business .slick-dots li.slick-active span{ font-weight: 600; color: #333; }
#business .slick-dots .bar{ width: 100%; height: 3px; position: relative; z-index: 5; }
#business .slick-dots .bar::before{ content: ""; width: 100%; height: 1px; background: #DDD; position: absolute; bottom: 0; left: 0; z-index: -1; }
#business .slick-dots .bar div{ width: 0; height: 100%; background: #000; }

#business .business-wrap{ width: 100%; }
#business .business-wrap .slick-list{ overflow: visible; margin-right: -100px; }
#business .business{ outline: none; margin-right: 100px; }
#business .flex-box{ width: 100%; display: flex; justify-content: flex-end; letter-spacing: -0.03em; position: relative; }

#business .text{ position: absolute; top: 0; left: 0; }
#business .text *{ font-size: 20px; }
#business .text h3{ font-size: 7rem; font-weight: 600; color: #111; }
#business .text p{ font-weight: 400; color: #222; line-height: 1.7; margin-top: 30px; }
#business .text p span{ display: block; font-size: 18px; font-weight: 400; color: #666; margin-top: 10px; }
#business .text dl{ margin: 40px 0 50px; }
#business .text dl dt{ font-weight: 600; color: #333; margin-bottom: 10px; }
#business .text dl dd{ font-weight: 300; color: #666; line-height: 1.6; }

#business .img{ max-width: 1140px; width: 70%; padding-top: 110px; }
#business .img figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 55.264%; }
#business .img figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

@media screen and (max-height: 800px){
	#business{ padding: 100px 0; }
	#business .bottom{ padding-top: 0; }
}

@media screen and (max-width: 1700px){
	#business{  padding: 100px 0; }

	#business .slick-dots li{ font-size: 18px; }

	#business .text *{ font-size: 18px; }
	#business .text p{ margin-top: 20px; }
	#business .text p span{ font-size: 16px; }
	#business .text dl{ margin: 30px 0 40px; }
}

@media screen and (max-width: 1500px){
	#business .bottom{ justify-content: center; }

	#business .slick-dots{ max-width: 700px; }
	#business .slick-dots li span{ margin-bottom: 10px; }
}

@media screen and (max-width: 1400px){
	#business .text h3{ font-size: 6rem; }
}

@media screen and (max-width: 1280px){
	#business{ padding: 80px 0; }
	#business::before{ width: 395px; height: 300px; }
	#business .slick-dots li{ font-size: 17px; }

	#business .text *{ font-size: 17px; }
	#business .text p{ margin-top: 10px; }
	#business .text p span{ font-size: 15px; }
	#business .text dl{ margin: 20px 0; }
	#business .img{ width: 60%; }
}

@media screen and (max-width: 1200px){
	/* #business{ padding: 80px 0; } */
	#business .bottom{ padding-top: 0; }

	#business .business-wrap{ display: flex; flex-direction: column-reverse; }
	#business .slick-dots{ margin-bottom: 10px;  position: static; margin-left: auto; }
	#business .btns{ display: none; }
	#business .text{ width: 40%; position: static; }
	#business .text br{ display: none; }
}

@media screen and (max-width: 900px){
	#business .slick-dots li{ font-size: 16px; }
	#business .slick-dots li span{ margin-bottom: 5px; }

	#business .flex-box{ flex-direction: column-reverse; }
	#business .text{ width: 100%; }
	#business .img{ width: 100%; padding-top: 0; padding-bottom: 10px; }
}

@media screen and (max-width: 650px){
	#business .slick-dots li{ width: calc((100% - 20px) / 2); }
	#business .slick-dots li:nth-of-type(3n){ margin-right: 20px; }
	#business .slick-dots li:nth-of-type(2n){ margin-right: 0; }
}


/* facilites */
#facilites{ position: relative; background: #111; padding: 150px 0; }
#facilites .flex-box{ display: flex; flex-wrap: wrap; }
#facilites .item{ width: calc(100% / 4); overflow: hidden; position: relative; top: 0; transition: top 0.5s, opacity 1s 0.3s, transform 1s 0.3s; }
#facilites .item:nth-of-type(odd){ transform: translateY(50px); }
#facilites .item:nth-of-type(even){ transform: translateY(-50px); }
#facilites .item.aos-animate{ transform: translateY(0) !important; }
#facilites .item a{ position: relative; z-index: 10; }
#facilites .item .img{ width: 100%; position: relative; overflow: hidden; padding-bottom: 80.932%; }
#facilites .item .img::after{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.5s; position: absolute; top: 0; left: 0; }
#facilites .item .img img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transform: scale(1); transition: transform 0.5s; }

#facilites .item p{ font-size: 24px; font-weight: 600; color: #FFF; letter-spacing: -0.02em; position: absolute; top: 0; left: 0; z-index: 100; padding: 30px; }

#facilites .flex-box.on .item .img::after{ opacity: 1; }

@media screen and (hover: hover){
	#facilites .item:hover{ top: -20px; }
	#facilites .item:hover .img::after{ opacity: 0 !important; }
	#facilites .item:hover .img img{ transform: scale(1.05); }
}

@media screen and (max-height: 800px){
	#facilites{ padding: 100px 0; }
}

@media screen and (max-width: 1700px){
	#facilites{ padding: 100px 0; }
	#facilites .item p{ font-size: 20px; }
}

@media screen and (max-width: 1400px){
	#facilites .item p{ padding: 20px; }
}

@media screen and (max-width: 1280px){
	#facilites .item p{ font-size: 18px; }
}

/* @media screen and (max-width: 1200px){
	#facilites{ padding: 100px 0; }
} */

@media screen and (max-width: 1000px){
	#facilites{ padding: 80px 0; }
	#facilites .item{ width: calc(100% / 2); }
}

@media screen and (max-width: 1000px) and (hover: hover){
	#facilites .item:hover{ top: 0; }
}

@media screen and (max-width: 600px){
	#facilites br{ display: none; }
}

/* esg */
#esg{ padding: 150px 0; }
#esg .esg{ position: relative; opacity: 1; }
#esg .esg .text{ position: absolute; top: 50%; left: 0; right: 0; z-index: 10; transform: translateY(-50%); padding: 0 150px; }
#esg .esg figure{ clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); transition: clip-path 1s; }

#esg .esg.aos-animate figure{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }

/* @media screen and (max-height: 800px){
	#esg{ padding: 100px 0; }
} */

@media screen and (max-width: 1700px){ 
	#esg{ padding: 100px 0; }
	#esg .esg .text{ padding: 0 100px; }
}

@media screen and (max-width: 1200px){
	#esg{ padding: 80px 0; }
}

@media screen and (max-width: 900px){
	#esg .esg .text{ position: static; transform: translateY(0); padding: 0 0 30px; }
	#esg .esg .title-box h3{ color: #000; }
	#esg .esg .title-box p{ color: #222; }
	#esg .esg .title-box a{ margin-top: 0; }
	#esg .esg .title-box .viewmore.white{ --bg: #000; --color: #222; }
	#esg .esg .title-box .viewmore.white::after{ border-color: var(--bg); }
	#esg .esg figure{ width: calc(100% + 40px); margin-left: -20px; }
}

@media screen and (max-width: 900px) and (hover: hover){
	#esg .esg .title-box .viewmore.white:hover::after{ border-color: #FFF; }
}


/* notice */
#notice{ padding-bottom: 150px; }
#notice{ overflow: hidden; }
#notice .eng-title{ position: relative; }
#notice .tab-content .tab:not(:first-child){ display: none; }
#notice .btns{ display: flex; justify-content: center; margin-top: 50px; }

#notice .tab-menu{ position: absolute; top: 50%; right: -30px; transform: translateY(-50%); }
#notice .tab-menu ul{ display: flex; }
#notice .tab-menu ul li{ font-size: 24px; font-weight: 600; color: #AAA; letter-spacing: -0.03em; padding: 30px; position: relative; cursor: pointer; }
#notice .tab-menu ul li::after{ content: ""; width: 4px; height: 4px; background: #AAA; position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); }
#notice .tab-menu ul li:last-of-type::after{ display: none; }
#notice .tab-menu ul li.on{ color: #111; }

#notice .relative{ position: relative; background: #FFF; }
#notice .relative .line-box{ width: 100vw; left: 50%; z-index: 100; transform: translateX(-50%); pointer-events: none; }

#notice .bar{ height: 3px; position: relative; z-index: 10; margin-bottom: 60px; }
#notice .bar::before{ content: ""; width: 100%; height: 1px; background: #DDD; position: absolute; top: 0; left: 0; z-index: -1; }
#notice .bar div{ width: 0; height: 100%; background: #000; }

#notice .notice-wrap .slick-list{ margin-right: -30px; }
#notice .notice-wrap .slick-track{ margin: 0; }
#notice .notice{ position: relative; margin-right: 30px; }
#notice .notice .text{ position: absolute; top: 30px; left: 0; right: 0; z-index: 10; padding-left: 160px; padding-right: 120px; mix-blend-mode: exclusion; }
#notice .notice .text h6{ font-size: 26px; font-weight: 400; color: #FFF; letter-spacing: -0.03em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#notice .notice .text p{ font-size: 18px; font-weight: 500; color: #555; position: absolute; top: 0; left: 0; }
#notice .notice .text .viewmore{ filter: invert(1); -webkit-filter: invert(1); margin-top: 50px; }

#notice .notice .bg{ background: #FFF; }
#notice .notice .img{ max-width: 350px; width: 100%; margin-left: auto;  }
#notice .notice .img figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 68.572%; clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); opacity: 0; transition: clip-path 0.3s ease-in-out, opacity 0.3s ease-in-out; }
#notice .notice .img figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

@media screen and (hover: hover){
	#notice .notice:hover .img figure{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); opacity: 1; }
}

/* @media screen and (max-height: 800px){
	#notice{ padding-bottom: 100px; }
} */

@media screen and (max-width: 1700px){
	#notice .tab-menu{ right: -20px; }
	#notice .tab-menu ul li{ font-size: 22px; padding: 20px; }
	
	#notice .notice .text{ padding-left: 140px; padding-right: 100px; }
	#notice .notice .text h6{ font-size: 24px; }
	#notice .notice .text p{ font-size: 17px; }
}

@media screen and (max-width: 1280px){
	#notice .tab-menu{ right: -15px; }
	#notice .tab-menu ul li{ font-size: 20px; padding: 10px 15px; }

	#notice .bar{ margin-bottom: 40px; }

	#notice .notice .text{ padding-left: 120px; padding-right: 80px; }
	#notice .notice .text h6{ font-size: 22px; }
	#notice .notice .text p{ font-size: 16px; }
	#notice .notice .text .viewmore{ margin-top: 30px; }
	#notice .notice .img{ max-width: 300px; }
	#notice .btns{ margin-top: 30px; }
}

@media screen and (max-width: 1200px){
	#notice{ padding-bottom: 100px; }
	#notice .notice .text{ padding-left: 0; top: 20px; }
	#notice .notice .text p{ position: static; margin-top: 10px; }
	#notice .notice .text .viewmore{ margin-top: 20px; }
}

@media screen and (max-width: 1000px){
	#notice .notice .img{ max-width: 250px; }
}

@media screen and (max-width: 900px){
	#notice .eng-title{ margin-bottom: 10px; }
	#notice .tab-menu{ position: static; transform: translateY(0); margin-top: 20px; }
	#notice .tab-menu ul{ justify-content: flex-end; margin-right: -15px; margin-top: 5px; }
	#notice .tab-menu ul li{ font-size: 18px; }

	#notice .notice-wrap .slick-list{ margin-right: -20px; }
	#notice .notice-wrap{ width: calc(100% + 20px); }
	#notice .notice{ position: relative; margin-right: 20px; }
	#notice .bar{ margin-bottom: 20px; }
	#notice .notice{ width: 85vw; }
	#notice .notice .text h6{ font-size: 20px; }
	#notice .notice .img{ max-width: 230px; }
}