@import url("common.css");

/* 스와이퍼 공통 */
.pagination {position: relative; height: 1px !important; top:0 !important; left: 0 !important;}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {height: 3px; top: 50%; margin-top: -1.5px; background-color: var(--main);}


/* Visual */
#visual {position: relative; width: 100%; height: 100vh; overflow: hidden;}
#visual .visual_in {position: relative; width: 100%; height: 100%;}
#visual .visual_in .roll {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.7; background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 100%);}
#visual .visual_in .roll .v_bg .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transform: scale(1.1); transition:all 3s ease;}
#visual .visual_in .roll .v_bg .bg_mo {display: none;}
#visual .visual_in .roll .v_bg .jarallax {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

#visual .visual_in .roll .v_txt {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);  z-index: 999; padding-bottom: 40px;}
#visual .visual_in .roll .v_txt h3 {margin-bottom: 25px; transform: translateY(100px); opacity: 0; transition:all 1s ease; transition-delay: 0.3s;}
#visual .visual_in .roll .v_txt .more_btn_wrap {transform: translateY(100px); opacity: 0; transition:all 1s ease; transition-delay: 0.8s;}
#visual .visual_in .roll .v_txt p {transform: translateY(100px); opacity: 0; transition:all 1s ease; transition-delay: 0.5s; text-wrap: balance;}

#visual .visual_in .roll.action .v_bg .bg {transform: scale(1);}
#visual .visual_in .roll.action .v_txt > * {transform: translateY(0); opacity: 1;}

#visual .visual_pager {position: absolute; left: 50%; top: 50%; transform: translateX(-50%); z-index: 1000; animation: fadeIn 0.5s 0.5s ease forwards; opacity: 0;}
#visual .visual_pager ul {display: flex; gap: 20px;}
#visual .visual_pager ul li a {display: flex; align-items: center; opacity: 0.5; transition: all 0.3s linear;}
#visual .visual_pager ul li a .pager_line {width: 100px; height: 2px; background-color: rgba(255, 255, 255, 0.1); margin-left: 20px; position: relative; width: 0; margin-left: 0; transition: all 0.3s linear;}
#visual .visual_pager ul li a .pager_line .bar {position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: var(--white);}

#visual .visual_pager ul li.active a {opacity: 1;}
#visual .visual_pager ul li.active a .pager_line {width: 100px; margin-left: 20px;}

@keyframes pagerFill {
	from { width: 0; }
	to { width: 100%; }
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* About */
#about .section_tit {margin-bottom: 60px;}
#about .section_tit h2 {margin-bottom: 20px;}
#about .section_tit p.fs50 {margin-bottom: 40px;}

#about .about_grid ul {border: 1px solid var(--border);}
#about .about_grid li {padding: 35px 40px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);}
#about .about_grid li:nth-child(2n) {border-right: none;}
#about .about_grid li:nth-child(n+3) {border-bottom: none;}
#about .about_grid li h4 {font-size: 2.5rem; line-height: 140%; margin-bottom: 15px;}

#about .more_btn_wrap {display: flex; justify-content: center; margin-top: 60px;}

/* Service */
#service {background: url('/eng/img/service_bg.jpg') no-repeat center center / cover;}

#service .service_top {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px;}
#service .service_top .section_tit h2 {margin-bottom: 10px;}
#service .service_top .section_tit .brMo {display: none;}
#service .service_top .service_arrows {display: flex; gap: 15px;}
#service .service_top .service_arrows a {color: var(--black); opacity: 0.5;}
#service .service_top .service_arrows a:hover {opacity: 1;}
#service .service_top .service_arrows a::before {font-size: 40px;}
#service .service_top .service_arrows a.prev::before {content: '\e2ea';}
#service .service_top .service_arrows a.next::before {content: '\e5e1';}

#service .swiper-slide {height: auto;}

#service .service_card {display: flex; height: 100%; flex-direction: column;}
#service .service_card .imgbox {aspect-ratio: 51 / 38; overflow: hidden; transition: 0.5s ease; position: relative;}
#service .service_card .imgbox img {width: 100%; height: 100%; object-fit: cover; transition: 0.5s ease; position: relative; z-index: 2;}
#service .service_card .txtbox {padding: 30px 40px; background-color: var(--white); display: flex; gap: 40px; flex: 1;}
#service .service_card .txtbox .txt {display: flex; flex-direction: column; flex: 1;}
#service .service_card .txtbox h4 {margin-bottom: 10px; transition: 0.5s ease; }
#service .service_card .txtbox p.fs16 {opacity: 0.5; transition: 0.5s ease;}

#service .service_card .txtbox .icon_wrap {display: flex; align-items: center;}
#service .service_card .txtbox .icon {width: 58px; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--main); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--white); transition: var(--transition); position: relative; opacity: 0; transform: translateY(100%); transition: 0.5s ease; overflow: hidden;}
#service .service_card .txtbox .icon span {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; left: 0; transition: var(--transition);}   
#service .service_card .txtbox .icon span::before {content: '\f1df';}
#service .service_card .txtbox .icon span:last-child {position: absolute; left: 100%; top: 0;}

#service .service_card .txtbox .icon:hover {background-color: #1D154E;}
#service .service_card .txtbox .icon:hover span:first-child {left: -100%;}
#service .service_card .txtbox .icon:hover span:last-child {left: 0;}

#service .service_card:hover .imgbox {background-color: var(--main);}
#service .service_card:hover .imgbox img {transform: scale(1.1); opacity: 0.7;}

#service .service_card:hover .txtbox .icon {opacity: 1; transform: translateY(0);}
#service .service_card:hover .txtbox h4 {color: var(--main);}
#service .service_card:hover .txtbox p.fs16 {color: var(--main); opacity: 0.8;}

#service .pagination {margin-top: 50px;}


/* Global */
#global {background: url('/eng/img/global_bg.jpg') no-repeat center center / cover; height: var(--vh); overflow: hidden;}
#global .section_tit h2 {margin-bottom: 20px;}
#global .section_tit p.fs50 {margin-bottom: 25px;}
#global .section_tit p.fs18 {color: rgba(255, 255, 255, 0.8);}
#global .more_btn_wrap {margin-top: 60px;}

/* Case */
#case {overflow: hidden;}
#case .case_top {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px; gap: 20px; flex-wrap: wrap;}
#case .case_top .section_tit {flex: 1;}
#case .case_top .section_tit h2 {margin-bottom: 15px;}
#case .case_top .category_swiper {padding:10px 0 5px; margin: 0;}
#case .case_top .category_swiper .swiper-slide {width: auto;}
#case .case_top .category_swiper .swiper-slide a {display: block; padding: 9px 5px; border-bottom: 2px solid transparent;}
#case .case_top .category_swiper .swiper-slide.active a {border-color: var(--main); color: var(--main);}

#case .case_top .category_swiper .swiper-slide a:hover {color: var(--main);}

#case .case_swiper {overflow: visible;}
#case .case_swiper .is-hidden {display: none;}
#case .case_swiper .case_card {box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10); background-color: var(--white); display: block; height: auto;}
#case .case_swiper .case_card .imgbox {aspect-ratio: 375 / 250; overflow: hidden; transition: 0.5s ease; position: relative;}
#case .case_swiper .case_card .imgbox img {width: 100%; height: 100%; object-fit: cover; transition: 0.5s ease;}
#case .case_swiper .case_card .txtbox {padding: 30px; }
#case .case_swiper .case_card .txtbox .catname {margin-bottom: 5px;}
#case .case_swiper .case_card .txtbox h4 {margin-bottom: 10px; min-height: 2lh; transition: 0.5s ease;}
#case .case_swiper .case_card .txtbox p.fs16 {min-height: 2lh; transition: 0.5s ease;}

#case .case_swiper .case_card:hover .imgbox {background-color: var(--main);}
#case .case_swiper .case_card:hover .imgbox img {transform: scale(1.1); opacity: 0.7;}
#case .case_swiper .case_card:hover .txtbox h4 {color: var(--main);}
#case .case_swiper .case_card:hover .txtbox p.fs16 {color: var(--main); opacity: 0.8;}

#case .case_util {display: flex; align-items: center; margin-top: 40px; gap: 30px;}
#case .case_util .more_btn_wrap {flex-shrink: 0;}
#case .case_util .pagination {flex: 1; display: block !important; visibility: visible !important; opacity: 1 !important;}
#case .case_util .pagination.swiper-pagination-lock {display: block !important;}
#case .case_util .pagination .swiper-pagination-progressbar-fill {width: 100%;}

/* Inquiry */
.wrapper {overflow: unset;}
#inquiry {position: relative; opacity: 1 !important; height: calc(var(--vh) * 1.5);}
#inquiry::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--black); opacity: 0; transition: all 0.6s 1s ease;}
#inquiry .inquiry_bg {position: sticky; top: 0; left: 0; width: 100%; height: var(--vh);}
#inquiry .inquiry_bg::before {position: absolute; width: 100%; height: 100%; background: url('/eng/img/inquiry_bg.jpg') no-repeat center center / cover; transform: scale(0.6875); content: ''; transform-origin: center center;}


#inquiry.active::before {opacity: 1;}
#inquiry.active .inquiry_bg::before {animation: inquiryBg 2s ease forwards;}
#inquiry.active .inquiry_in {opacity: 1; transform: translate(0, 0);}

@keyframes inquiryBg {
    0% {transform: scale(0.6875)}
    50% {transform: scale(1); opacity: 1;}
    70% {transform: scale(1); opacity: 1;}
    100% {transform: scale(1); opacity: 0.4;}
}

#inquiry .inquiry_in {z-index: 2; text-align: center; transition: opacity 1s 2.5s ease, transform 1s 2.5s ease; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; position: sticky; margin-top: calc(var(--vh) * -1); height: var(--vh); opacity: 0; transform: translate(0, 100px)}
#inquiry .inquiry_in .section_tit {margin-bottom: 50px;}
#inquiry .inquiry_in .section_tit h2 {margin-bottom: 20px;}
#inquiry .inquiry_in .section_tit p.fs50 {margin-bottom: 25px;}
#inquiry .inquiry_in .more_btn_wrap {display: flex; justify-content: center; gap: 5px;}



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

}

/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){
/* About */
#about .section_tit p.fs18 br {display: none;}

#about .about_grid li h4 {font-size: 2.3rem;}


}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* About */
#about .about_grid ul {grid-template-columns: 1fr; border: none;}
#about .about_grid ul li {border-bottom: 1px solid var(--border) !important; padding: 25px 0; border-right: 0 !important;}
#about .about_grid ul li br {display: none;}
#about .about_grid ul li:first-child {border-top: 1px solid var(--border);}

/* Service */
#service .service_card .txtbox {padding: 25px 30px; gap: 20px;}
/* #service .service_card .txtbox .icon_wrap {align-items: flex-end;} */
#service .service_card .txtbox .icon {width: 45px;}
}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* Visual */
#visual br {display: none;}
#visual .visual_in .roll .v_txt h3 {margin-bottom: 15px;}

/* About */
#about .section_tit {margin-bottom: 40px;}
#about .section_tit h2 {margin-bottom: 10px;}
#about .section_tit p.fs50 {margin-bottom: 22px;}
#about .section_tit p.fs50 br {display: none;}

#about .more_btn_wrap {margin-top: 40px;}

/* Service */
#service .service_top {margin-bottom: 40px;}
#service .service_top .service_arrows {gap: 10px;}
#service .service_top .service_arrows a::before {font-size: 34px;}

#service .service_card .txtbox {padding: 20px 25px 25px;}
#service .service_card .txtbox .icon {display: none;}
#service .service_card .txtbox h4 {margin-bottom: 5px;}
#service .pagination {margin-top: 40px;}

/* Global */
#global br {display: none;}
#global .section_tit h2 {margin-bottom: 10px;}
#global .section_tit p.fs50 {margin-bottom: 22px;}

/* Case */
#case .case_top {flex-wrap: wrap;}
#case .case_top .category_swiper {width: 100%; overflow: visible;}

#case .case_swiper .case_card .txtbox {padding: 25px; padding-top: 20px;}
#case .case_swiper .case_card .txtbox .catname {margin-bottom: 3px;}

/* Inquiry */
#inquiry .inquiry_in .section_tit {margin-bottom: 40px;}
#inquiry .inquiry_in .section_tit h2 {margin-bottom: 10px;}
#inquiry .inquiry_in .section_tit p.fs50 {margin-bottom: 22px;}

#inquiry .inquiry_in .more_btn_wrap .more_btn {max-width: 100%;}

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* Visual */
#visual .visual_pager {top: auto !important; bottom: 40px;}

/* Service */
#service .service_top {position: relative;}
#service .service_top .section_tit .brMo {display: block;}
#service .service_top .service_arrows {position: absolute; right: 0; bottom: 0;}
}

/*******************************************************************************
    @media 360px
*******************************************************************************/
@media all and (max-width:360px){
/* Case */
#case .case_util {flex-wrap: wrap; gap: 20px;}
#case .case_util .pagination {flex: auto; width: 100%;}
#case .case_util .more_btn_wrap {display: flex; justify-content: center; width: 100%;}
}