@import url("common.css");



/* 공통 */
.fs45{text-align:center; padding:0 0 50px;}


/* 메인비주얼 */
#visual{position: relative; width: 100%; height: var(--vh); background:#000; overflow: hidden;}
#visual .visual_in{position:relative; width: 100%; height: 100%;}
#visual .visual_in .roll{position: relative; left:0; top:0; width: 100%; min-height:950px; height:var(--vh)}
#visual .visual_in .roll .v_txt{position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index: 9999;}
#visual .visual_in .roll .v_txt h2{font-size:3.529rem; letter-spacing: -4.8px; line-height: 120%; color:var(--white); font-weight: 100; font-family:var(--tit); transition:all 1s 0.3s linear; opacity:0; filter: blur(5px); -webkit-filter: blur(5px);}
#visual .visual_in .roll .v_txt h2 b{font-weight: 700; letter-spacing: inherit; line-height: inherit;}
#visual .visual_in .roll .v_txt .fs21{color:var(--white); padding: 20px 0 0; transition:all 1s 0.6s linear; opacity:0; filter: blur(5px); -webkit-filter: blur(5px);}
#visual .visual_in .roll .v_bg{position: absolute; left:0; top:0; width: 100%; min-height:950px; height: 100%; -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 .scr{display: inline-block; position: absolute; right: 50%; margin-right: -675px; bottom: 40px; z-index: 9999; font-size:0.765rem; font-weight: 700; color:var(--white); font-family:var(--eng); letter-spacing: 0;}
#visual .scr span{display: inline-block; vertical-align: middle; margin: -4px 0 0 15px; width: 50px; height: 50px; border-radius:50%; box-sizing:border-box; border:1px solid rgba(255,255,255,.2); overflow: hidden; position: relative;}
#visual .scr span:after{content:''; display:block; width:6px; height:6px; border-radius:50%; background:var(--white); position: absolute; left:50%; top:50%; margin-left: -3px; margin-top: -6px; animation: upDown 1.5s ease-in-out infinite;}


#visual .visual_in .slick-slide.action .roll .v_txt h2{opacity:1; filter: blur(0); -webkit-filter: blur(0);}
#visual .visual_in .slick-slide.action .roll .v_txt .fs21{opacity:1; filter: blur(0); -webkit-filter: blur(0);}
#visual .visual_in .slick-slide.action .roll .v_bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}


@keyframes upDown {
	0% {
		opacity: 0.1;
		transform:  translateY(-40px);
	}
	50% {
		opacity: 1;
		transform: translateY(50%);
	}
	100% {
		opacity: 0.1;
		transform:  translateY(40px);
	}
}


#visual .indicaotr{position: absolute; left:50%; bottom: 55px; margin-left: -675px; z-index: 9999; display: flex; align-items:center;}
#visual .slick-arrow{padding: 0; border:0; font-size:0; cursor:pointer; background:none; width: 20px; height: 20px; transition:all .3s linear; display: block; position: relative; z-index: 9; color:var(--white); display: inline-block; vertical-align: top;}
#visual .slick-arrow.slick-hidden{display: none;}
#visual .slick-arrow:hover{opacity: 1;}
#visual .prevArrow{}
#visual .nextArrow{}
#visual .slick-arrow:after{content:'\e5e0'; display: block; width: 100%; height: 100%; line-height: 20px; font-size:20px; text-align:center; font-family:var(--icon); position: absolute; left:0; top:0;}
#visual .prevArrow:after{}
#visual .nextArrow:after{transform:rotate(180deg);}
#visual .slick-dots{font-size:0;}
#visual .slick-dots li{display: inline-block; vertical-align: top; width: 10px; height: 10px; border-radius:50%; background:var(--white); opacity: 0.3; transition:all .3s linear; margin: 0 20px 0 0; cursor:pointer;}
#visual .slick-dots li.slick-active{opacity: 1;}
#visual .slick-dots li button{padding:0; background:none; border:0; font-size:0;}




/* Wonbuilding Story */
#story{}
#story .story_style{display:grid; gap: 30px; grid-template-columns: repeat(3, 1fr); grid-template-rows: 360px 360px 360px;}
#story .story_style .box{overflow: hidden;}
#story .story_style .box a{display: block; width: 100%; height: 100%; position: relative;}
#story .story_style .box1{grid-column: 1 / 2; grid-row: 1 / 3;}
#story .story_style .box2{grid-column: 2 / 3; grid-row: 1 / 2;}
#story .story_style .box3{grid-column: 3 / 4; grid-row: 1 / 2;}
#story .story_style .box4{grid-column: 2 / 3; grid-row: 2 / 3;}
#story .story_style .box5{grid-column: 3 / 4; grid-row: 2 / 3;}
#story .story_style .box6{grid-column: 1 / 2; grid-row: 3 / 4;}
#story .story_style .box7{grid-column: 2 / 4; grid-row: 3 / 4;}
#story .story_style .box .box_in{position: absolute; left:0; top:0; z-index: 5; box-sizing:border-box; width: 100%; padding:36px 40px;}
#story .story_style .box .box_in .fs21{font-weight: 700; color:var(--white);}
#story .story_style .box .box_in .fs17{padding: 10px 0 0; color:var(--white);}
#story .story_style .box .box_in .num_list{padding: 10px 0 0;}
#story .story_style .box .box_in .num_list li{padding:0 0 8px 35px; box-sizing:border-box; font-size:0.882rem; letter-spacing: -0.45px; line-height: 150%; position: relative; color:var(--white);}
#story .story_style .box .box_in .num_list li:last-child{padding-bottom: 0;}
#story .story_style .box .box_in .num_list li b{width: 25px; height: 25px; line-height: 25px; text-align:center; font-size:13px; font-weight: 700; letter-spacing: -0.39px; color:var(--white); background:rgba(255,255,255,.2); border-radius:50%; position: absolute; left:0; top:-2px;}
#story .story_style .box .bg{position: absolute; left:0; top:0; width: 100%; height: 100%; transition:all .4s linear; background-repeat:no-repeat; background-size:cover; background-position:center;}
#story .story_style .box:hover .bg{transform:scale(1.1);}


/* Wonbuilding Vision */
#vision{}
#vision .vision_style{display: flex;}
#vision .vision_style > div{box-sizing:border-box; height: 420px;}
#vision .vision_style .txt_area{width: 33.33%; padding: 50px; display: flex; flex-direction: column; justify-content: center; background:url('/assets/images/newImg/vision_bg.jpg') no-repeat center/cover;}
#vision .vision_style .txt_area .fs29{color:var(--white);}
#vision .vision_style .txt_area .fs17{color:var(--white); padding: 6px 0 0;}
#vision .vision_style .txt_area .fs17 b{font-weight: 700;}
#vision .vision_style .txt_area .go_btn{display: inline-block; margin: 40px 0 0; font-size:0.882rem; line-height: 150%; color:var(--white); letter-spacing: -0.45px;}
#vision .vision_style .txt_area .go_btn:after{content:'\e5e0'; display:inline-block; vertical-align: middle; margin: -4px 0 0 2px; font-size:15px; font-family:var(--icon); transform:rotate(180deg); transition:all .3s linear;}
#vision .vision_style .txt_area .go_btn:hover:after{margin-left: 10px;}
#vision .vision_style .cont_area{width: 66.66%;}
#vision .vision_style .vision_roll{position: relative; width: 100%; height: 100%; min-height: 900px;}
#vision .vision_style .vision_roll .roll{position: relative; left: 0; top:0; width: 100%; height: 420px; min-height: 420px;}
#vision .vision_style .vision_roll .roll .bg{position: absolute; left:0; top:0; width: 100%; height:420px; background-repeat:no-repeat; background-size:cover; background-position:center;}
#vision .vision_style .vision_roll .roll dl{display: flex; align-items:center; position: absolute; left:0; bottom: 0; box-sizing:border-box; z-index: 5; padding: 50px;}
#vision .vision_style .vision_roll .roll dl dt{width: 48px;}
#vision .vision_style .vision_roll .roll dl dt img{width: 100%; height: auto;}
#vision .vision_style .vision_roll .roll dl dd{width: calc(100% - 48px); box-sizing:border-box; padding: 0 0 0 20px;}
#vision .vision_style .vision_roll .roll dl dd .fs15{color:var(--white); padding: 0 0 8px; line-height: 120%;}
#vision .vision_style .vision_roll .roll dl dd .fs21{font-weight: 700; color:var(--white); line-height: 120%;}

#vision .slick-arrow{padding: 0; border:0; font-size:0; cursor:pointer; background:none; width: 60px; height: 60px; transition:all .3s linear; display: block; position: absolute; top:0; right: 0; z-index: 9991; color:var(--white); background:rgba(124, 94, 66, 0.8);}
#vision .slick-arrow:hover{background:var(--main);}
#vision .slick-prev{right:60px;}
#vision .slick-next{}
#vision .slick-arrow:after{content:'\e2ea'; display: block; width: 100%; height: 100%; line-height: 60px; font-size:20px; text-align:center; font-family:var(--icon);}
#vision .slick-prev:after{}
#vision .slick-next:after{transform:rotate(180deg);}



/* WonTube */
#wontube{}
#wontube .wontube_in{}
#wontube .wontube_in > .fs45{padding: 0;}
#wontube .wontube_in > .fs17{padding: 20px 0 50px; text-align:center;}
#wontube .wontube_style{display: flex; flex-wrap:wrap; gap:30px;}
#wontube .wontube_style .list{width: calc((100% - 90px)/4);}
#wontube .wontube_style .list a{display:block; position: relative; overflow: hidden;}
#wontube .wontube_style .list a .thumb{aspect-ratio:1/1; overflow: hidden; position: relative;}
#wontube .wontube_style .list a .thumb:after{content:''; display: block; width: 100%; height: 100%; background:rgba(0,0,0,.5); position: absolute; left:0; top:0; transition:all .3s linear; opacity: 0;}
#wontube .wontube_style .list a:hover .thumb:after{opacity: 1;}
#wontube .wontube_style .list a .thumb img{display: block; width: 100%; height: 100%; object-fit:cover; transition:all .4s linear; }
#wontube .wontube_style .list a:hover .thumb img{transform:scale(1.1);}
#wontube .wontube_style .list a .desc{position: absolute; left: 0; top:50%; transform:translateY(-50%); width: 100%; text-align:center; transition:all .3s linear;  opacity: 0;}
#wontube .wontube_style .list a:hover .desc{opacity: 1;}
#wontube .wontube_style .list a .desc .fs21{color:var(--white); font-weight: 700; line-height: 120%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#wontube .wontube_style .list a .desc .youtube_txt{letter-spacing: 0; margin: 10px 0 0; line-height: 120%; color:var(--white); }
#wontube .wontube_style .list a .desc .youtube_txt:before{content:''; display:inline-block; vertical-align: middle; margin: -2px 5px 0 0; width:18px; height:18px; background:url('/assets/images/newImg/youtube_icon.png') no-repeat center/contain;}