@import url("common.css");

/* 메인: 회사소개/제품/위치 스티키 스택 스크롤(ref. est-in logistic류 full-bleed sticky panels) */
/*.main-stack { position:relative; }
.main-stack > #company, .main-stack > #product.compad_t { position:sticky; top:0; z-index:1; min-height:calc(100vh - var(--header_h)); box-sizing:border-box; background:var(--white); }
.main-stack > #location { position:sticky; top:var(--header_h); z-index:1; min-height:calc(100vh - var(--header_h)); box-sizing:border-box; background:var(--white); }
.main-stack > #company { z-index:1; }
.main-stack > #product.compad_t { z-index:2; overflow:visible; display:flex; flex-direction:column; }
.main-stack > #location { z-index:3;} */
/* #product: compad_t(상단 패딩) 아래 영역이 뷰포트 나머지를 채우도록 flex (패딩값은 common.css .compad_t와 동기: 기본 120px / 680이하 70px) */
/*.main-stack > #product.compad_t .product-wrap { flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; min-height:0; box-sizing:border-box; }*/

/* 공통 */
.main_tit {color:var(--black); padding-bottom:30px;}
.main_txt {color:rgba(34,34,34,0.7);}

/* figma main_260323(ver1) */
#visual {position:relative; width:100%; height:calc(100vh - 360px); overflow:hidden; background:var(--black);}
#visual .visual_in {width:100%; height:100%;}
#visual .visual_in .roll {position:relative; width:100%; height:calc(100vh - 360px);}
#visual .visual_in .roll .visual-bg {position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;}
#visual .visual_in .roll .visual-bg.mo {display:none;}
#visual .visual_in .roll .visual-bg img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -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 .visual-bg:after {content:""; display:block; width:100%; height:100%; background:rgba(0,0,0,.35); position:absolute; left:0; top:0;}
#visual .visual_in .roll .basic_in {position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:100px; box-sizing:border-box;}
#visual .visual_in .roll .visual-copy .fs16 {font-family:var(--roundT); color:rgba(255,255,255,.6); font-weight:700; margin:0 0 10px; letter-spacing:0.3rem; transition:all .6s 0.3s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .visual-copy .fs80 {color:var(--white); font-weight:800; margin:0; transition:all .6s 0.6s linear; transform:translateY(60px); opacity:0;}

#visual .visual-navi {position:absolute; right:50%; bottom:100px; margin-right:-700px; display:none; align-items:center; gap:30px; z-index:1105;}
#visual.has-navi .visual-navi {display:flex;}
#visual .visual-navi .page {display:flex; align-items:center; color:var(--white); line-height:175%;}
#visual .visual-navi .page .cur{font-weight:600; opacity:1;}
#visual .visual-navi .page .slash{margin:0 12px; opacity:0.6;}
#visual .visual-navi .page .tot {font-weight:400; opacity:0.6;}

#visual .visual_in .slick-arrow {position:absolute; bottom:106px; width:20px; height:20px; border:0; background:transparent; cursor:pointer; padding:0; display:inline-block; text-indent:-9999px; overflow:hidden; z-index:1100; transition:opacity .3s ease;}
#visual .visual_in .slick-arrow::before {font-family:var(--icon); width:100%; height:100%; font-size:15px; color:var(--white); line-height:1; display:flex; align-items:center; justify-content:center; text-indent:0;}
#visual .visual_in .slick-arrow:hover {opacity:0.5;}
#visual .visual_in .slick-prev {left:50%; margin-left:730px;}
#visual .visual_in .slick-prev::before {content:"\e5e0";}
#visual .visual_in .slick-next {right:50%; margin-right:-780px;}
#visual .visual_in .slick-next::before {content:"\e5e1";}  


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


/* 효과 */
#visual .visual_in .roll.action .visual-bg img {transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
#visual .visual_in .roll.action .visual-copy .fs16 {transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .visual-copy .fs80 {transform:translateY(0); opacity:1;}


#business .basic_in {max-width:100%; width:100%;}
#business .business-list{display:flex;}
#business .business-list li{width:33.3333%;}
#business .business-list li a {display:block; position:relative; height:360px; overflow:hidden;}
#business .business-list li a p {height:100%;}
#business .business-list li a p.none {position:absolute; left:0; top:0; width:100%; height:100%; z-index:1;}
#business .business-list li a p.none img{width:100%; height:100%; object-fit:cover; transition:all .4s linear;}
#business .business-list li a .hover{position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; visibility:hidden; z-index:2; transition:opacity .35s ease;}
#business .business-list li a .hover .jarallax {position: relative; width: 100%; height:100%; opacity: .7;}
#business .business-list li a .hover .jarallax iframe{position: absolute;}

#business .business-list li a:before{content:""; display:block; width:100%; height:100%; background:rgba(0,0,0,.4); position:absolute; left:0; top:0; z-index:2;}
#business .business-list li a .tbox {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; display:flex; flex-direction:column; align-items:center; width:100%; padding:0 5px; box-sizing:border-box;}
#business .business-list li a .tbox h3 {margin:0; text-align:center; color:var(--white);}
#business .business-list li a .tbox .btn {margin:30px auto 0 auto; transition:all .3s ease;} /* padding:0 20px 0 25px; height:55px; background:rgba(255,255,255,0.1); backdrop-filter:blur(10px); border-radius:var(--borderR5); */
#business .business-list li a .tbox .btn span {color:var(--white); display:flex; align-items:center; justify-content:center; gap:10px; font-weight:600; height:100%; letter-spacing:0;}
#business .business-list li a .tbox .btn span::after {display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; font-size:20px; font-family:var(--icon); content:"arrow_circle_right"; color:var(--white); transition:all .3s ease; font-variation-settings: 'FILL' 1; font-weight:400;}
#business .business-list li a:hover p.none{opacity:0;}
#business .business-list li a:hover .hover{opacity:1; visibility:visible;}
/* #business .business-list li a:hover .tbox .btn {background:var(--main);} */

#company {overflow-x:hidden;}
#company .company-wrap {display:flex; justify-content:space-between;}
#company .company-thumb {width:50%; max-width:780px; margin:0;}
#company .company-thumb img{width:100%; border-radius:20px; display:block;}
#company .company-copy {width:42.44%; max-width:662px; align-self:center;}
#company .company-copy .fs24 {margin:0 0 15px; color:var(--black); font-weight:600;}
#company .company-copy .btn_area{padding:80px 0 0;}

#product {}
#product .title-wrap {text-align:center; margin-bottom:40px; position:relative; }
#product .product-list ul {display:flex; flex-wrap:wrap; gap:30px;}
#product .product-list ul li {width:calc((100% - 30px) / 2);}
#product .product-list .imgbox {aspect-ratio:300/205; background:var(--grayBg); width:100%; border-radius:var(--borderR20); display:flex; align-items:center; justify-content:center; overflow:hidden;}
#product .product-list .imgbox img {max-width:100%; height:auto; display:block; mix-blend-mode: revert-layer;}

#location .title-wrap {text-align:center; margin:0 0 60px;}
#location .main_tit {text-align:center; margin:0;}
#location .location-list li{display:flex; align-items:flex-start; justify-content:space-between; margin:0 0 60px;}
#location .location-list li:last-child{margin:0;}
#location .location-list li .map_img {width:50%; margin:0; border-radius:15px; overflow:hidden;}
#location .location-list li .map_img img {width:100%; display:block;}
#location .location-list li .map_img{position:relative;}
#location .location-list li .map_img .none{opacity:1; transition:opacity .35s ease;}
#location .location-list li .map_img .hover{opacity:0; visibility:hidden; position:absolute; left:0; top:0; width:100%; height:100%; transition:opacity .35s ease;}
#location .location-list li .map_img .hover .jarallax {position: relative; width: 100%; height:100%;}
#location .location-list li .map_img .hover .jarallax iframe{position: absolute;}
#location .location-list li .map_img:hover .none{opacity:0;}
#location .location-list li .map_img:hover .hover{opacity:1; visibility:visible;}

/* 2공장은 비디오 없음*/
#location .location-list li:last-child .map_img:hover .none{opacity:1;}
#location .location-list li:last-child .map_img:hover .hover{opacity:0; visibility:hidden;}

#location .location-list li .map_img .map_icon {position:absolute; right:20px; bottom:20px; width:50px; height:50px; border-radius:var(--borderR10); background:rgba(255,255,255,0.95) url('/img/map_google.svg') center/50% no-repeat; z-index:3; background-size:auto 20px;}
#location .location-copy {width:50%; align-self:center; padding:0 0 0 60px; box-sizing:border-box;}
#location .location-copy ul{display:block;}
#location .location-copy ul li {display:flex; flex-direction:column; gap:6px 0;}
#location .location-copy .fs36 {margin:0 0 25px; color:var(--black);}
#location .location-copy .fs18 {margin:0 0 15px; color:var(--basic);}
#location .location-copy .fs18:last-child{margin:0;}
#location .location-copy .fs18 strong {display:flex; align-items:center; gap:6px; color:var(--black); font-weight:600;}
#location .location-copy .fs18 strong::before {content:""; display:inline-block; width:24px; height:24px; background-repeat:no-repeat; background-position:center; background-size:auto 24px;}
#location .location-copy .fs18 p {letter-spacing:inherit;}
#location .location-copy .info-prd strong::before{background-image:url('/img/map_prd_icon.svg');}
#location .location-copy .info-addr strong::before{background-image:url('/img/map_prd_add.svg');}
#location .location-copy .info-contact strong::before{background-image:url('/img/map_prd_phone.svg');}


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

#visual .visual-navi {right:calc(3% + 95px); bottom:100px; margin-right:0;}
#visual .visual_in .slick-arrow {bottom:106px;}
#visual .visual_in .slick-prev {left:auto; right:calc(3% + 40px); margin-left:0;}
#visual .visual_in .slick-next {right:3%; margin-right:0;}

#company .company-copy .main_txt br {display:none;}

}


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

#company .company-copy {width:45.44%; max-width:100%;}
#company .company-copy .btn_area {padding:60px 0 0;}

#product .product-list .swiper-slide {width:700px;}

#location .location-copy {padding: 0 0 0 40px;}

}


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

/* 공통 */
.main_tit {padding-bottom:20px;}


/* figma main_260323(ver1) */
#visual {height:calc(100vh - 280px);}
#visual .visual_in .roll {height:calc(100vh - 280px);}
#visual .visual_in .roll .basic_in {padding-bottom:70px;}
#visual .visual-navi {bottom:30px;}
#visual .visual_in .slick-arrow {bottom:36px;}

#business .business-list li a {height: 280px;}
#business .business-list li a .tbox h3 span {display:none;}
#business .business-list li a .tbox .btn {margin:20px auto 0 auto; padding: 0 15px; height: 45px;}
#business .business-list li a .tbox .btn span::after {width:18px; height: 18px; font-size: 18px;}

#company .company-copy .btn_area {padding:40px 0 0;}

#product .product-list ul {gap:30px 20px;}
#product .product-list ul li {width:calc((100% - 20px) / 2);}

#location .title-wrap {margin: 0 0 50px;}
#location .location-list li .map_img {width:48%;}
#location .location-list li .map_img .map_icon {background-size: auto 18px;}
#location .location-copy {width:48%; padding:0 0 0 10px;}
#location .location-copy .fs18 strong::before {width: 22px; height: 22px; background-size:auto 22px;}

}


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

/* 스티키 스택: 모바일에서 일반 흐름으로 복귀 */
.main-stack > #company, .main-stack > #product.compad_t { position:relative; top:auto; min-height:0; z-index:auto; }
.main-stack > #location { position:relative; top:auto; min-height:0; z-index:auto; }
.main-stack > #product.compad_t { overflow:hidden; display:block; }
.main-stack > #product .product-wrap { flex:0 1 auto; min-height:0; display:block; }

/* 공통 */
.main_tit {padding-bottom:15px;}

#visual {height:calc(100vh - 200px);}
#visual .visual_in .roll .visual-bg.mo {display:block;}
#visual .visual_in .roll .visual-bg.pc {display:none;}
#visual .visual_in .roll {height:calc(100vh - 200px);}
#visual .visual-navi {bottom:20px;}
#visual .visual_in .slick-arrow {bottom:22px;}

#business .business-list li a{height:200px;}
#business .business-list li a .tbox .btn {margin:15px auto 0 auto; height:42px;}
#business .business-list li a .tbox .btn span::after {width:16px; height: 16px; font-size: 16px;}

#company .company-wrap{display:block;}
#company .company-thumb{width:100%; margin:0 0 35px;}
#company .company-copy{width:100%;}
#company .company-copy .fs24 {margin: 0 0 10px;}
#company .company-copy .btn_area {padding:30px 0 0;}

#product .product-list ul {gap:20px;}

#location .title-wrap {margin: 0 0 40px;}
#location .location-list li {display:block; margin:0 0 30px;}
#location .location-list li .map_img {width:100%; margin-bottom:20px;}
#location .location-list li .map_img .map_icon {right:12px; bottom:12px; width:42px; height:42px; background-size: auto 15px;}
#location .location-copy {width:100%; padding:0;}
#location .location-copy .fs36{margin:0 0 16px;}
#location .location-copy .fs18{margin:0 0 10px;}
#location .location-copy .fs18 strong::before {width:18px; height:18px; background-size:auto 18px;}

}


@media all and (max-width:480px) {

#business .business-list li a .tbox .btn {margin:12px auto 0 auto; height:38px; padding:0 10px;}
#business .business-list li a .tbox .btn span {font-size:12px; gap:0 7px;}

#product .product-list ul {gap:10px 0;}
#product .product-list ul li {width:100%;}

}


@media all and (max-width:360px) {

#business .business-list li a .tbox .btn {padding:0 8px;}
#business .business-list li a .tbox .btn span {font-size:11px; gap:0 5px;}

}