@import url("common.css");

body,html{color:var(--white);}

/* 슬릭기본 */
.slick-slider{position: relative; display: block; box-sizing: border-box; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y; touch-action: pan-y;-webkit-tap-highlight-color: transparent; outline: 0 !important;}
.slick-list{position: relative; display: block; overflow: hidden; margin: 0; padding:0 !important;  outline: 0 !important;}
.slick-track {display:flex; }
.slick-slide{border:0; outline: 0 !important;}
.slick-initialized .slick-slide{display:block; outline: 0 !important;}
/* 슬릭기본 */

/* 풀페이지 */
#main section{display: block; width: 100%; height: 100vh !important; overflow: hidden !important;}
#main section .fp-overflow{width: 100%; height: 100%; overflow: hidden !important; display: flex; flex-direction: column; justify-content: center;}




/* 섹션 공통 */
.titbox h3 {margin-bottom:15px}
.titbox p.fs20 {color:rgba(255,255,255,0.7)}

/* 디졸브 */
.ani_effect {transform:translateY(60px); opacity: 0; transition:all .6s linear; }
.ani_effect.delay1 {transition-delay:0.6s;}
.ani_effect.delay2 {transition-delay:0.9s;}
.ani_effect.delay3{transition-delay:1.2s;}
.ani_effect.delay4{transition-delay:1.5s;}
.ani_effect.delay5{transition-delay:1.8s;}
.ani_effect.delay6{transition-delay:2s;}

.section.action .ani_effect{transform:translateY(0); opacity: 1;}

/* 스크롤 다운 */
.fp-viewing-s06 .scroll_down {opacity:0}


/* Visual */
#visual{position: relative; width: 100%; height: var(--fullvh); overflow:hidden;}
#visual .visual_in {position:relative; width:100%; height:100%;}
#visual .visual_in .roll{width: 100%; height:var(--fullvh); display: flex; flex-direction: column; padding-top:calc(var(--fullvh) * 0.25)}
#visual .visual_in .roll .basic_in{position: relative; z-index: 9;}
#visual .visual_in .roll h2.v_tit {font-size: 3.222rem; font-weight: 300; line-height: 117.241%; letter-spacing: -4.06px; text-wrap:balance; 
filter: blur(5px); opacity: 0; transition:all .6s .8s linear;}



#visual .visual_in .roll .v_bg{position:absolute; left:0; top:0; 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::after{content: ''; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); position: absolute; right: 0; top: 0;}

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



#visual .visual_in .roll .v_bg.v_bg_m {display:none}

#visual .my-dots {display:flex; justify-content:center; position:absolute; bottom:75px; width:100%; z-index:1000;}
#visual .my-dots ul {display:flex; align-items:center; justify-content:center; gap:22px;}
#visual .my-dots ul li {display:flex}
#visual .my-dots ul li button {font-size:0; width:12px; aspect-ratio:1/1; background:var(--white); opacity:0.3; border:0; border-radius:50%; cursor:pointer; transition:all 0.4s linear}
#visual .my-dots ul li.slick-active button {opacity:1; background:transparent; width:14px; box-shadow: 0 0 0 3px var(--white) inset;}

#visual .my-dots ul li button:hover {opacity:1}

#visual .slick_btn_wrap {display:flex; justify-content:space-between; position:absolute; bottom:60px; width:90%; z-index:1000; max-width:1590px; left:50%; transform:translateX(-50%); padding-right:50px; pointer-events:none}
#visual .slick_btn_wrap .slick_btn {display:flex; cursor:pointer; opacity:0.8; transition:all 0.3s linear; pointer-events:auto}
#visual .slick_btn_wrap .slick_btn::before {content:"\e5e0"; font-family:var(--icon); font-size:40px; font-weight:400; line-height:1;}
#visual .slick_btn_wrap .slick_btn.next {transform:rotate(180deg);}
#visual .slick_btn_wrap .slick_btn:hover {opacity:1}


#visual .visual_in .roll.action h2.v_tit{filter: blur(0px); opacity: 1;}
#visual .visual_in .roll.action .v_bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
#visual .visual_in .roll.action .v_bg::after{animation: eff 1.5s 0.5s linear; animation-fill-mode: both;}







/* about */
#about {position:relative}
#about > * {position:relative; z-index:2}
#about .section2_flex {display:flex; gap:120px; align-items:center; justify-content:center}
#about .section2_flex .imgbox {width:570px; position:relative; flex-shrink:0;}
#about .section2_flex .imgbox .img{position: relative;}
#about .section2_flex .imgbox .img::after{content: ''; display: block; width: 100%; height: 100%; background: var(--main); position: absolute; right: 0; top: 0;}
#about.action .section2_flex .imgbox .img::after{animation: eff 2s 0.5s linear; animation-fill-mode: both;}
#about .section2_flex .imgbox img {height:auto; width:100%}
#about .section2_flex .tbox p.fs20 {margin-bottom:68px}
#about .section2_flex .tbox ul {display:flex;}
#about .section2_flex .tbox ul li {display:flex}
#about .section2_flex .tbox ul li::after {background:linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.15) 15%, rgba(255, 255, 255, 0.15) 85%, rgba(255, 255, 255, 0.00) 100%); content:""; width:1px; height:100%; display:block; margin:0 60px;}
#about .section2_flex .tbox ul li:last-child::after {display:none}
#about .section2_flex .tbox ul li a {display:flex; padding:20px 0; flex-direction:column; gap:11px; color:rgba(255,255,255,0.7); text-align:center}
#about .section2_flex .tbox ul li a svg path {transition:all 0.3s linear; }

#about .section2_flex .tbox ul li a:hover {color:var(--sub3)}
#about .section2_flex .tbox ul li a:hover svg path {stroke:var(--sub3);}

#about .section2_flex .animation_txt {position:absolute; bottom:-50px; left:-70px}
#about .section2_flex .animation_txt .hanja {font-family:'NanumMyeongjoYetHangul'; font-size: 8.333rem;  line-height: 100%; opacity:0}
#about .section2_flex .last_ani {font-size: 16px; font-weight: 400; line-height: 125%; opacity:0; transform:translateY(60px)}
#about .section2_flex .animation_txt div:nth-child(2) {display:flex; align-items:center; gap:97px}
#about.action .section2_flex .animation_txt .hanja {opacity:0; animation-name: txt_ani; animation-duration:0.8s; animation-timing-function:linear; animation-fill-mode:forwards; animation-delay:0.5s}
#about.action .section2_flex .animation_txt .hanja2 {animation-delay:1.5s}
#about.action .section2_flex .animation_txt .hanja3 {animation-delay:2s}
#about.action .section2_flex .animation_txt .hanja4 {animation-delay:2.5s}
#about.action .section2_flex .animation_txt .hanja5 {animation-delay:3s}
#about.action .section2_flex .animation_txt .last_ani {animation-name: txt_ani2; animation-duration:1s; animation-timing-function:linear; animation-fill-mode:forwards; animation-delay:3.2s}

#about .last_ani_m {display:none}


#about::before {content:""; background:url('/img/section2_bg.png') no-repeat center / contain; width:1853px; aspect-ratio: 1/1; position:absolute; top:-70%; right:-15%;}
#about.action::before{animation:about_bg 2s ease forwards;}

@keyframes txt_ani {
0% {opacity:0; filter: blur(5px);}
100% {opacity:1; filter: blur(0);}
}

@keyframes txt_ani2 {
0% {transform:scale(10); opacity: 0; filter: blur(5px);}
100% {transform:scale(1); opacity: 0.5; filter: blur(0);}
}

@keyframes about_bg {
0% {transform:rotate(15deg) scale(1.15);}
100% {transform:rotate(0) scale(1);}
}





/* chairman */
#chairman{position: relative;}
#chairman::before{content:''; display: block; width: 100%; height: 100%; background:url('/img/chairman_bg.png') center / cover no-repeat; position: absolute; left:0; top:0; }

#chairman.action::before{animation:chairman_bg 10s linear infinite;}

@keyframes chairman_bg {
	0%,100% {transform: scale(1.1,1.1);}
	50% {transform: scale(1);}
}




#chairman .chairman_list_m {display:none}

#chairman .chairman_item {position:relative}
#chairman .swiper {height:var(--fullvh) !important}
#chairman .chairman_item {height:fit-content}
#chairman .chairman_item .imgbox{width:100%; max-width:1050px; display:flex; align-items:center; justify-content:center; margin:0 auto}
#chairman .chairman_item .imgbox img {height:auto; width:100%; opacity:0.2; transition:all 0.4s ease; transform:scale(0.8)}
#chairman .chairman_item .tbox {position:Absolute; top:0; left:50%; padding:50px 0 56px; width:100%; display:flex; justify-content:space-between; height:100%; max-width:1455px; transform:translate(-50%, 60px); opacity:0; transition:all 0.6s 0.8s linear}
#chairman .chairman_item .tbox .depth1_tit {margin-bottom:15px; opacity:0.5; display:inline-block}
#chairman .chairman_item .tbox .depth2_tit {margin-bottom:60px}
#chairman .chairman_item .tbox p.shortexp {align-self:flex-end; max-width:375px; opacity:0.7}

#chairman .chairman_item.swiper-slide-active:not(:first-child):not(:last-child) .tbox {animation:swiper_txt_ani 0.8s ease 0.6s forwards;}
#chairman .chairman_item.swiper-slide-active:not(:first-child):not(:last-child) .imgbox img {opacity:1; transform:scale(1)}

#chairman .swiper .chairman_item.action .tbox {animation:swiper_txt_ani 0.8s ease 0.6s forwards;}
#chairman .swiper .chairman_item.action .imgbox img {opacity:1; transform:scale(1)}

#chairman .swiper .chairman_item.animate .tbox {animation:swiper_txt_ani_reverse 0.8s ease forwards !important;}
#chairman .swiper .chairman_item.animate .imgbox img {opacity:0.2 !important; transform:scale(0.85) !important; transition-delay:0.8s}

@keyframes swiper_txt_ani {
0% {opacity:0; transform:translate(-50%, 60px)}
100% {opacity:1; transform:translate(-50%, 0)}
}

@keyframes swiper_txt_ani_reverse {
0% {opacity:1; transform:translate(-50%, 0)}
100% {opacity:0; transform:translate(-50%, 60px)}
}

/* VR */
#vr {overflow:hidden}
#vr .vr_in {display:flex; gap:60px; align-items:center; margin-left:0}
#vr .vr_in .titbox {margin-bottom:60px}
#vr .vr_in .gra_box {position:relative; overflow: hidden;}
#vr .vr_in .gra_box .hover{position: absolute; left: 0; top:0; width: 100%; height: 100%; z-index: 2;}
#vr .vr_in .gra_box .hover::before{content:''; display: block; width: 35%; height: 100%; background:linear-gradient(to right, rgba(32,30,29,1), rgba(32,30,29,0.8), rgba(32,30,29,0.5), transparent); position: absolute; left: -50px; top:0; z-index: 2;}
#vr .vr_in .gra_box .hover::after{content:''; display: block; width: 35%; height: 100%; 
background:linear-gradient(to left, rgba(32,30,29,1),rgba(32,30,29,0.8), rgba(32,30,29,0.5), transparent); position: absolute; right: -50px; top:0; z-index: 2;}
#vr.action .vr_in .gra_box .hover{animation: gra_ani2 4s ease-in-out infinite alternate;}
#vr .vr_in .gra_box img {width:100%; height: auto; opacity: 0;}
#vr.action .vr_in .gra_box img {animation:gra_ani1 1s 1s forwards;}

@keyframes gra_ani1 {
	0%{opacity: 0;}
	100%{opacity: 0.3;}
}


@keyframes gra_ani2 {
  from { transform: translateX(-50px); }
  to   { transform: translateX(50px); }
}




/* Collection */
#collection .collection_h {display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:42px}
#collection .collection_list li a {display:flex; align-items:center; justify-content:center; padding:25px; background:rgba(255,255,255,0.1); aspect-ratio:510 / 383; width:100%; height:100%; overflow: hidden;}
#collection .collection_list li a::before{content:''; display: block; width: 100%; height: 100%; background:rgba(0,0,0,.7); position: absolute; left:0; top:0; opacity: 0; transition:all .4s; z-index: 2;}
#collection .collection_list li:hover a::before{opacity: 1; transition:all .4s linear;}
#collection .collection_list li a::after{content:'\f3dd'; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; font-size:80px; font-family:var(--icon); position: absolute; left:0; top:0; color:var(--white); font-weight: 100; font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48; transition:all .4s; transform:scale(0); z-index: 3;}
#collection .collection_list li:hover a::after{transform:scale(1); transition:all .4s linear;}

#collection .collection_list li img {width: 100%; height: 100%; object-fit:contain;}




#collection .more_m {display:none}

#collection .swiper-scrollbar {position:static; width:100%; background:rgba(255,255,255,0.12); margin-top:40px; cursor:pointer; border-radius:0}
#collection .swiper-scrollbar-drag {background:var(--sub); border-radius:0}




/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){
.titbox p.fs20 br {display:none}
#visual .slick_btn_wrap {padding-right:0}

#about .section2_flex {gap:90px}
#about .section2_flex .imgbox {width:500px;}
#about .section2_flex .animation_txt .hanja {font-size:7rem}
#about .section2_flex .animation_txt {left:-40px}
}

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



/* Visual */
#visual .visual_in .roll h2.v_tit {font-size:3rem}


/* About */
#about .section2_flex .tbox p.fs20 br {display:none}
#about .section2_flex .imgbox {width:400px}
#about .section2_flex {gap:50px}
#about .section2_flex .animation_txt {bottom:-50px; left:-20px}
#about .section2_flex .animation_txt .hanja {font-size:5rem}
#about .section2_flex .tbox ul li::after {margin:0 40px}
#about .section2_flex .tbox p.fs20 {margin-bottom:40px}
#about .section2_flex .tbox ul li a {padding:15px 0;}
#about .section2_flex .tbox ul li a i svg {width:auto; height:55px}


#about::before {width:1500px;}


/* Chairman */
#chairman .chairman_item .imgbox {width:90%}
#chairman .chairman_item .tbox {padding:30px 0}
#chairman .chairman_item .tbox .depth1_tit {margin-bottom:0}
#chairman .chairman_item .tbox .depth2_tit {margin-bottom:40px}

/* VR */
#vr .vr_in {gap:30px}
#vr .vr_in .titbox {margin-bottom:40px}

/* Collection */
#collection .swiper-scrollbar {margin-top:30px}

}

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

#header.nofixed + #sitemap + .mo_menu + .vr_tour{top:20px;}
#header.fixed + #sitemap + .mo_menu + .vr_tour{top:110px;}

/* 풀페이지 */
#main section{height: auto !important;}

/* 섹션 공통 */
.titbox h3 {margin-bottom:10px}
.section_pad {padding:120px 0}
.section_pad_b {padding:0 0 120px}
.section{height: auto !important;}
.section .fp-tableCell{height: auto !important; overflow: visible !important;}

.ani_effect.delay1 {transition-delay:0s;}
.ani_effect.delay2 {transition-delay:0.3s;}
.ani_effect.delay3{transition-delay:0.6s;}
.ani_effect.delay4{transition-delay:0.9s;}
.ani_effect.delay5{transition-delay:1.2s;}
.ani_effect.delay6{transition-delay:1.5s;}

#about.action .section2_flex .animation_txt .hanja {animation-delay:0.7s}
#about.action .section2_flex .animation_txt .hanja2 {animation-delay:1.3s}
#about.action .section2_flex .animation_txt .hanja3 {animation-delay:1.9s}
#about.action .section2_flex .animation_txt .hanja4 {animation-delay:2.5s}
#about.action .section2_flex .animation_txt .hanja5 {animation-delay:3.1s}
#about.action .section2_flex .animation_txt .last_ani {animation-delay:3.7s}

/* Visual */
#main #visual{height: var(--fullvh) !important;}
#visual .visual_in .roll {padding-top:0; justify-content:center}
#visual .visual_in .roll h2.v_tit {font-size:2.8rem}

#visual .slick_btn_wrap {bottom:45px}
#visual .slick_btn_wrap .slick_btn::before {font-size:36px}

#visual .my-dots {bottom:57px}

/* about */
#about::before {width:1000px; top:-70%; right:-15%;}
#about .section2_flex {gap:30px}
#about .section2_flex .imgbox {width:40%}
#about .section2_flex .tbox p.fs20 {margin-bottom:30px}

/* Chairman */
#chairman {padding-top:50px}
#chairman .swiper {display:none}
#chairman .chairman_list_m {display:block}
#chairman .chairman_item {height:auto; transform:translateY(60px); opacity: 0; transition:all .6s .2s linear;}
#chairman .chairman_item.action {transform:translateY(0); opacity: 1;}
#chairman .chairman_item + .chairman_item {margin-top:60px} 
#chairman .chairman_item .imgbox {width:100%; position:relative}
#chairman .chairman_item .imgbox::before {background: linear-gradient(00deg, #201E1D 0%, rgba(32, 30, 29, 0.00) 100%); content:""; position:absolute; bottom:0; left:0; width:100%; height:60px; z-index:2}
#chairman .chairman_item .imgbox img {opacity:1; transform:scale(1)}
#chairman .chairman_item .tbox {position:relative; transform:translateY(-10px); height:auto; display:block; padding:0; opacity:1; width:90%; z-index:2; top:auto; left:auto}
#chairman .chairman_item .tbox p.shortexp {max-width:100%}
#chairman .chairman_item .tbox .depth2_tit {margin-bottom:10px}
#chairman .chairman_item .tbox .more {margin:25px auto 0}

/* VR */
#vr .vr_in {flex-direction:column; margin-left:auto; width:100%; align-items:flex-start}
#vr .vr_in .tbox {width:90%; margin:0 auto}
#vr .vr_in .titbox {margin-bottom:35px}
#vr .vr_in .tbox .more {margin:0 auto}


/* Collection */
#collection .collection_h {margin-bottom:30px}
#collection .collection_list li a {padding:18px 20px}
#collection .collection_list li a::after{font-size:60px;}
#collection .swiper-scrollbar {margin-top:15px} 
}
/*******************************************************************************
    @media 680~768px
*******************************************************************************/
@media all and (max-width:768px){

/* About */
#about {overflow:hidden}
#about::before {width:700px; top:-300px; right:-100px;}
#about .section2_flex {display:block}
#about .section2_flex .imgbox {width:calc(100% - 30px); margin-left:auto}
#about .section2_flex .animation_txt .hanja {font-size:80px}
#about .section2_flex .tbox {padding-top:70px; margin-top:-20px}

#about .section2_flex .animation_txt {bottom:-20px; left:-30px}
#about .section2_flex .animation_txt div:nth-child(2) {justify-content:center}
#about .last_ani_pc {display:none;}
#about .section2_flex .last_ani_m {display:flex; justify-content:flex-end; font-size:13px;}
#about.action .section2_flex .last_ani_m {animation-name: txt_ani2; animation-duration:0.6s; animation-timing-function:linear; animation-fill-mode:forwards; animation-delay:3.7s;}

#about .section2_flex .tbox ul {display:grid; grid-template-columns:repeat(3, 1fr)}
#about .section2_flex .tbox ul li {display:block; position:relative}
#about .section2_flex .tbox ul li::after {right:0; top:0; position:absolute; margin:0}
#about .section2_flex .tbox p.fs20 {margin-bottom:20px}

@keyframes txt_ani2 {
0% {opacity:0; transform:translateY(80px)}
100% {opacity:0.5; transform:translateY(15px)}
}

#chairman {padding-top:0}
}


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


#header.fixed + #sitemap + .mo_menu + .vr_tour{top:100px;}


/* 공통 */
.section_pad {padding:100px 0}

/* Visual */
#visual .visual_in .roll .v_bg.v_bg_pc {display:none}
#visual .visual_in .roll .v_bg.v_bg_m {display:block}

#visual .visual_in .roll h2.v_tit {font-size:2.5rem}

#visual .slick_btn_wrap {bottom:35px}
#visual .slick_btn_wrap .slick_btn::before {font-size:32px} 

#visual .my-dots {bottom:46px}

/* About */
#about .section2_flex .tbox {margin-top:-15px}
#about .section2_flex .tbox ul li a i svg {height:50px}
#about .section2_flex .last_ani_m {font-size:12px;}

/* VR */
@keyframes gra_ani {
0%{-webkit-mask-position-x : 50px; mask-position-x : 50px}
50%{-webkit-mask-position-x : -40px; mask-position-x : -40px}
100%{-webkit-mask-position-x : 50px; mask-position-x : 50px}
}


/* collection */
#collection .collection_h {margin-bottom:20px}
#collection .collection_h .more {display:none}
#collection .more_m {display:flex; margin:35px auto 0}
#collection .collection_list li a::after{font-size:40px;}
}

/*******************************************************************************
    @media ~480px
*******************************************************************************/
@media all and (max-width:480px){
#visual .visual_in .roll h2.v_tit br {display:none}
#about .section2_flex .animation_txt .hanja {font-size:60px}

#collection {overflow:hidden}
#collection .collection_list li {width:calc(100% - 20px)}
#collection .swiper {overflow:visible}
}