@import url('sub.css'); 

/***** S:: 변수 *****/
:root{



	/* 높이 */
	--vh: 100vh;


}
/***** E:: 변수 *****/




.header {}
.header .gnb ul li > a {color:var(--white);}
.header .header_in .top_util ul li a {color:rgba(255,255,255,0.7);}
.header .header_in .top_util ul li a::before {color:rgba(255,255,255,0.7);}
.header .header_in .save_logo svg .up {fill:var(--white);}
.header .header_in .top_util ul .btnMenu_m svg * {fill:var(--white);}

.basic_cont {overflow:visible; padding:0 !important;}

.ani_effect {transform:translateY(70px) !important; opacity:0; visibility:hidden; transition:all 0.3s ease;}
.ani_effect.action {transform:translateY(0) !important; opacity:1; visibility:visible; transition:all 0.3s 0.1s ease;}








.landing_wrap {margin-top:calc(var(--vh) * -1); position:relative; z-index:10;}
.landing_wrap .landing_tBox {position:sticky; top:0; width:100%; height:var(--vh); display:flex; flex-wrap:wrap; align-content:center; z-index:90;}
.landing_wrap .landing_tBox::after {content:'\ead0'; font-size:29px; font-family:var(--icon); color:var(--white); position:absolute; bottom:30px; left:50%; transform:translateX(-50%);}
.landing_wrap .landing_tBox .fs90 {color: var(--white); text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.80); font-family: var(--eng); font-size: 5rem; font-weight: bold; line-height:94.444%; letter-spacing: -4.5px; text-transform: uppercase;}
.landing_wrap .landing_tBox .fs30 {color: var(--white); font-family: var(--eng); font-size: 1.666rem; font-weight: bold; line-height:150%; letter-spacing: -1.5px; text-transform: uppercase; margin:23px 0 11px;}
.landing_wrap .landing_tBox .fs30 span {position:relative; display:inline-block; line-height:inherit; letter-spacing:inherit; font-family:inherit;}
.landing_wrap .landing_tBox .fs30 span::after {content:''; width:0; height:80%; background:var(--main); position:absolute; top:5%; left:0; z-index:-1;}
.landing_wrap .landing_tBox .fs30.aos-animate span:nth-of-type(1)::after {width:100%; transition:all 0.3s 0.4s ease;}
.landing_wrap .landing_tBox .fs30.aos-animate span:nth-of-type(2)::after {width:100%; transition:all 0.3s 0.6s ease;}
.landing_wrap .landing_tBox .fs30.aos-animate span:nth-of-type(3)::after {width:100%; transition:all 0.3s 0.8s ease;}


.landing_wrap .landing_tBox .fs20 {color: var(--white); text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.80); font-size: 1.11rem; font-weight: 400; line-height:160%; letter-spacing: -0.8px;}
.landing_wrap .landing_list {margin-top:calc(var(--vh) * -1);}
.hero-story {position:relative; display: flex; height: var(--vh); width:  100%;}
.hero-story .bg {position:absolute; bottom:50%; left:50%; width:100%; height:100%; transform:translate(-50%,50%);}
.hero-story .ani_bg {position:absolute; bottom:50%; left:50%; width:100%; height:100%; transform:translate(-50%,50%); z-index:10; opacity:0; overflow:hidden;}
.hero-story .ani_bg .ani_bg_in {width:100%; height:100%; background:url("/assets/img/crisis/img/intro_after_bg03.jpg")no-repeat bottom center / cover;}
#landing-page1 .bg {background:url("/assets/img/crisis/img/crisis_intro_bg01.jpg")no-repeat center / cover;}
#landing-page2 .bg {background:url("/assets/img/crisis/img/crisis_intro_bg02.jpg")no-repeat center / cover;}
#landing-page3 .bg {background:url("/assets/img/crisis/img/crisis_intro_bg03.jpg")no-repeat center / cover;}

.sticky_bg {position:sticky; top:0; width:100%; height:var(--vh); z-index:-1;}
.sticky_bg.bg01 {background:url("/assets/img/crisis/img/sticky_bg01.jpg")no-repeat center / cover;}
.crisis_wrap .crisis_about {/* margin-top:calc(var(--vh) * -1); position:relative; z-index:10; */}
.tit-box {margin:0 0 40px; text-align: center;}
.tit-box .fs50 {color: var(--black); font-family: var(--eng); font-size: 2.777rem; font-weight: bold; line-height:130%; letter-spacing: -2.5px; text-transform: uppercase;}

.crisis_list {}
.crisis_list .more_btn {border:0;}
.crisis_list .more_btn.ver2 em {line-height:75px;}
.crisis_list .more_btn.ver2 em:after {content:'\e89e'; font-size:30px; background:transparent; font-weight:300; line-height:1; font-family:var(--icon); color:var(--white);}
.crisis_list .more_btn:hover:before{animation:light2 1.4s infinite;}
.crisis_list ul {display: grid;  grid-template-columns: repeat(5, 1fr);}
.crisis_list ul li {text-align:center;}
.crisis_list ul li .img {display:block; overflow:hidden;}
.crisis_list ul li .img img {width:100%;}
.crisis_list ul li .fs25 {color: var(--main); font-family: var(--eng); font-size: 1.3888rem; font-weight: bold; line-height:140%; letter-spacing: -1.25px; text-transform: uppercase; margin:20px 0 10px;}
.crisis_list ul li .stxt {color: var(--sub); font-size: 1.11rem; font-weight: 400; line-height:160%; letter-spacing: -0.8px;}

.crisis_list ul li:first-of-type .img {border-radius:30px 0 0 30px;}
.crisis_list ul li:last-of-type .img {border-radius:0 30px 30px 0;}



@-webkit-keyframes shake-lr {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  10% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  80% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);
  }
  90% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
}
@keyframes shake-lr {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  10% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  80% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);
  }
  90% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
}




.title_sticky {position:relative; top:20%; width:90vw; text-align:center; margin:0 auto; transform:translateY(-50%);}
.title_sticky .fs60 {display:inline-block;}
.title_sticky .fs60 span {line-height:inherit; letter-spacing:inherit; font-family:inherit; color:var(--white); position:relative; z-index:1;}
.title_sticky .fs60:first-of-type {}
.title_sticky .fs60:first-of-type span {}
.title_sticky .fs60:first-of-type span::after {content:''; width:120%; height:100%; position:absolute; top:0; left:-10%; z-index:-1; background:var(--main);}
.title_sticky .fs60:last-of-type {position:relative; top:35px; padding-left:20px;}
.title_sticky .fs60:last-of-type span {z-index:10;}
.title_sticky .fs60:last-of-type span::after {content:''; width:105%; height:120%; position:absolute; top:-10%; left:-5%; z-index:-1; background:var(--black); transform: rotate(2deg);}


.crisis_roll_wrap .title_sticky .fs60:first-of-type span::after {transform: scaleY(-1); opacity:0;}
.crisis_roll_wrap .title_sticky .fs60:last-of-type span::after {transform: scaleY(-1); opacity:0;}
.crisis_roll_wrap .title_sticky.action .fs60:first-of-type span::after { transform: scaleY(1); opacity:1; transition:all 0.3s 0.2s ease;}
.crisis_roll_wrap .title_sticky.action .fs60:last-of-type span::after { transform: scaleY(1); opacity:1; transition:all 0.3s 0.3s ease;}


.vertical-caption {width:calc(100% - 150px);}
.horizontal_bg {background:url("/assets/img/crisis/img/privilege_bg.jpg")no-repeat center / cover; height:var(--vh); width:100%; position:sticky; top:0;}
.horizontal_bg svg {display:block; line-height:1; height:auto;}
.horizontal_bg .one {position:absolute; bottom:-20px; left:0; opacity:0; visibility:hidden; transform:translate(-80%,80%);}
.horizontal_bg .one svg {animation: shake-lr 8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite;}
.horizontal_bg .two {position:absolute; top:0; right:0; opacity:0; visibility:hidden; transform:translate(0%,-100%);}
.horizontal_bg .three {position:absolute; bottom:-20px; right:0; opacity:0; visibility:hidden; transform:translate(0,100%);}

#horizontal {}
#horizontal.action .horizontal_bg .one {opacity:1; visibility:visible; transform:translate(0%,0%); transition:all 0.8s  ease;}
#horizontal.action .horizontal_bg .two {opacity:1; visibility:visible; transform:translate(0%,0%); transition:all 0.8s  ease;}
#horizontal.action .horizontal_bg .three {opacity:1; visibility:visible; transform:translate(0%,0%); transition:all 0.8s  ease;}

#horizontal .title_sticky .fs60 span {color:var(--black);}
#horizontal .title_sticky .fs60:first-of-type span::after {transform: scaleY(-1); opacity:0;}
#horizontal .title_sticky .fs60:last-of-type span::after {transform: scaleY(-1); opacity:0;}
#horizontal.action .title_sticky .fs60 span {color:var(--white);}
#horizontal.action .title_sticky .fs60:first-of-type span::after { transform: scaleY(1); opacity:1; transition:all 0.3s ease;}
#horizontal.action .title_sticky .fs60:last-of-type span::after { transform: scaleY(1); opacity:1; transition:all 0.3s ease;}



.horizontal {margin-top:calc(var(--vh) * -1); overflow:hidden;}
.horizontal .pin-wrap {flex-direction: column;}
.horizontal .pin-wrap,  .horizontal .animation-wrap {display: flex; position: relative; z-index: 1; /* height: var(--vh); */}
.horizontal .animation-wrap {display: flex; padding-left:calc((100% - 1350px) / 2); padding-right:calc((100% - 1350px) / 2); box-sizing:border-box; position: relative; z-index: 1; height:  var(--vh);}

.privilege_con {padding-left:180px; box-sizing:border-box; display:flex; flex-wrap:wrap; align-content:center;}
.privilege_con:first-of-type {padding-left:0;}

.privilege_con ul {display:flex; flex-wrap:nowrap; margin:30px 0 0;}
.privilege_con ul li {position:relative; border-radius:30px; overflow:hidden; width:430px; min-height:340px; display:flex; flex-wrap:wrap; align-content:center;}
.privilege_con ul li+li {margin-left:30px;}
.privilege_con ul li img {display: block; width: 100%; height: 100%; object-fit: cover;}
.privilege_con ul li.border-box::after {content:''; width:calc(100% - 20px); height:calc(100% - 20px); border:1px dashed var(--border); box-sizing:border-box; position:absolute; top:50%; left:50%; border-radius:30px; transform:translate(-50%,-50%);}
.privilege_con ul li.border-box {padding:50px 35px; box-sizing:border-box; background: rgba(255, 255, 255, 0.80);}
.privilege_con ul li.border-box .box-in {position:relative; z-index:10;}
.privilege_con ul li.border-box .box-in::before {content:''; width:20px; height:17px; background:url("/assets/img/crisis/img/quotes.png")no-repeat center; display:block; position:relative; margin:0 0 15px;}
.privilege_con ul li.border-box .box-in .fs20 {color: var(--black); font-size: 1.11rem; font-weight: 600; line-height: 160%; letter-spacing: -0.8px;}
.privilege_con ul li.border-box .box-in .fs20 .red {color:var(--main); line-height:inherit; font-weight:inherit; letter-spacing:inherit;}
.privilege_con ul li.border-box .box-in .fs14 {display:block; font-size: 0.77rem; line-height:142.857%; letter-spacing: -0.7px; margin:15px 0 0;}









.roll_tit_box {text-align:center;}
.roll_tit_box .fs20 {font-weight: 600; line-height: 160%; margin:25px 0 0}
.roll_tit_box .fs20 b {font-size: 1.444rem; font-weight: 800; line-height: inherit; letter-spacing: -1.04px;}
.crisis_roll_wrap {margin-top:calc(var(--vh) * -1); padding:215px 0;}
.crisis_roll_wrap .title_sticky {width:100%; top:-30px;}

.crisis_roll_cont {position:relative; overflow:hidden; margin:60px 0 0; padding-bottom:70px !important;}
.crisis_roll_cont+.crisis_roll_cont {margin:100px 0 0;}
.crisis_roll_cont .tBox {width:460px; position:relative; z-index:90;}
.crisis_roll_cont .tBox .percent {position:absolute; top:50%; margin-top:-82px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;  width:140px; color: var(--white); font-family: var(--eng); font-size: 2.5rem; font-weight: 400; line-height:122.222%; letter-spacing: -2.25px; text-transform: uppercase; aspect-ratio: 3 / 3.5145; background:url("/assets/img/crisis/img/percent_bg.svg")no-repeat center / contain; font-style:normal; text-align:center;}
.crisis_roll_cont.ver1 .tBox .percent {right:-62px;}
.crisis_roll_cont.ver2 .tBox .percent {left:-62px;}

.crisis_roll_cont.ver2 .tBox {margin:0 0 0 auto; text-align:right; padding:57px 0 45px;}
.crisis_roll_cont .tBox .fs45 {color: var(--black); font-family: var(--eng); font-size: 2.5rem; font-weight: bold; line-height:133.333%; letter-spacing: -2.25px;}
.crisis_roll_cont .tBox .fs16 {font-size: 0.88rem; font-weight: bold; line-height: 150%; letter-spacing: -0.64px; opacity: 0.9; margin:20px 0 0;}
.crisis_roll_cont .crisis_roll {position:absolute; top:0; width:100%; z-index:1; }
.crisis_roll_cont.ver1 .crisis_roll {left: calc((100% - 1350px) / 2); padding-left: 460px;}
.crisis_roll_cont.ver2 .crisis_roll {right: calc((100% - 1350px) / 2); padding-right: 460px; }
.crisis_roll_cont .crisis_roll .slick-list {margin-left:-30px;}
.crisis_roll_cont.ver2 .crisis_roll .slick-list {transform: scaleX(-1);}
.crisis_roll_cont .crisis_roll .slick-track {padding-bottom:70px !important;}
.crisis_roll_cont .crisis_roll li {display:block; overflow: hidden; aspect-ratio: 3 / 2.1606; border-radius:30px; margin-left:30px; position:relative;}
.crisis_roll_cont .crisis_roll li:nth-of-type(2n) {top:60px;}
.crisis_roll_cont .crisis_roll li img {display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2.1606;}
.crisis_roll_cont.ver2 .crisis_roll li img {transform: scaleX(-1);}

.line-tit-box {text-align:center; margin:90px 0 0;}
.line-tit-box .fs45 {position:relative; display:inline-block; color: var(--white); font-family: var(--eng); font-size: 2.5rem; font-weight: 300; line-height:133.333%; letter-spacing: -2.25px; text-transform: uppercase; z-index:10;}
.line-tit-box .fs45::after {content:''; width:0; height:100%; background:var(--main); position:absolute; top:0; left:0; z-index:-1; transition:all 0.3s 0.2s ease;}
.line-tit-box.action .fs45::after {width:100%; transition:all 0.3s 0.2s ease;}
.line-tit-box .fs45 b {font-weight:bold; letter-spacing:inherit; line-height:inherit;}

.club_apply_cont {text-align: center; position:relative; z-index:10;}
.club_apply_cont::before {content:''; width:100%; height:calc(100% + 100px); background:url("/assets/img/assemble/img/paper_bg2.png") no-repeat center top / cover; position:absolute; top:-100px; left:0; z-index:1; opacity:0; transform:translateY(50%);}
.club_apply_cont::after {content:''; width:100%; height:calc(100% + 100px); background:url("/assets/img/assemble/img/paper_bg1.png") no-repeat center top / cover; position:absolute; top:-100px; left:0; z-index:2; opacity:0; transform:translateY(50%);}
.club_apply_cont.action::before {opacity:1; transform:translateY(0); transition:all 0.7s ease;}
.club_apply_cont.action::after {opacity:1; transform:translateY(0); transition:all 0.7s 0.2s ease;}


.club_apply_cont .w1350 {position:relative; z-index:10;}
.club_apply_cont .fs50 {color: var(--black); font-family: var(--eng); font-size: 2.777rem; font-weight: bold; line-height:130%; letter-spacing: -2.5px; text-transform: uppercase;}
.club_apply_cont .fs20 {color: var(--black); font-size: 1.11rem; font-weight: 600; line-height:160%; letter-spacing: -0.8px; margin:16px 0 0;}










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


.crisis_list ul li br {display:none;}
.crisis_list ul li .stxt {padding:0 5px; box-sizing:border-box;}


.horizontal .animation-wrap {padding-left:5%; padding-right:5%;}


.crisis_roll_cont.ver1 .crisis_roll {left: 5%; padding-left: 460px;}
.crisis_roll_cont.ver2 .crisis_roll {right:5%; padding-right: 460px; }

.horizontal_bg .one svg {max-width:40vw;}
.horizontal_bg .two svg {max-width:70vw;}
.horizontal_bg .three svg {max-width:70vw;}



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


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


.landing_wrap .landing_tBox .fs90 {font-size:4rem;}
.landing_wrap .landing_tBox br {display:none;}

.tit-box .fs50 {font-size:2.222rem;}


.crisis_list .more_btn.ver2 em {line-height:65px;}
.crisis_list .more_btn.ver2 em:after {font-size:22px;}

.crisis_roll_cont {padding-bottom:0 !important;}
.crisis_roll_cont+.crisis_roll_cont {margin:70px 0 0;}
.crisis_roll_cont .w1350 {display:flex; flex-wrap:wrap;}
.crisis_roll_cont .tBox {order:1; width:100%; text-align:center !important; margin:0 0 50px !important; padding:0 !important;}
.crisis_roll_cont .tBox .percent {width:70px; font-size:1.444rem; top:auto; bottom:-90px; left:auto !important; right:-15px !important; letter-spacing:-1.5px;}
.crisis_roll_cont .tBox .fs45 {font-size:1.888rem;}
.crisis_roll_cont .tBox .fs16 {margin:15px 0 0;}
.crisis_roll_cont .tBox br {display:none;}
.crisis_roll_cont .crisis_roll {position:relative; width:100%; margin:0 auto; order:2; }
.crisis_roll_cont.ver1 .crisis_roll {left: 0; padding-left: 0;}
.crisis_roll_cont.ver2 .crisis_roll {right:0; padding-right: 0; }
.crisis_roll_cont .crisis_roll .slick-list {margin-left:-15px;}
.crisis_roll_cont .crisis_roll li {margin-left:15px;}
.crisis_roll_cont .crisis_roll li:nth-of-type(2n) {top:35px;}
.crisis_roll_cont .crisis_roll .slick-track {padding-bottom:35px !important;}


.crisis_roll_cont.ver2 .crisis_roll .slick-list {transform: scaleX(1);}
.crisis_roll_cont.ver2 .crisis_roll li img {transform: scaleX(1);}

.line-tit-box .fs45 {font-size:1.888rem;}


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

.landing_wrap .landing_tBox {text-align:center;}
.landing_wrap .landing_tBox .fs90 {font-size:2.88rem;}
.landing_wrap .landing_tBox .fs30 {font-size:1.33rem; letter-spacing:-0.8px;}


.tit-box {margin:0 0 20px;}
.tit-box br {display:none;}
.tit-box .fs50 {font-size:1.6666rem; letter-spacing:-1.2px;}

.crisis_list ul {display:flex; flex-wrap:wrap;}
.crisis_list ul li {width:50%;}
.crisis_list ul li:nth-of-type(-n+3) {width:33.33%; margin-bottom:30px;}
.crisis_list ul li:first-of-type .img {border-radius:10px 0 0 10px;}
.crisis_list ul li:last-of-type .img {border-radius:0 10px 10px 0;}
.crisis_list ul li:nth-of-type(3) .img {border-radius:0 10px 10px 0;}
.crisis_list ul li:nth-of-type(4) .img {border-radius:10px 0 0 10px;}
.crisis_list ul li .fs25 {font-size:1.155rem; margin:12px 0 5px;}

.crisis_list .more_btn.ver2 {padding:10px 35px 10px 15px; height:auto;}
.crisis_list .more_btn.ver2 em {line-height:1.7; white-space:normal;}
.crisis_list .more_btn.ver2 em:after {font-size:20px; right:-20px;}



.title_sticky .fs60:last-of-type {display:block; top:10px; padding-left:10px;}

.vertical-caption {width:calc(100% - 70px);}
.privilege_con {padding-left:100px;}
.privilege_con ul li {width:320px; min-height:240px; border-radius:15px;}
.privilege_con ul li.border-box {margin-left:15px; padding:30px 35px;}
.privilege_con ul li.border-box::after {border-radius:15px;}
.privilege_con ul li.border-box .box-in .fs14 {margin:10px 0 0;}


.roll_tit_box br {display:none;}
.roll_tit_box .fs20 {margin:15px 0 0;}

.crisis_roll_cont {margin:30px 0 0;}
.crisis_roll_wrap {padding:150px 0 150px;}
.crisis_roll_cont .tBox .fs45 {font-size:1.4444rem; letter-spacing:-1.25px;}
.crisis_roll_cont .tBox .fs16 {margin:10px 0 0;}
.crisis_roll_cont .crisis_roll li {border-radius:15px; aspect-ratio: unset; padding-top:calc(100% / 16 * 1.8); position:relative;}
.crisis_roll_cont .crisis_roll li img {position:absolute; top:0; left:0; aspect-ratio: unset;}
.crisis_roll_cont .crisis_roll li:nth-of-type(2n) {top:0;}
.crisis_roll_cont .crisis_roll .slick-track {padding-bottom:0 !important;}
.crisis_roll_cont .tBox .percent {width: 55px;font-size: 1.111rem;top:auto;bottom:-78px;left:auto !important;right:-10px !important;letter-spacing:-1.5px;}

.line-tit-box {margin:45px 0 0;}
.line-tit-box .fs45 {font-size:1.4444rem; letter-spacing:-1.5px;}


.club_apply_cont::before {height:calc(100% + 70px); top:-70px;}
.club_apply_cont::after {height:calc(100% + 70px); top:-70px;}

.club_apply_cont .fs50 {font-size:1.666rem; letter-spacing:-1.5px;}

}