@import url('common.css'); 


.header {height:auto !important; background:transparent !important;}
.header::after {display:none;}
.header .header_in {justify-content:flex-end;}
.header .header_in .logo {display:none;}
.header .gnb {display:none;}
.header .header_in .top_util ul {display:none;}
.header .save_logo .up {fill:white !important;}


/* 풀페이지 */
.section {overflow:hidden; clear:both; position: relative; width: 100%; height: 100%; word-break: keep-all; box-sizing:border-box; display:flex; justify-content: center; flex-direction: column; z-index:1;}
.section .bg {display:block; width:100%; height:100%; position:absolute; left:0; top:0;  z-index: -1; transform:scale(1.2);}
.section.action .bg {transition:all 3s cubic-bezier(0.215,0.61,0.355,1); transform:scale(1); }
.section .fp-tableCell {vertical-align: middle;}

.fs80 {color: var(--white); font-family: var(--eng); font-size: 4.444rem; font-weight: 500; line-height:93.75%; letter-spacing: -4px; text-transform: uppercase;}
.fs60 {color: var(--black); font-family: var(--eng); font-size: 3.3333rem; font-weight: bold; line-height:125%; letter-spacing: -3px; text-transform: uppercase;}
.fs45 {color: var(--black); font-family: var(--eng); font-size: 2.5rem; font-weight: bold; line-height:128.889%; letter-spacing: -2.25px; text-transform: uppercase;}
.fs26 {color: var(--black); font-family: var(--eng); font-size: 1.444rem; font-weight: bold; line-height:115.385%; letter-spacing: -1.3px;}
.fs30 {color: var(--white); font-size: 1.666rem; font-weight: 400; line-height:146.667%; letter-spacing: -1.2px;}
.fs24 {color: var(--black); font-size: 1.333rem; font-weight: 400; line-height:150%; letter-spacing: -0.96px;}
.fs20 {color: var(--sub); font-size: 1.111rem; font-weight: 400; line-height:160%; letter-spacing: -0.8px;}


.fullpage-wrapper {position:relative; z-index:99;}

.fullpage-wrapper::before {content:''; width:100%; height:var(--vh); position:fixed; top:0; left:0; z-index:-2; background:url("/assets/img/intro/intro_bg.jpg")no-repeat center / cover; display:block; transform:scale(1.3); animation:3s ease 0.2s forwards ani_scale;}
.fullpage-wrapper::after {content:''; width:100%; height:var(--vh); background: rgba(218, 41, 28, 0.70); position:fixed; top:0; left:0; z-index:-1; opacity:0; visibility:hidden; transition:all 0.5s ease;}

.fixed_tBox {position:fixed; top:40%; left:50%; transform:translateX(-50%); z-index:80; text-align:center; opacity:0; visibility:hidden; transition:all 0.5s ease;}
.fixed_tBox .fs80 {display:inline-block; position:relative; z-index:10;}
.fixed_tBox .fs80::after {content:''; width:100%; height:100%; background:var(--main); position:absolute; top:0; left:0; z-index:-1; transform: rotate(-4deg) scaleX(0); animation:0.5s ease 0.2s forwards txt_ani;}
.fixed_tBox .fs30 {margin:30px 0 0;}
.fixed_tBox .fs30 * {letter-spacing:inherit; line-height:inherit; font-weight: 700; }
.fixed_tBox .fs30 .bold {color: var(--black); position:relative; z-index:10; display:inline-block;}
.fixed_tBox .fs30 .bold::after {content:''; width:100%; height:100%; background:var(--white); transform: rotate(1deg) scaleX(0); position:absolute; bottom:-2px; right:0; z-index:-1;  animation:0.5s ease 0.4s forwards txt_ani2;}


.fp-viewing-firstPage .fixed_tBox {top:19%; opacity:1; visibility:visible; transition:all 0.5s ease;}
.fp-viewing-secondPage .fullpage-wrapper::after {opacity:1; visibility:visible; transition:all 0.5s ease;}
.fp-viewing-3rdPage .fullpage-wrapper::after {opacity:1; visibility:visible; transition:all 0.5s ease;}


.fp-viewing-3rdPage .header {opacity:0;}
.fp-viewing-lastPage .header .header_in .save_logo .up {fill:var(--black);}






@keyframes ani_scale {
	0% {
		transform:scale(1.3);
	}
	100% {
		transform:scale(1);
	}
}


@keyframes ani_eff {
	0% {
		transform:translateY(70px); opacity:0;
	}
	100% {
		transform:translateY(0); opacity:1;
	}
}

@keyframes txt_ani {
	0% {
		transform: rotate(-4deg) scaleX(0);
	}
	100% {
		transform: rotate(-4deg) scaleX(1);
	}
}
@keyframes txt_ani2 {
	0% {
		transform: rotate(1deg) scaleX(0);
	}
	100% {
		transform: rotate(1deg) scaleX(1);
	}
}



.people_list {display: grid;  grid-template-columns: repeat(3, 1fr); grid-gap:30px;}
.people_list dl {position:relative; display:flex; flex-wrap:wrap; align-content:space-between; gap:26px 0; border-radius:30px; overflow:hidden; aspect-ratio: 3 / 3.3489; padding:55px 50px; box-sizing:border-box; transition:all 0.4s ease; opacity:0;}
#section02.action .people_list dl:nth-of-type(1) {animation: Items 0.3s 0.2s ease-in forwards;}
#section02.action .people_list dl:nth-of-type(2) {animation: Items 0.3s 0.4s ease-in forwards;}
#section02.action .people_list dl:nth-of-type(3) {animation: Items 0.3s 0.6s ease-in forwards;}
.people_list dl::after {content:''; width:4em; height:4em; background: rgba(0, 0, 0, 0.60); backdrop-filter: blur(4px); position:absolute; bottom:2em; left:2em; border-radius:100%; transition:all 0.4s ease; opacity:0;}
.people_list dl:hover::after {transform:scale(15); opacity:1; transition:all 0.4s ease;}
.people_list dl:nth-of-type(1) {background:url("/assets/img/intro/people_bg01.jpg")no-repeat center / cover;}
.people_list dl:nth-of-type(2) {background:url("/assets/img/intro/people_bg02.jpg")no-repeat center / cover;}
.people_list dl:nth-of-type(3) {background:url("/assets/img/intro/people_bg03.jpg")no-repeat center / cover;}
.people_list dl dd {width:100%; color: var(--white); font-size: 1.1111rem; font-weight: 600; line-height: 160%; letter-spacing: -0.8px; position:relative; top:0; transform:translateY(0); transition:all 0.4s ease; z-index:10;}
.people_list dl dd span {display:block;font-size: 1rem; font-weight: 400; line-height:177.778%; letter-spacing: -0.72px;}
.people_list dl dt {width:100%; color: var(--white); font-family: var(--eng); font-size: 2.944rem; font-weight: 600; line-height:113.208%; letter-spacing: -2.65px; text-transform: uppercase; transition:all 0.4s ease; position:relative; bottom:0; transform:translateY(0); transition:all 0.4s ease;  z-index:10;}

.people_list dl:hover {/* align-content:center; transition:all 0.4s ease; */}
.people_list dl:hover dd {top:calc(50% - 13px); transform:translateY(-100%); transition:all 0.4s ease;}
.people_list dl:hover dt {color:var(--main); transition:all 0.4s ease; bottom:calc(50% - 13px); transform:translateY(100%); transition:all 0.4s ease;}


@keyframes Items {
	0% {
		opacity: 0;
    transform: scale(0.3) rotateY(90deg);
	}
60% {
		transform: scale(1.3);
	}
90% {
		 transform: scale(1);
	}
	100% {
		opacity: 1;
	}
}




#section03, #section04 {position:relative; background:var(--white);}


/* .rotate img {transform:rotate(0);}
.rotate.on1 img {transform:rotate(10deg);} */


#section03 {background:url("/assets/img/intro/interview_bg.jpg")no-repeat center / cover;}
#section03 .fp-tableCell {display:flex; flex-wrap:wrap; }
#section03::before {content:''; width:0; height:var(--vh);  position:absolute; top:0; right:0; opacity: 0.2; background: var(--sub); transition:all 0.5s ease;}
#section03::after {content:''; width:0; height:var(--vh); position:absolute; top:0; right:0; opacity: 0.9; background: var(--sub); mix-blend-mode: color-burn; transition:all 0.5s ease;}
#section03.action::before, #section03.action::after {width:50%; transition:all 0.5s 0.3s ease;}
#section03 .left_cont {position:relative; width:50%; height:100%; padding-left:calc((100% - 1350px) / 2); box-sizing:border-box; overflow:hidden;}
#section03 .tBox {width:100%; height:100%; position:relative; z-index:10; padding-top:7vw; box-sizing:border-box;}
#section03 .tBox::before {content:''; width:80px; height:53px; background:url("/assets/img/intro/quotes_L.svg")no-repeat center; position:relative; display:block; margin:0 0 30px; }
#section03 .right_cont .tBox::before {background:url("/assets/img/intro/quotes_R.svg")no-repeat center; margin:0 0 30px auto;}
#section03 .tBox .fs20 {margin:0 0 17px;}
#section03 .interviewer_profile {position:absolute; bottom:88px; left:0; transform:translateY(50px); opacity:0; z-index:10;}
#section03 .interviewer_profile .fs26 {margin:12px 0 0;}
#section03 .left_cont .tBox {transform:translate(-50px,0); opacity:0;}
#section03 .left_cont .interviewer {position:absolute; bottom: -12px;right: -155px; z-index:-1; transform:translate(50%,0); opacity:0;}
#section03 .left_cont .interviewer_profile  {left:50%; margin-left:-195px;}
#section03 .right_cont {width:50%; height:100%; padding-right:calc((100% - 1350px) / 2); box-sizing:border-box; overflow:hidden; position:relative; z-index:90;}
#section03 .right_cont .tBox {text-align:right; transform:translate(50px,0); opacity:0;}
#section03 .right_cont .tBox .fs20 {color:rgba(255,255,255,0.8);}
#section03 .right_cont .tBox .fs45 {color: var(--white);}
#section03 .right_cont .interviewer {position:absolute; bottom:-55px; left:-125px; z-index:-1; transform:translate(-50%,0); opacity:0;}
#section03 .right_cont .interviewer_profile  {left:auto; right:50%; margin-right:-195px;}
#section03 .right_cont .interviewer_profile .fs20 {color:rgba(255,255,255,0.7);}
#section03 .right_cont .interviewer_profile .fs26 {color:var(--white);}

#section03.action .tBox {transform:translate(0) !important; opacity:1;  transition:all 0.5s 0.7s ease-in;}
#section03.action .interviewer {transform:translate(0) !important; opacity:1;  transition:all 0.5s 0.5s ease;}
#section03.action .interviewer_profile {transform:translateY(0); opacity:1;  transition:all 0.5s 0.9s ease-in;}



#section03 .left_cont .tBox .line_ani {display:inline-block; position:relative; z-index:10; color:var(--main);}
#section03 .left_cont .tBox .line_ani::after {content:'';  position:absolute; top:10%; left:0; width:100%; height:80%; border-radius: 5px; opacity: 0.1; background: var(--main); transform: rotate(1deg) scaleX(0);  z-index:-1;}
#section03.action .left_cont .tBox .line_ani::after {animation:0.5s ease 0.4s forwards txt_ani2;}
#section03.action .left_cont .tBox .line_ani:last-of-type::after {animation:0.5s ease 0.8s forwards txt_ani2;}
#section03 .right_cont .tBox .line_ani {display:inline-block; position:relative; z-index:10;}
#section03 .right_cont .tBox .line_ani::after {content:'';  position:absolute; top:10%; left:0; width:100%; height:80%; border-radius: 5px; background: var(--main); transform: rotate(1deg) scaleX(0); z-index:-1;}
#section03.action .right_cont .tBox .line_ani::after {animation:0.5s ease 0.4s forwards txt_ani2;}





#section04 {position:relative;}
#section04::after {content:''; width:100%; height:100%; background:url("/assets/img/intro/activity_bg.jpg")no-repeat center / cover;  position:absolute; top:0; left:0; transform:scale(1.3); transition:all 1s ease;}
#section04.action::after {transform:scale(1); transition:all 2s 0.3s ease;}
#section04 .tBox {position:relative; z-index:10; text-align:center; margin:0 0 50px;  transform:translateY(70px); opacity:0; transition:all 0.5s ease;}
#section04.action .tBox {transform:translateY(0); opacity:1; transition:all 0.5s 0.4s ease;}
#section04 .tBox .fs60 {max-width:650px; margin:0 auto; text-align:left !important;}
#section04 .tBox .fs60 * {font-family:inherit; line-height:inherit; letter-spacing:inherit; font-weight:bold;}
#section04 .tBox .fs60 .red {position:relative; z-index:10; color:var(--white);}
#section04 .tBox .fs60 .red::after {content:''; width:110%; height:110%; background:var(--main); position:absolute; top:-5%; left:-5%; z-index:-1;}
#section04 .tBox .fs60 p:last-of-type {padding-left:110px; box-sizing:border-box; position:relative; z-index:10;}
#section04 .tBox .fs60 .white {position:relative;}
#section04 .tBox .fs60 .white::after {content:''; width:105%; height:100%; background:var(--white); position:absolute; top:0; left:-2.5%; z-index:-1; transform: rotate(3deg);}
#section04 .tBox .fs24 {margin:40px 0 0;}
#section04 .tBox .fs24 .txt_ani {display:inline-block; position:relative; font-weight:700;}
#section04 .tBox .txt_ani::after {content:''; width:105%; height:80%; background:var(--white); position:absolute; top:10%; left:-2.5%; z-index:-1; transform: rotate(0.5deg);}
#section04 .activity_list {display: grid;  grid-template-columns: repeat(2, 1fr); grid-gap:30px; transform:translateY(70px); opacity:0;  transition:all 0.5s ease; z-index:99; position:relative;}
#section04.action .activity_list {transform:translateY(0); opacity:1;  transition:all 0.5s 0.6s ease;}
#section04 .activity_list dl {position:relative; z-index:10;}
#section04 .activity_list dl::after {content:''; width:100%; height:50px; border-radius:100%; opacity: 0.5; background: radial-gradient(50% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.00) 94.61%); position:absolute; bottom:0; left:50%; transform:translate(-50%,50%); z-index:-1;}


#section04 .activity_list dl a {display:block; width:100%; height:100%; border-radius:30px; overflow:hidden; position:relative;}
#section04 .activity_list dl a::before {content:''; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; border-radius: 30px; opacity: 0.6; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);}
#section04 .activity_list dl a::after {content:''; width:calc(100% - 20px); height:calc(100% - 20px);  border-radius: 30px; border: 1px dashed var(--white); opacity: 0.2; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}


#section04 .activity_list dl .in {position:relative;}
#section04 .activity_list dl .in::before {content:''; width:100%; height: 140%; position:absolute; top:0; left:0; background:url("/assets/img/intro/wave_bg.png")no-repeat top center / 100% auto; z-index:99; transform: translateY(120%); transition:all 0.5s ease;}
#section04 .activity_list dl .in dt {}
#section04 .activity_list dl .in dt img {max-width:100%;}
#section04 .activity_list dl .in dd {position:absolute; bottom:-125px; text-align: center; left:0; z-index:100; width:100%; height:100%; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; transition:all 0.5s ease;}
#section04 .activity_list dl .in dd .sm-tit {width:100%; color: var(--white); font-family: var(--eng); font-size: 1.1111rem; color:var(--white); font-style: normal; font-weight: 400; line-height:170%; letter-spacing: -1px;}
#section04 .activity_list dl .in dd .fs35 {width:100%; color: var(--white); font-family: var(--eng); font-size: 1.9444rem; font-weight: 400; line-height:214.286%; letter-spacing: -1.75px; text-transform: uppercase;}
#section04 .activity_list dl .in dd .btn {display:block; width: 75px; height: 75px; border-radius: 15px; border: 2px solid var(--white); box-sizing:border-box; margin:23px auto 0;  text-align:center; opacity:0; transition:all 0.5s ease;}
#section04 .activity_list dl .in dd .btn::before {content:'\e0b2'; font-size:30px; font-family:var(--icon); line-height:73px;  color:var(--white);}


#section04 .activity_list dl:hover .in::before {transform: translateY(-20%); transition:all 0.5s ease;}
#section04 .activity_list dl:hover .in dd {bottom:0; transition:all 0.5s ease;}
#section04 .activity_list dl:hover .in dd .btn {opacity:1; transition:all 0.5s ease;}



















/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 


.people_list dl {padding:3vw;}
.people_list dl dt {font-size:3.5vw;}
.people_list dl dd {font-size:1.5vw;}


#section03 .left_cont {padding-left:5%;}
#section03 .right_cont {padding-right:5%;}

#section03 .left_cont .interviewer_profile {margin-left:0; left:10%;}
#section03 .right_cont .interviewer_profile {margin-right:0; right:10%;}

#section03 .tBox .fs45 {font-size:3.2vw;}


#section04 .activity_list dl .in dd {bottom:-38%;}
#section04 .activity_list dl .in dd .fs35 {font-size:1.688rem;}
#section04 .activity_list dl .in dd .btn {margin:15px auto 0; width:60px; height:60px; }
#section04 .activity_list dl .in dd .btn::before {line-height:58px; font-size:25px;}

}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 


}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 


.fs80 {font-size:3.666rem;}
.fs45 {font-size:2rem; letter-spacing:-1.15px;}
.fs30 {font-size:1.44rem;}
.fs26 {font-size:1.22rem;}

.people_list {grid-gap:15px;}


#section03 .left_cont {width:100%; height:50%; padding-left:5%;}
#section03 .right_cont {width:100%; height:50%; padding-right:5%;}


#section03::before {height:50%; top:auto; bottom:0;}
#section03::after {height:50%; top:auto; bottom:0;}
#section03.action::before, #section03.action::after {width:100%;}

#section03 .tBox {padding-top:10vw; width:70%;}
#section03 .tBox::before {width:40px; height:30px; background-size:100% auto !important; margin:0 0 10px;}
#section03 .tBox .fs45 {font-size:2rem;}
#section03 .tBox .fs20 {font-size:1rem;}
#section03 .tBox .fs20 br {display:none;}

#section03 .interviewer {height:100%; display:flex; flex-wrap:wrap; align-items:flex-end;}
#section03 .interviewer img {}
#section03 .left_cont .interviewer {right:-65px; justify-content:flex-end;}
#section03 .left_cont .interviewer img {max-height:100%; max-width:80%;}
#section03 .left_cont .interviewer_profile {left:5%;}


#section03 .right_cont .tBox {margin:0 0 0 auto;}
#section03 .right_cont .tBox::before {margin:0 0 10px auto;}
#section03 .right_cont .interviewer {bottom:-20px; left:-60px;}
#section03 .right_cont .interviewer img {max-height:100%; max-width:130%;}
#section03 .right_cont .interviewer_profile {right:5%;}


#section03 .interviewer_profile {bottom:20px;}
#section03 .interviewer_profile .fs20 {font-size:1rem;}


#section04 .activity_list {grid-gap:15px;}





}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 

.fs80 {font-size:2.666rem;}
.fs60 {font-size:2rem;}
.fs30 {font-size:1.2255rem; letter-spacing:-0.6px;}
.fs26 {font-size:1.111rem;}

.fixed_tBox .fs30 {margin:15px 0 0;}
.fixed_tBox .fs30 br {display:none;}


.header .header_in .top_util .save_logo {position:relative; top:0; left:0; margin-top:0;}

.people_list {grid-template-columns: repeat(1, 1fr);}
.people_list dl {aspect-ratio:auto; padding:25px; border-radius:10px; gap:50px 0;}
.people_list dl br {display:none;}
.people_list dl::after {display:none;}

.people_list dl dd {font-size:1.11rem;}
.people_list dl dt {font-size:1.66rem; letter-spacing:-1px; color:var(--white) !important;}

.people_list dl:hover dd {top:0; transform:translateY(0);}
.people_list dl:hover dt {bottom:0; transform:translateY(0);}


#section03 .tBox::before {width:30px; height:20px; }
#section03 .tBox .fs45 {font-size:1.5rem;}


#section04 .tBox {margin:0 0 25px;}
#section04 .tBox .fs60 {max-width:280px;}
#section04 .tBox .fs60 p:last-of-type {padding-left:45px;}
#section04 .tBox .fs24 {font-size:1.15555rem; margin:15px 0 0;}
#section04 .tBox .fs24 br {display:none;}
#section04 .activity_list {grid-template-columns: repeat(1, 1fr);}
#section04 .activity_list dl a {border-radius:10px;}
#section04 .activity_list dl a::before {border-radius:10px;}
#section04 .activity_list dl .in dd {bottom:-38%;}
#section04 .activity_list dl .in dd .fs35 {font-size:1.444rem;}
#section04 .activity_list dl .in dd .btn {margin:5px auto 0; width:34px; height:34px; border-radius:5px;}
#section04 .activity_list dl .in dd .btn::before {line-height:32px; font-size:16px;}


}