@import url("common.css");


html, body {overflow-x:hidden;}


/*** css 공통 ***/
/* 텍스트 */
.sm_tit {color: var(--main); font-family: var(--eng); font-size: 14px; font-weight: 700; line-height:171.429%; letter-spacing: 0.7px; text-transform: uppercase;}
.fs70 {font-family: var(--eng); font-size: 3.888rem; font-weight: 600; line-height: 135.714%; letter-spacing: -1.4px; text-transform: uppercase; color:var(--black);}
.fs20 {font-size:1.11rem; line-height:160%; letter-spacing: -0.8px;}
.stxt {letter-spacing: -0.72px;}


.tit_wrap {position:relative; margin:0 0 40px; display:flex; flex-wrap:wrap; align-items:center; gap:0 50px;}
.tit_wrap .tit_cont {}
.tit_wrap .tit_cont .sm_tit {}
.tit_wrap .tit_cont .fs70 {}
.tit_wrap .stxt {}
.tit_wrap .moreBtn {position:absolute; top:50%; right:0; transform:translateY(-50%);}


/* 버튼 */
.moreBtn {display:flex; flex-wrap:Wrap; align-items:center; justify-content:space-between; width:135px; color: var(--black); font-family: var(--eng); font-size: 0.777rem; font-weight: 700; line-height: 1; letter-spacing: 0.7px; text-transform: uppercase;}
.moreBtn::after {content:''; width:31px; height:16px; background:url("/resources/img/next.svg")no-repeat center; display:block; position:relative; }
.moreBtn.w_ver {color: var(--white);}
.moreBtn.w_ver::after {background:url("/resources/img/next_w.svg")no-repeat center;}

/* 화살표 */
.slick-arrow {border:0; padding:0; font-size:0; outline:none; cursor:pointer; display:block; transition:all .3s linear; position: absolute; z-index: 9999; background:transparent;}
.slick-arrow::before {content:'\e5e1'; font-size:50px; font-family:var(--icon); font-weight:300; color:var(--basic);}
.slick-prev {transform: scaleX(-1);}
.slick-next {}




/* CURSOR */
#cursor {position:absolute; width:125px; height:76px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; transition:all 0.1s linear; pointer-events: none; z-index:9999999999999999999999 !important; opacity:0; visibility:hidden; transform:scale(0.5); gap:0 4px;}
#cursor i {display:block;}
#cursor i.left {transform: scaleX(-1);}
#cursor i::before {content:'\e5e1'; font-style:normal; font-size:20px; font-weight:200; color:var(--white); font-family:var(--icon);}
#cursor span {position:relative; display:block; width:76px; height:76px;  text-align:center; line-height:76px; font-family: var(--eng); font-size: 0.77rem; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase;  color:var(--white);}
#cursor span::after {content:''; width:100%; height:100%;  background-color:var(--main); background-image: url("/resources/img/cursor.png"); position:absolute ; top:0; left:0; border-radius:100%; z-index:-1; background-blend-mode : multiply; opacity:0.8;     background-repeat: no-repeat; background-position: center;}
#cursor.on { opacity:1; visibility:visible;transform:scale(1);  /* transition:all 1s; */}
/* CURSOR */





/*** Visual ***/
#visual{width:100%; height: var(--vh); overflow: hidden; background:#000; position: relative;}
#visual .visual_in{width: 100%; height: 100%; position: relative;}
#visual .visual_in .roll{width: 100%; height: var(--vh);}
#visual .visual_in .roll .v_txt {position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%); text-align:center; z-index: 9999; }
#visual .visual_in .roll .v_txt p {color: var(--white); font-size: 1.11rem; font-weight: 400; line-height: 160%; letter-spacing: -0.8px; margin-bottom:10px; transition:all .6s 0.3s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_txt h2 {color: var(--white); text-align:center; font-family: var(--eng); font-size: 3.888rem; font-weight: 600; line-height: 135.714%; letter-spacing: -1.4px; text-transform: uppercase; transition:all .6s 0.6s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg .bg{width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}
/* #visual .visual_in .roll .v_bg .jarallax{position: relative; width: 100%; height:100%; opacity: .7;}
#visual .visual_in .roll .v_bg .jarallax iframe{position: absolute;} */

/* 스크롤 */
#visual .scroll_down{position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index: 9999;}
#visual .scroll_down span{display:block;}
#visual .scroll_down span:after{content:'\ead0'; font-size:29px; display:block; font-family:var(--icon); color:var(--white); animation:scroll_down 1.5s linear infinite; }


@keyframes scroll_down {
	0%,100% { transform:translateY(-10px); opacity: 1;}
	50% { transform:translateY(10px); opacity: 0.5;}
}

@keyframes fadeIn {
	0% { opacity: 0;}
	100% {opacity: 1;}
}


/* 화살표 */
#visual .slick-arrow{opacity:1; top:50%; margin-top:-25px;}
#visual .slick-arrow::before {color:var(--white);}
#visual .slick-arrow:hover{opacity: 0.5;}
#visual .slick-prev{left:5%;}
#visual .slick-next{right: 5%;}


/* 도트 */
#visual .slick-dots{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 15px; position: absolute; left: 50%; bottom:105px; transform:translate(-50%,0); z-index: 9999; opacity: 0; animation:fadeIn 0.6s 1s linear forwards;}
#visual .slick-dots li{display:inline-block; vertical-align:top; width:9px; height:9px; border:2px solid transparent; box-sizing:border-box; cursor:pointer; transition:all .3s linear; border-radius:100%; position: relative; background:rgba(255,255,255,0.5);}
#visual .slick-dots li.slick-active{width:13px; height:13px; border-color:white; background:transparent;}

#visual .slick-dots li button{border:0; padding:0; font-size:0; outline:none; cursor:pointer; width:100%; height:100%; display:block; background:transparent; border:0;}


/* 효과 */
#visual .visual_in .roll.action .v_bg .bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
#visual .visual_in .roll.action .v_txt h2{transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt p{transform:translateY(0); opacity:1;}





#business {max-width:1320px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:flex-end; width:90%;}
#business .imgBox {position:relative; width:510px; overflow: hidden; aspect-ratio: 3 / 4;}
#business .imgBox span {display:block; width: 100%; height: 100%; position:absolute; top:0; left:0; opacity:0; visibility:hidden; transform:scale(1.15); transition:all 1.5s ease;}
#business .imgBox span img {display: block; width: 100%; height: 100%; object-fit: cover;}
#business .imgBox span.on {opacity:1; visibility:visible; transform:scale(1); transition:all 1.5s ease;}
#business .txtBox {width:calc(100% - 510px); padding-left:165px; padding-bottom:50px; box-sizing:border-box;}
#business .txtBox .fs20 {margin:0 0 125px; text-align:right;}
#business .txtBox .busi_list {width:100%; margin:80px 0 0;}
#business .txtBox .busi_list li {position:relative; color: var(--black); font-family: var(--eng); font-size: 3.888rem; font-weight: 600; line-height:135.714%; letter-spacing: -1.4px; text-transform: uppercase; cursor:pointer;}
#business .txtBox .busi_list li a {font-family:inherit; font-size:inherit; font-weight:inherit; line-height:inherit; letter-spacing:inherit;}
#business .txtBox .busi_list li+li {margin:5px 0 0;}

#business .txtBox .busi_list li::before {content: ""; display: block; height: 1px; left: 0; position: absolute;  width: 0; z-index: 1; bottom:0px; background:var(--black); transition:all 0.3s linear;}
#business .txtBox .busi_list li.tab_up::before {width:100%; transition:all 0.3s linear;}
#business .txtBox .busi_list li::after {content:''; width:31px; height:16px; background:url("/resources/img/next.svg")no-repeat center; position:absolute; top:50%; right:0; opacity:0; visibility:hidden; margin-top:-8px;  transition:all 0.3s linear;}
#business .txtBox .busi_list li.tab_up::after {opacity:1; visibility:visible; right:20px;  transition:all 0.3s linear;}

#business .txtBox .busi_list li span {font-family: 'Pretendard', sans-serif; font-size: 1.11rem; font-weight: 400; line-height: 160%; letter-spacing: -0.8px; display:inline-block; margin-left:10px; opacity:0; visibility:hidden; transition:all 0.3s linear;}
#business .txtBox .busi_list li.tab_up span {opacity:1; visibility:visible; transition:all 0.3s linear;}






#banner {display: grid;  grid-template-columns: repeat(2, 1fr);  gap:60px;}
#banner dl {}
#banner dl:last-of-type {margin-top:170px;}
#banner dl dt {overflow:hidden; position:relative; z-index:10;}
#banner dl dt::after {content:''; width:6rem; height:6rem; border-radius:100%; background:var(--main); position:absolute; top:50%; left:50%; margin:-3rem 0 0 -3rem; z-index:-1; transition:all 0.3s linear;}
#banner dl dt i {position:absolute; top:30px; right:30px; color: var(--white); font-family: var(--eng); font-size: 0.77rem; font-style: normal; font-weight: 700; line-height:171.429%; letter-spacing: 0.7px; text-transform: uppercase; z-index:10;}
#banner dl dt .img {display:block;}
#banner dl dt img {width:100%; display:block;  transition:all 0.3s linear;}
#banner dl dd {position:relative; color: var(--black); font-size: 1.666rem; font-weight: 500; line-height:166.667%; letter-spacing: -1.2px; margin:15px 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; transition:all 0.3s linear;}
#banner dl dd::after {content:''; width:31px; height:16px; background:url("/resources/img/next.svg")no-repeat center; transition:all 0.3s linear;}


#banner dl:hover dt::after {transform:scale(10); transition:all 0.3s linear;}
#banner dl:hover dt img {transform:scale(1.2); opacity:0.6; transition:all 0.3s linear;}
#banner dl:hover dd {padding:0 30px; transition:all 0.3s linear;}


#brand {background: var(--blue_black); overflow:hidden;}
#brand .tit_wrap .stxt {color:rgba(255,255,255,0.7); position:relative; top:15px;}
#brand .slick-list {overflow:visible;}
#brand .slick-dots {position:absolute; top:50%; left:0; transform:translate(-70%,-50%); z-index:10;}
#brand .slick-dots li {display:block; line-height:1;}
#brand .slick-dots li+li {margin:5px 0 0;}
#brand .slick-dots li a {display:block; color: var(--white); font-family: var(--eng); font-size: 14px; font-weight: 700; line-height: 171.429%; letter-spacing: 0.7px; text-transform: uppercase; opacity: 0.5;}
#brand .slick-dots li.slick-active a {opacity:1;}
#brand .brand_roll {/* margin-left:-30px; */}
#brand .brand_roll::after {content:''; width:100%; height:100%; background: var(--blue_black); position:absolute; top:0; left:0; transform:translateX(-100%); z-index:1;}
#brand .brand_roll dl {position:relative; margin-left:30px; overflow:hidden;}
#brand .brand_roll dl dt {overflow: hidden;}
#brand .brand_roll dl dt::after {content:''; width:100%; height:100%; opacity: 0.5; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%); position:absolute; top:0; left:0;}
#brand .brand_roll dl dt img {display: block; width: 100%; height: 100%; object-fit: cover;}
#brand .brand_roll dl.type01 {width:780px;}
#brand .brand_roll dl.type01 dt { aspect-ratio: 3 / 2.3077;}
#brand .brand_roll dl.type02 {width:510px;}
#brand .brand_roll dl.type02 dt { aspect-ratio: 3 / 3.5295;}
#brand .brand_roll dl dd {position:absolute; top:0; left:0; width:100%; height:100%; z-index:10;}
#brand .brand_roll dl dd .tit {position:absolute; left:0; bottom:42px; width:100%; padding:0 5%; box-sizing:border-box; color: var(--white); font-family: var(--eng); font-size: 1.3888rem; font-weight: 600; line-height: 160%; letter-spacing: 0.5px; text-transform: uppercase; text-align:center; opacity:1; visibility:visible; transition:all 0.3s linear;}
#brand .brand_roll dl dd .hv {width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); padding:30px; box-sizing:border-box; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(20%); transition:all 0.3s linear;}
#brand .brand_roll dl.type01 dd .hv {padding:30px 60px;}
#brand .brand_roll dl dd .hv h4 {width:100%; color: var(--white); font-family: var(--eng); font-size: 1.3888rem; font-weight: 600; line-height: 160%; letter-spacing: 0.5px; text-transform: uppercase; text-align:center;}
#brand .brand_roll dl dd .hv p {width:100%; margin:10px 0 0; text-align:center; font-size: 0.88rem; font-weight: 400; line-height:  175%; letter-spacing: -0.64px; color:rgba(255,255,255,0.7);}
#brand .brand_roll dl dd .hv span {margin:35px 0 0; display:inline-block; color: var(--white); font-family: var(--eng); font-size: 14px; font-weight: 700; line-height:171.429%; letter-spacing: 0.7px; text-transform: uppercase; text-decoration:underline;}


#brand .brand_roll dl:hover dd .tit {opacity:0; visibility:hidden; transition:all 0.3s linear;}
#brand .brand_roll dl:hover dd .hv {opacity:1; visibility:visible; transform:translateY(0); transition:all 0.3s linear;}



#press {}
#press .slick-arrow {opacity:0.5; top:45%; margin-top:-25px; transition:all 0.3s linear;}
#press .slick-arrow:hover {opacity:1; transition:all 0.3s linear;}
#press .slick-prev {left:-50px;}
#press .slick-next {right:-80px;}
#press .press_roll {margin-left:-30px;}
#press .press_roll dl {margin-left:30px;}
#press .press_roll dl dt {position:relative; z-index:10; overflow: hidden; aspect-ratio: 3 / 2;}
#press .press_roll dl dt::after {content:''; width:6rem; height:6rem; border-radius:100%; background:var(--main); position:absolute; top:50%; left:50%; margin:-3rem 0 0 -3rem; z-index:-1; transition:all 0.3s linear;}
#press .press_roll dl dt img {display: block; width: 100%; height: 100%; object-fit: cover; transition:all 0.3s linear;}
#press .press_roll dl dd {padding:23px 0 38px; border-bottom:1px solid rgba(23,40,66,0.3); position:relative;}
#press .press_roll dl dd::after {content:''; width:0; height:1px; background:var(--main); position:absolute; bottom:-1px; left:50%; transform:translateX(-50%); transition:all 0.3s linear; z-index:20;}
#press .press_roll dl:hover dd::after {width:100%; transition:all 0.3s linear;}
#press .press_roll dl dd span {display:block; font-family:var(--eng); font-size: 0.777rem; font-weight: 400; line-height:171.429%; letter-spacing: 0.7px; text-transform: uppercase; margin: 0 0 7px;}
#press .press_roll dl dd h4 {color: var(--black); font-size: 1.1111rem; font-weight: 400; line-height:160%; letter-spacing: -0.8px;}

#press .press_roll dl:hover dt::after {transform:scale(5); transition:all 0.3s linear;}
#press .press_roll dl:hover dt img {transform:scale(1.2); opacity:0.6; transition:all 0.3s linear;}




#career {position:relative; height:var(--vh); background:var(--black); overflow:hidden; display:flex; flex-wrap:wrap; align-content:center; justify-content:center;}
#career .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:url("/resources/img/career_bg.png")no-repeat center / cover;  opacity: 0.3; filter: blur(9px);}
#career .bg_shadow { position:absolute; top:0; left:0; width:100%; height:100%;  filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));}
#career .bg_in {position:absolute; top:0; left:0;  width:100%; height:100%;  clip-path: inset(15% 35%); background:url("/resources/img/career_bg.png")no-repeat center / cover;  filter: drop-shadow(0px 0px 30px 0px rgba(0, 0, 0, 0.50));}
#career .bg_in::after {content:''; width:100%; height:100%; position:absolute; top:0; left:0; background:var(--main); opacity:0.15;}
#career .basic_in {position:relative; height:400px; z-index:10; display:flex; flex-wrap:wrap; align-content:center; justify-content:center;}

#career .tit_wrap {display:block; width:100%; margin:0 0 60px;}
#career .tit_wrap .sm_tit {color: var(--white);}
#career .tit_wrap .fs160 {color: var(--white); font-family: var(--eng); font-size: 8.888rem; font-style: normal; font-weight: 600; line-height: 112.5%; letter-spacing: -3.2px;}

#career .tBox {/* position:absolute; right:0; bottom:90px; */ margin:0 0 0 auto;}
#career .tBox p {letter-spacing: -0.72px; color:rgba(255,255,255,0.8); margin:0 0 33px;}



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

.tit_wrap .moreBtn {top:0; transform:translateY(0);}


/* #business {align-items:flex-start;} */
#business .imgBox {width:40%;}
#business .txtBox {width:60%; padding-left:10%; padding-bottom:30px;}
#business .txtBox .fs20 {margin:0 0 60px;}
#business .txtBox .busi_list {margin:30px 0 0;}
#business .txtBox .busi_list li {font-size:3rem;}


#brand .slick-dots {transform:translate(-15%,-50%);}

#press .slick-arrow {top:-110px; margin-top:0;}
#press .slick-prev {left:auto; right:60px;}
#press .slick-next {right:0;}


#career .bg_in {clip-path: inset(15% 25%);}


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


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


#cursor {display:none !important;}


.fs70 {font-size:3rem;}

.tit_wrap {display:block; text-align:center; margin:0 0 45px;}
.tit_wrap br {display:none;}

.moreBtn {width:115px;}
.moreBtn::after {width:22px; height:14px; background-size:100% !important; position:relative; top:-1px;}

.slick-arrow::before {font-size:35px;}


#visual .visual_in .roll .v_txt br {display:none;}
#visual .visual_in .roll .v_txt h2 {font-size:3rem;}


#business .imgBox {width:40%;}
#business .txtBox {width:60%; padding-left:5%; padding-bottom:10px;}
#business .txtBox .busi_list li {font-size:2rem;}
#business .txtBox .busi_list li::after {width:20px; height:10px; background-size:100%;}
#business .txtBox .busi_list li span {font-size:1.05rem;}




#banner {gap:30px;}
#brand .tit_wrap .stxt {top:0; margin:15px 0 0;}
#banner dl:last-of-type {margin-top:100px;}
#banner dl dd {font-size:1.4rem;}
#banner dl dt i {top:15px; right:15px;}

#brand .slick-dots {display:none !important;}
#brand .brand_roll dl.type01 {width:480px;}
#brand .brand_roll dl.type02 {width:314px;}



#press {position:relative;}
#press .slick-arrow {top:-100px; margin-top:0;}
#press .slick-prev {right:auto; left:15px;}
#press .slick-next {right:0;}

#press .tit_wrap {position:static;}
#press .tit_wrap .moreBtn {top:auto; bottom:100px; right:50%; transform:translateX(50%);}


#press .press_roll {padding-bottom:30px; margin-left:-15px;}
#press .press_roll dl {margin-left:15px;}
#press .press_roll dl dd {padding:15px 0 22px;}
#press .press_roll dl dd h4 {font-size:1.05rem;}


#career {height:1200px;}
#career .bg_in {clip-path: inset(20% 15%);}
#career .basic_in {height:100%; align-content:space-between;}
#career .tit_wrap {margin:0; position:relative; top:160px;}
#career .tit_wrap .sm_tit {margin:0 0 5px;}
#career .tit_wrap .fs160 {font-size:6rem;}
#career .tBox {margin:0; text-align:center; position:relative; bottom:100px;}
#career .tBox .moreBtn {margin:0 auto;}


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


.tit_wrap {margin:0 0 30px;}
.tit_wrap .tit_cont .sm_tit {display:block; margin:0 0 5px;}

.moreBtn {width:100px; }
.moreBtn::after {width:18px; height:12px;}

.fs70 {font-size:2.2rem;}


.slick-arrow::before {font-size:25px; font-weight:300;}

#visual .visual_in .roll .v_txt p {margin-bottom:8px;}
#visual .visual_in .roll .v_txt h2 {font-size:2.2rem;}
#visual .slick-dots {bottom:65px; gap:0 12px;}
#visual .slick-dots li {width:8px; height:8px;}
#visual .slick-dots li.slick-active {width:11px; height:11px;}



#visual .slick-arrow {top:auto; bottom:20px; margin-top:0;}

#visual .scroll_down span:after {font-size:22px;}
@keyframes scroll_down {
	0%,100% { transform:translateY(-5px); opacity: 1;}
	50% { transform:translateY(5px); opacity: 0.5;}
}




#business {position:relative; }
#business .imgBox {width:100%; order:2; margin:30px 0 0;}
#business .txtBox {width:100%; padding-left:0; padding-bottom:0; order:1; position:static;}
#business .txtBox .fs20 {position:absolute; bottom:130px; right:30px; margin:0; color:rgba(255,255,255,0.8); z-index:99;}
#business .txtBox .busi_list {margin:10px 0 0;}
#business .txtBox .busi_list li {font-size:1.7rem;}
#business .txtBox .busi_list li::after {right:0;}





#banner {grid-template-columns: repeat(1, 1fr); gap:40px;}
#banner dl {padding-right:15%; box-sizing:border-box; }
#banner dl:last-of-type {margin-top:0; padding-right:0; padding-left:15%;}
#banner dl dd {font-size:1.2rem;}
#banner dl dt i {top:10px; right:10px;}
#banner dl dd {margin:10px 0 0;}
#banner dl dd::after {width:20px; height:10px; background-size:100%;}




#brand .tit_wrap .stxt {margin:10px 0 0;}
#brand .brand_roll dl {margin-left:10px;}
#brand .brand_roll dl.type01 {width:280px;}
#brand .brand_roll dl.type02 {width:183px;}
#brand .brand_roll dl dd .hv {display:none;}
#brand .brand_roll dl dd .tit {opacity:1 !important; visibility:visible !important; font-size:1.15rem; bottom:20px;}


#press .slick-arrow {top:-80px;}
#press .slick-next {right:-25%;}
#press .press_roll {width:85%; padding-bottom:55px;}
#press .press_roll .slick-list {overflow:visible;}
#press .press_roll dl dd {padding:15px 0 19px;}
#press .press_roll dl dd span {margin:0 0 3px;}





#career {height:940px;}
#career .bg_in {clip-path: inset(20% 15%);}
#career .basic_in {height:100%; align-content:space-between;}
#career .tit_wrap {margin:0; position:relative; top:134px;}
#career .tit_wrap .sm_tit {margin:0 0 5px; font-size:1rem;}
#career .tit_wrap .fs160 {font-size:4rem;}
#career .tBox {margin:0; text-align:center; position:relative; bottom:80px;}
#career .tBox .moreBtn {margin:0 auto;}
#career .tBox p {margin:0 0 20px;}



}