@charset "UTF-8";

/*-------------------------------------------------------------------
	분류이름 : 인트로 페이지
	분류그룹 : INTRO
-------------------------------------------------------------------*/
#intro {display: grid; overflow: hidden; position: relative; min-height: 100%; grid-template-columns: 1fr 2.426fr; grid-template-rows: repeat(2, 1fr);}
#intro .section {display: block; position: relative; color: #fff;}
#intro .section .sc-con {display: flex; overflow: hidden; position: relative; z-index: 1; width: 100%; height: 100%; padding: 6rem 5rem; flex-direction: column;}
#intro .section .sc-con::before {content: ""; display: block; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover;}
#intro .section a.sc-con::after,
#intro .section button.sc-con::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 44.17%, rgba(0, 0, 0, 0) 100%); backdrop-filter: blur(6px);}
#intro .section .sc-con img {position: absolute; height: auto;}
#intro .section .title {display: block; position: relative; z-index: 1; line-height: 1.1; font-weight: 700; font-size: 4rem; font-family: 'Urbanist', 'Pretendard', 'Noto Sans KR', sans-serif;}
#intro .txt {display: block; position: relative; z-index: 1; font-weight: 500; font-size: 2rem; color: rgba(255,255,255,0.8); letter-spacing: -0.02em;}
#intro .btn-more {display: block; position: relative; z-index: 1; width: 1em; height: 1em; border-radius: 50%; font-size: 3.4rem; background: #fff url(../images/i_more_arr.svg) no-repeat center;}
#intro .btn-outline {display: inline-flex; position: relative; z-index: 1; width: auto; min-height: 4.4rem; margin-top: 3.8rem; margin-right: auto; padding: 0 2rem; border: 1px solid #999999; border-radius: 999px; font-size: 1.6rem; color: rgba(255,255,255,0.8); background-color: transparent; align-items: center;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#intro .section .sc-con[data-position="bottom"] {justify-content: flex-end;}

#intro .section .title + .txt {margin-top: 1rem;}
#intro .section .title + .btn-more {margin-top: 2.2rem;}

/* content */
/* #intro #in1 {grid-row: span 2;} */
#intro #in1::before {content: ""; display: block; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-image: url(../images/bg_intro.png); background-repeat: no-repeat; background-position: right bottom; background-size: auto 69.4%;}
#intro #in1 .sc-con {padding: 6rem 5rem 3rem 5rem; justify-content: flex-end;}
#intro #in1 .sc-con::before {display: none;}
#intro #in1 .title {font-size: 4.4rem;}
#intro #in1 .sc-con .tip {width: 100%; margin-top: 3rem; font-weight: 500; font-size: 1.5rem; color: #ffff00;}
#intro #in2 {grid-row: span 2;}
#intro #in2 .sc-con::before {background-image: url(../images/bg_nuriho_full.jpg); background-position: center;}

#intro #in3 .sc-con::before {background-image: url(../images/bg_danuri.png); background-position: center bottom 50;}
#intro #in3 img {bottom: 25%; right: 2.2rem; width: 83.214%;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#intro .section .sc-con::before {transition: transform 0.4s;}
#intro .section .sc-con:focus-visible::before,
#intro .section .sc-con:hover::before {transform: scale(1.01);}
/* 블러 */
#intro .section .sc-con::after {opacity: 0; transition: opacity 0.4s;}
[data-menu-focus="on"] #intro .section .sc-con:not(:focus-visible, :hover)::after {opacity: 1;}
#intro .section .sc-con > * {transition: opacity 0.4s;}
[data-menu-focus="on"] #intro .section .sc-con:not(:focus-visible, :hover) > * {opacity: 0.7;}

#intro .section .sc-con img {transition: transform 0.4s;}
#intro .section .sc-con:focus-visible img,
#intro .section .sc-con:hover img {transform: scale(1.02);}


@media screen and (min-width: 1024px) {
	#intro #in1 {opacity: 0; animation: fadeIn 1s forwards;}
	#intro #in2 {opacity: 0; animation: upAni 0.6s 0.25s forwards;}
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes upAni {
	0% {opacity: 0; transform: translateY(2rem);}
	100% {opacity: 1; transform: translateY(0);}
}
@keyframes downAni {
	0% {opacity: 0; transform: translateY(-2rem);}
	100% {opacity: 1; transform: translateY(0);}
}
@keyframes leftAni {
	0% {opacity: 0; transform: translateX(-2rem);}
	100% {opacity: 1; transform: translateX(0);}
}
@keyframes rightAni {
	0% {opacity: 0; transform: translateX(2rem);}
	100% {opacity: 1; transform: translateX(0);}
}

/* accessibility */
#intro :focus-visible {outline: 0.2rem dashed #fff; outline-offset: -0.4rem;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1600px) {
	#intro .section .sc-con {padding: 4rem 2rem;}
	#intro .section .title {font-size: 3.2rem;}
	#intro .txt {font-size: 1.7rem;}
	#intro .txt br {display: none;}

	#intro #in1 .title {font-size: 3.2rem;}
	#intro #in1 .sc-con {padding-top: 12rem;}
	#intro #in1 .sc-con .tip {padding: 2rem; font-size: 1.4rem;}
}
@media screen and (max-width: 1024px) {
	#intro {grid-template-columns: 1fr 1.8fr;}
	#intro .section .sc-con {padding: 3rem 2rem;}
	#intro .section .title {font-size: 2.4rem;}
	#intro .txt {font-size: 1.6rem;}
	
	#intro .section .title + .btn-more {margin-top: 1.6rem;}
	
	#intro #in1::before {background-size: contain;}
	#intro #in1 .title {font-size: 3rem;}
}
@media screen and (max-width: 768px) {
	#intro {grid-template-columns: 26rem 1fr;}
	#intro #in1 .title {font-size: 2.4rem;}
}
@media screen and (max-width: 600px) {
	#intro {grid-template-columns : 1fr; grid-template-rows: auto 1fr;}
	#intro .section .title {font-size: 2rem;}
	#intro .txt {font-size: 1.5rem;}
	#intro .btn-more {font-size: 2.8rem;}
	#intro .btn-outline {min-height: 3.8rem; padding: 0 1.2rem; font-size: 1.4rem;}

	#intro .section .title + .btn-more {margin-top: 1.2rem;}
	#intro #in1 {grid-row: 1; padding-top: 7.2rem;}
	#intro #in1 .sc-con {padding-top: 3rem;}
	#intro #in1 .sc-con .tip {position: static; padding: 1.6rem 0 0; font-size: 1.3rem;}
	#intro #in1 .title {font-size: 2.2rem;}
	#intro #in2 {grid-row: 1fr;}
}