@import url("common.css");


/*** css 공통 ***/
.header .header_in .top_util ul li a svg {filter: brightness(0) invert(1);}
.gnb ul li > a {color:var(--white);}
.header.dark .header_in .top_util ul li a svg {filter: unset;}
.header.dark .gnb ul li > a {color:var(--black);}







/* 화살표 */
.slick-arrow {border:0; padding:0; font-size:0; outline:none; cursor:pointer; transition:all .3s linear; z-index: 9999; background:transparent; width:60px; aspect-ratio: 1 / 1;  border:1px solid rgba(255,255,255,0.2); border-radius:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.slick-arrow::before {content:'\e5c4'; font-family:var(--icon); font-size:27px; line-height:1; display:block; color:var(--white); transition:all 0.3s;}
.slick-arrow:hover {border-color:var(--white); background:var(--white);}
.slick-arrow:hover::before {color:var(--main); transition:all 0.3s;}
.slick-next {transform: scaleX(-1);}



/*** Visual ***/
#visual{width:100%; height: var(--fullvh); overflow: hidden; background:var(--black); position: relative;}
#visual .visual_in{width: 100%; height: 100%; position: relative;}
#visual .visual_in .roll {width: 100%; height: var(--fullvh);}
#visual .visual_in .roll a {position:relative;  z-index:99; display:block; width:100%; height:100%}


#visual .visual_in .roll::after {content:''; opacity: 0.4; background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, 0.00) 70%, #000 100%); width:100%; height:100%; position:absolute; top:0; left:0;}
#visual .visual_in .roll .v_txt{position: absolute; left: 50%; bottom:90px; transform:translate(-50%,0); z-index: 9999; padding-right:280px; box-sizing:border-box;}
#visual .visual_in .roll .v_txt .fs70 {color:var(--white); transition:all .6s 0.1s 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 .bg.mo {display:none !important}
#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;}

@keyframes fadeIn {
	0% { opacity: 0;}
	100% {opacity: 1;}
}
/* 화살표 */


/* 도트 */
#visual .v_control {position:absolute; bottom:90px; left:50%; z-index:99; transform:translateX(-50%); display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
#visual .v_control .control_box {}
#visual .v_control .control_box .control_arr {order:2; display:flex; flex-wrap:wrap; align-items:center; gap:0 53px;}
#visual .v_control .control_box .paging_info {display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; color:rgba(255,255,255,0.5); font-size:1rem; font-family:var(--eng);}
#visual .v_control .control_box .paging_info b {font-size:1.235294117647059rem; color:var(--white);}


/* 효과 */
#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 .fs70 {transform:translateY(0); opacity:1;}



/* fullpage */
.section {position:relative; display: block; width: 100%; height: 100vh !important; overflow: hidden !important;}
.section .fp-overflow{width: 100%; height: 100%; overflow: hidden !important; display: flex; flex-direction: column; justify-content: center;}
.section .bg {position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; transform:scale(1.25); transition:all 2s;}
.section.action .bg {transform:scale(1); transition:all 2s 0.1s;}

#about .bg {background:url("/img/centric_bg.jpg")no-repeat center / cover;}
#service .bg {background:url("/img/service_bg.jpg")no-repeat center / cover;}
/* fullpage */





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




.tit_wrap {margin:0 0 40px;}
.tit_wrap .fs70 {letter-spacing:0; font-family:var(--eng); text-transform: uppercase;}
.tit_wrap .fs21 {margin:15px 0 0;}



#about {}
#about .tit_wrap {margin:0; text-align:center;}



#about .fs70 {transform:translateY(70px); opacity: 0;}
#about .fs25 {font-weight: 300; margin:25px 0 65px; transform:translateY(70px); opacity: 0;}
#about .moreBtn {transform:translateY(70px); opacity: 0;}

#about.action .fs70 {animation:fade-up 1.0s 0.3s forwards;}
#about.action .fs25 {animation:fade-up 1.0s 0.5s forwards;}
#about.action .moreBtn {animation:fade-up 1.0s 0.7s forwards;}




#project {}
#project .project_wrap {width:100%; height:100%; background:var(--black);}
#project .project_roll  {width:100%; height:100%;}
#project .project_roll .roll {width:100%; height:100%; display:flex !important; flex-wrap:wrap; align-content:center;}
#project .project_roll .roll .bg {opacity:0.7;}
#project .project_roll .roll .bg a {display:block; width:100%; height:100%;}
#project .project_roll .roll .tBox {transform:translateY(-108px); pointer-events: none;}
#project .project_roll .roll .tBox .eng_tit {display:block; font-weight: 600; color:rgba(255,255,255,0.5); margin:0 0 25px; font-family:var(--eng); transform:translateY(70px); opacity: 0; pointer-events: auto;}
#project .project_roll .roll .tBox .fs70 {color:var(--white); max-width:795px; width:75%; transform:translateY(70px); opacity: 0; pointer-events: auto;}
#project .project_roll .roll .tBox .moreBtn {margin:65px 0 0; border-color:var(--white); color:var(--white); transform:translateY(70px); opacity: 0; pointer-events: auto;}
#project .project_roll .roll .tBox .moreBtn::before {background:var(--white);}
#project .project_roll .roll .tBox .moreBtn:hover {color:var(--main);}
.project_roll .slick-list, .project_roll .slick-track {height:100%;}
#project .project_nav_wrap {width:100%; padding:40px 0; background:var(--main); position:absolute; bottom:0; left:0; z-index:99; overflow:hidden; transform:translateY(70px); opacity: 0;}
#project .project_nav_wrap .basic_in {display:flex; flex-wrap:wrap;  position:relative;}
#project .project_nav_wrap .basic_in::before {content:''; width:50%; height:100%; transform:translateX(-100%); background:var(--main); position:absolute; top:0; left:0; z-index:20;}
#project .project_nav_wrap .nav_arr {width:265px; display:flex; flex-wrap:wrap; align-items:center; gap:5px; background:var(--main); position:relative; z-index:20;}
#project .project_nav_wrap .project_nav_roll {width:calc(100% - 265px); margin-left:-30px; overflow:visible;}
#project .project_nav_wrap .project_nav_roll .slick-list {overflow:visible;}
#project .project_nav_wrap .project_nav_roll li {position:relative; overflow:hidden; width:calc(100% - 30px); margin-left:30px; cursor:pointer;}
#project .project_nav_wrap .project_nav_roll li::before {content:''; display:block; padding-top:56.25%;}
#project .project_nav_wrap .project_nav_roll li::after {content:''; width:100%; height:100%; border:6px solid var(--white); position:absolute; top:0; left:0; z-index:10; opacity:0; box-sizing:border-box;}
#project .project_nav_wrap .project_nav_roll li img {display:block; width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; filter:grayscale(1);}
#project .project_nav_wrap .project_nav_roll li.slick-current img {filter:grayscale(0);}
#project .project_nav_wrap .project_nav_roll li.slick-current::after {opacity:1;}


#project.action .project_roll .roll.slick-active .tBox .eng_tit {animation:fade-up 1.0s 0.2s forwards;}
#project.action .project_roll .roll.slick-active .tBox .fs70 {animation:fade-up 1.0s 0.4s forwards;}
#project.action .project_roll .roll.slick-active .tBox .moreBtn {animation:fade-up 1.0s 0.6s forwards;}

#project.action .project_nav_wrap {animation:fade-up 1.0s 0.6s forwards;}






#news {}
#news .tit_wrap {transform:translateY(70px); opacity: 0;}
#news .basic_in {position:relative;}
#news .news_roll {transform:translateY(70px); opacity: 0;}
#news .news_roll .slick-list {margin-left:-30px;}
#news .news_roll li {position:relative; background: var(--grayBg); margin-left:30px; overflow:hidden;}
#news .news_roll li .bg {width:100%; height:100%; background:var(--bk000); opacity:0; z-index:1; transition:all 0.5s;}
#news .news_roll li .bg .bg_in {width:100%; height:100%; opacity:0.6;}
#news .news_roll li:hover .bg {background:var(--main);  opacity:1; transition:all 0.5s; transform:scale(1.1);}
#news .news_roll li a {padding:45px; box-sizing:border-box; display:block; position:relative; z-index:10;}
#news .news_roll li a .sm_list {margin:0 0 10px; display:flex; flex-wrap:wrap; align-items:center;}
#news .news_roll li a .sm_list span {display:flex; flex-wrap:wrap; align-items:center; transition:all 0.5s;}
#news .news_roll li a .sm_list span::before {content:''; width:1px; height:13px; background:var(--border); margin:0 12px; transition:all 0.5s;}
#news .news_roll li a .sm_list span:first-of-type::before {display:none;}
#news .news_roll li a .sm_list .fs15 {font-weight: 600; color:var(--light);}
#news .news_roll li a .sm_list .cate {color:var(--main); font-weight: 700; display:block;}
#news .news_roll li a .fs25 {text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word; overflow:hidden; transition:all 0.5s; min-height:2.8rem;}
#news .news_roll li a .fs17 {text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap:break-word; overflow:hidden; margin:28px 0 0; transition:all 0.5s; min-height: 4.76472em;}
#news .news_roll li a .date {display:inline-flex; align-items:center; gap:4px; color: var(--light); font-family:var(--eng); letter-spacing:0; margin:33px 0 0; transition:all 0.5s;}
#news .news_roll li a .date::before {content:'\ebcc'; font-size:19px; display:block; line-height:1; font-family:var(--icon);}
#news .news_roll li:hover .sm_list span::before {background: rgba(255, 255, 255, 0.20); transition:all 0.5s;}
#news .news_roll li:hover .sm_list .fs15 {color: rgba(255, 255, 255, 0.40); transition:all 0.5s;}
#news .news_roll li:hover .sm_list .cate {color:var(--white); transition:all 0.5s;}
#news .news_roll li:hover .fs25 {color:var(--white); transition:all 0.5s;}
#news .news_roll li:hover .fs17 {opacity:0; visibility:hidden; transition:all 0.5s;}
#news .news_roll li:hover .date {opacity:0; visibility:hidden; transition:all 0.5s;}
#news .btn_wrap {display:flex; flex-wrap:Wrap; gap:3px; position:absolute; top:70px; right:0; transform:translateY(70px); opacity: 0;}
#news .btn_wrap .btn_arr {display:flex; flex-wrap:Wrap; gap:3px;}
#news .btn_wrap .btn_arr .slick-arrow {border-color:var(--border);}
#news .btn_wrap .btn_arr .slick-arrow::before {color:var(--basic);}
#news .btn_wrap .btn_arr .slick-arrow:hover {border-color:var(--main); background:var(--main);}
#news .btn_wrap .btn_arr .slick-arrow:hover::before {color:var(--white);}


#news.action .tit_wrap {animation:fade-up 1.0s 0.5s forwards;}
#news.action .btn_wrap {animation:fade-up 1.0s 0.5s forwards;}
#news.action .news_roll {animation:fade-up 1.0s 0.7s forwards;}



#service {display: flex; flex-direction: column; position: relative;}
#service .basic_in {flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 30px; z-index:1;}
/* #service .fp-overflow > .basic_in {transform:translateY(70px); opacity: 0;} */
#service .footer .basic_in {padding:0 !important;}
#service .basic_in .tit_wrap {margin:0;}
#service .basic_in .tit_wrap .fs70 {color:var(--white);}
#service .basic_in .service_list {max-width:970px; display:flex; flex-wrap:wrap; flex:1;}
#service .basic_in .service_list li {flex:1; border-radius:100%; margin-left:-30px; border-radius:100%; border: 1px solid rgba(255, 255, 255, 0.40); background: rgba(255, 255, 255, 0.10); -webkit-backdrop-filter: blur(10px);  backdrop-filter: blur(10px); overflow: hidden; aspect-ratio: 1 / 1; transition:all 0.5s; z-index:1;}
#service .basic_in .service_list li:first-of-type {margin-left:0;}
#service .basic_in .service_list li a {width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex-direction:column; }
#service .basic_in .service_list li .fs15 {display:block; color: var(--main-bright); font-weight:600; font-family:var(--eng); margin:30px 0 2px; transition:all 0.5s;}
#service .basic_in .service_list li .fs25 {color:var(--white); transition:all 0.5s;}

#service .basic_in .service_list li:hover {border-color:var(--main); background:var(--main); transition:all 0.5s; z-index:10;}
#service .basic_in .service_list li:hover .fs15 {margin:10px 0 2px; font-weight: 600; opacity: 0.8; color:var(--white); transition:all 0.5s;}
#service .basic_in .service_list li:hover .fs25 {color:var(--white); transition:all 0.5s;}

/* #service.action .fp-overflow > .basic_in {animation:fade-up 1.0s 0.5s forwards;} */

.footer {flex-shrink: 0; width:100%; background:transparent; border-top: 1px solid rgba(255, 255, 255, 0.20); z-index:10;}





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




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

#service .basic_in .service_list li i img {height:60px;}
#service .basic_in .service_list li .fs15 {margin:15px 0 2px;}

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


/* fullpage */
.section{height: auto !important;}
.section .fp-overflow{height: auto; overflow: visible !important; display: block !important;}


#visual {height: var(--fullvh) !important;}
#visual .visual_in .roll .v_txt {padding-right:0; bottom:120px; text-align:center;}
#visual .v_control {bottom:30px;}
#visual .v_control .control_box {width:100%;}
#visual .v_control .control_box .control_arr {justify-content:space-between;}


#about {padding:150px 0;}


#project .project_roll .roll {padding:150px 0 300px;}
#project .project_roll .roll .tBox {transform: translateY(0);}

#project .project_nav_wrap .nav_arr {width:160px;}
#project .project_nav_wrap .project_nav_roll {width:calc(100% - 160px);}
#project .project_nav_wrap .project_nav_roll {margin-left:-20px;}
#project .project_nav_wrap .project_nav_roll li {margin-left:20px;}

#news {padding:150px 0;}
#news .news_roll .slick-list {margin-left:-15px;}
#news .news_roll li {margin-left:15px;}
#news .news_roll li a {padding:35px;}
#news .btn_wrap {top:37px;}

#service .basic_in {padding:150px 0;}
#service .basic_in .tit_wrap {width:100%; margin:0 0 40px; text-align:center;}
#service .basic_in .service_list {max-width:100%; width:100%; flex:none;}

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

.slick-arrow {width:47px;}
.slick-arrow::before {font-size:23px; font-weight:300;}

.tit_wrap {margin:0 0 20px;}
.tit_wrap .fs21 {margin:5px 0 0;}

#visual .v_control .control_box .paging_info b {font-size:1.11rem;}

#about .fs25 {margin:10px 0 40px;}

#project .project_roll .roll {padding:250px 0; height:100%; height: auto !important; display: flex;}
#project .project_roll .roll .tBox {text-align:center;}
#project .project_roll .roll .tBox .eng_tit {margin:0 0 5px;}
#project .project_roll .roll .tBox .fs70 {max-width:100%; width:100%;}
#project .project_roll .roll .tBox .moreBtn {margin:40px 0 0;}
#project .project_nav_wrap {position:relative; padding:25px 0;}
#project .project_nav_wrap .project_nav_roll {width:100%;}
#project .project_nav_wrap .project_nav_roll {margin-left:-10px;}
#project .project_nav_wrap .project_nav_roll li {margin-left:10px;}
#project .project_nav_wrap .project_nav_roll li::after {border-width:3px;}


#news {padding:70px 0;}
#news .tit_wrap {text-align:center;}
#news .news_roll li a {padding:30px;}
#news .news_roll li a .sm_list {margin:0 0 10px;}
#news .news_roll li a .fs17 {margin:15px 0 0;}
#news .news_roll li a .date {margin:25px 0 0;}
#news .news_roll li a .date::before {font-size:16px;}
#news .btn_wrap {top:0; position:relative; margin:40px 0 0; justify-content:space-between; gap:0 10px;}

#news.action .tit_wrap {animation:fade-up 1.0s 0.3s forwards;}
#news.action .btn_wrap {animation:fade-up 1.0s 0.7s forwards;}
#news.action .news_roll {animation:fade-up 1.0s 0.5s forwards;}



#service {display:block;}
#service .basic_in {padding:70px 0;}
#service .basic_in .tit_wrap {width:100%; margin:0 0 20px; text-align:center;}
#service .basic_in .service_list {max-width:240px; margin:0 auto;}
#service .basic_in .service_list li {flex:none; width:100%; margin-top:-20px; margin-left:0;}
#service .basic_in .service_list li:first-of-type {margin-top:0;}
#service .basic_in .service_list li .fs15 {margin:15px 0 2px !important;}

}