@import url("common.css");



.header {background:transparent;}
.header .header_in h1 a svg {-webkit-filter: brightness(0) invert(1);  filter: brightness(0) invert(1);}
.header .header_in .top_util ul li a span::before {color:var(--white);}
.header .header_in .top_util ul li.btnMenu_m a span i {background:var(--white);}
.gnb ul li > a {color:var(--white);}





/* 화살표 */
.slick-arrow {border:0; padding:0; font-size:0; outline:none; cursor:pointer; transition:all .3s linear; position: absolute; z-index: 9999; background:transparent;}
.slick-arrow::before {font-size:32px; line-height:1; display:block; font-family:var(--icon); color:var(--white); opacity:0.5; font-weight:300; transition:all .5s;}
.slick-arrow:hover::before {opacity:1; transition:all .5s;}
.slick-prev::before {content:'\e2ea';}
.slick-next::before {content:'\e5e1';}





/*** Visual ***/
#visual{width:100%; height: var(--vh); overflow: hidden; background:var(--black); position: relative;}
#visual .visual_in{width: 100%; height: 100%; position: relative;}
#visual .visual_in .roll{width: 100%; height: var(--vh);}
#visual .visual_in .roll .v_txt{position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%); text-align:center; z-index: 9999; padding-bottom:80px;}

#visual .visual_in .roll .v_txt .t_list {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:0 0 30px; transition:all .6s; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_txt .t_list li {font-family:var(--eng); color:var(--white); font-weight: 700; line-height:177.778%; letter-spacing: 0.36px; text-transform: uppercase; font-size:1rem; display:flex; flex-wrap:wrap; align-items:center;}
#visual .visual_in .roll .v_txt .t_list li::after {content:'&'; font-family:inherit; font-size:inherit; text-transform:inherit; letter-spacing:inherit; line-height:inherit; opacity: 0.5; display:block; margin:0 10px;}
#visual .visual_in .roll .v_txt .t_list li:last-of-type::after {display:none;}
#visual .visual_in .roll .v_txt h2 {color:var(--white); transition:all .6s 0.3s; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_txt .fs20 {color:var(--white); padding:30px 0 0; transition:all .6s 0.6s; 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 .jarallax{position: relative; width: 100%; height:100%; opacity: .7;}
#visual .visual_in .roll .v_bg .jarallax iframe{position: absolute;}

#visual .control_box {position:absolute; top:53%; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; padding-top:120px; gap:0 20px;}
#visual .control_box .slick-dots {order:2;}
#visual .control_box .slick-arrow {}
#visual .control_box .slick-prev {order:1;}
#visual .control_box .slick-next {order:3;}

/* 스크롤 */
#visual .scroll_down{position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index: 9999;}
#visual .scroll_down span{display:block; animation:scroll_down 2s linear infinite;}
#visual .scroll_down span:before {content:'\ead0'; font-family:var(--icon); display:block; font-size:40px; line-height:1; color:var(--white); opacity:0.8;}


@keyframes scroll_down {
	0%,100% { transform:translateY(-10px);}
	50% { transform:translateY(10px);}
}

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


/* 화살표 */
#visual .slick-arrow{position:relative;}



/* 도트 */
#visual .slick-dots {font-size:0; display:flex; flex-wrap:wrap; align-items:center; gap:0 15px;}
#visual .slick-dots li{display:block; width:10px; height:10px; border:2px solid rgba(255,255,255,0.3); box-sizing:border-box; cursor:pointer; transition:all .5s; border-radius:100%; position: relative;}
#visual .slick-dots li:last-child{margin: 0;}
#visual .slick-dots li.slick-active{width:16px; height:16px; border:0px solid transparent; background:url("/img/v_dots.svg")no-repeat center / 100% auto; transition:all .5s;}
#visual .slick-dots li button{border:0; padding:0; font-size:0; outline:none; cursor:pointer;}


/* 효과 */
#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 .t_list {transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt h2 {transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt p {transform:translateY(0); opacity:1;}



section .titBox {position:relative; margin:0 0 60px;}
section .titBox .deco-tit {display:inline-flex; align-items:center; gap:0 10px; letter-spacing:0; text-transform: uppercase; color: var(--main); font-weight: 700; margin:0 0 15px;}
section .titBox .deco-tit::before {content:''; width: 16px; aspect-ratio: 1/1; background:url("/img/v_dots.svg")no-repeat center / 100% auto; display:block; border-radius:100%;}
section .titBox .flex-box {display:flex; flex-wrap:wrap; align-items:flex-end; gap:15px 38px; padding-right:120px; box-sizing:border-box;}
section .titBox .flex-box .fs60 {}
section .titBox .flex-box .fs18 {}
section .titBox .circleBtn {position:absolute; bottom:0; right:0;}

.circleBtn {width: 100px; aspect-ratio: 1/1; border-radius:100%; background:var(--main); display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; transition:all 0.5s; border:2px solid var(--main); box-sizing:border-box; overflow:hidden; transition:all 0.5s;}
.circleBtn span {display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; width:100%; height:100%; border-radius:100%; position:relative; z-index:10; transition:all 0.5s;}
.circleBtn span::after {content:''; width:10px; height:10px; background:var(--white); border-radius:100%; position:absolute; top:50%; left:50%; margin:-5px 0 0 -5px; transition:all 0.5s; opacity:0;}
.circleBtn span::before {content:'\f8ce'; font-size:35px; line-height:1; display:block; font-family:var(--icon); color:var(--white); transition:all 0.5s; position:relative; z-index:10;}
.circleBtn:hover span::before {transform:rotate(45deg); color:var(--main); transition:all 0.5s;}
.circleBtn:hover span::after {transform:scale(11); transition:all 0.5s; opacity:1;}








#about {width:100%; height:calc(var(--vh) * 1.5); position:relative; z-index:10;}
#about .basic_in {height:var(--vh); margin-top:calc(var(--vh) * -1); position:sticky; top:0; left:0;}
#about .bg {position:sticky; top:0; left:0;overflow:hidden; width:100%; height:var(--vh); }
#about .bg::before {content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); z-index:-1; width:50%; height:50%; background:url("/img/about_bg.jpg")no-repeat center / cover; transition:all 1s; overflow:hidden;}
#about .bg::after {content:''; width:566px;  aspect-ratio: 566 / 392; background:url("/img/symbol.svg")no-repeat center / 100% auto; position:absolute; bottom:-50px; left:50%; transform:translate(-50%,100%); transition:all 1s 2s;}
#about .tBox {text-align:center; position:relative; top:28%; transform:translateY(-50%); opacity:0; visibility:hidden;}
#about .tBox span.fs16 {display:flex; align-items:center; justify-content:center; color:var(--white); text-transform: uppercase; gap:0 10px;}
#about .tBox span.fs16::before, #about .tBox span.fs16::after {content:''; width: 16px; aspect-ratio: 1/1; display:block; border:5px solid var(--white); box-sizing:border-box; display:block; border-radius:100%;}
#about .tBox .fs60 {margin:15px 0 30px; color:var(--white);}
#about .tBox .fs18 {color:rgba(255,255,255,0.7); margin:0 0 30px;}
#about .tBox .circleBtn {margin:0 auto;}

#about.active .bg::before {width:100%; height:100%; transition:all 1s;}
#about.active .tBox {top:36%;  opacity:1; visibility:visible; transition:all 1s 1s;}
#about.active .bg::after {transform:translate(-50%,0); transition:all 1s 1s;}








#business {overflow:hidden;}
#business .titBox .flex-box {padding-right:0;}
#products {overflow:hidden;}

.swiper-control {margin:40px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:0 20px;}
.swiper-control .btn_wrap {display:flex; flex-wrap:wrap; gap:0 15px; flex-shrink: 0; /* height:35px; */}
.swiper-control .btn_wrap .swiper-button-next, .swiper-control .btn_wrap .swiper-button-prev {display:block; position:relative !important; width:auto !important; height:auto !important; right:0 !important; left:0 !important; bottom:0 !important; top:0 !important; margin:0 !important;}
.swiper-control .btn_wrap .swiper-button-next svg, .swiper-control .btn_wrap .swiper-button-prev svg {display:none;}
.swiper-control .btn_wrap .swiper-button-next::before, .swiper-control .btn_wrap .swiper-button-prev::before {content:'\e5e1'; font-family:var(--icon); display:block; font-size:35px; color:var(--black); font-weight:300; line-height:1;}
.swiper-control .btn_wrap .swiper-button-prev::before {transform: scaleX(-1);}
.swiper-pagination-progressbar {position:relative !important; height:1px !important; background: #D9D9D9 !important; flex:1;}
.swiper-pagination-progressbar-fill {background:var(--black) !important;}
.swiper-button-next:after, .swiper-button-prev:after {display:none !important;}









#procurement {}
#procurement .procurement_in {background:url("/img/procurement_bg.jpg")no-repeat center / cover; display:flex; flex-wrap:wrap; align-items:center; gap:20px; padding:100px 80px 120px; overflow:hidden;}
#procurement .procurement_in .tBox {flex:1;}
#procurement .procurement_in .tBox .fs40 {color:var(--white);}
#procurement .procurement_in .tBox .fs18 {color:rgba(255,255,255,0.7); margin:15px 0 0;}
#procurement .procurement_in .btnBox {flex-shrink: 0; display:flex; flex-wrap:wrap; gap:3px;}
#procurement .procurement_in .btnBox a {display: block; width: 240px; height: 80px; border-radius: 60px; border: 2px solid var(--basic); background: rgba(115, 115, 115, 0.90); box-sizing:border-box; overflow:hidden;}
#procurement .procurement_in .btnBox a.point {border: 2px solid var(--main); background: rgba(3, 110, 184, 0.90);}
#procurement .procurement_in .btnBox a span {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; gap: 10px; letter-spacing: var(--letter-spacing-button); font-weight: 600; color:var(--white); position:relative; z-index:10;}
#procurement .procurement_in .btnBox a span::before {content:''; width:10px; height:10px; background:var(--white); border-radius:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) scale(1); opacity:0; z-index:-1; transition:all 0.5s;}
#procurement .procurement_in .btnBox a span::after {content:'\f8ce'; font-size:30px; line-height:1; display:block; font-family:var(--icon); font-weight:300; transition:all 0.5s;}
#procurement .procurement_in .btnBox a:hover span::before {transform:translate(-50%, -50%) scale(30); opacity:1; transition:all 0.5s;}

#procurement .procurement_in .btnBox a:hover span {color:var(--baisc); transition:all 0.5s;}
#procurement .procurement_in .btnBox a:hover span::after {transform:rotate(45deg); transition:all 0.5s;}
#procurement .procurement_in .btnBox a.point:hover span {color:var(--main); transition:all 0.5s;}






.business_roll {}
.business_roll dl {overflow: hidden; aspect-ratio: 375 / 450; position:relative; z-index:10;}
.business_roll dl dt {position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1;}
.business_roll dl dt::after {content:''; width:50px; height:50px; background:rgba(3,110,184,0.8); position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) scale(1); opacity:0; transition:all 0.5s; border-radius:100%;}
.business_roll dl:hover dt::after {transform:translate(-50%, -50%) scale(15); opacity:1; transition:all 0.5s;}
.business_roll dl dt.bg01 {background:url("/img/business_bg01.jpg")no-repeat center / cover;}
.business_roll dl dt.bg02 {background:url("/img/business_bg02.jpg")no-repeat center / cover;}
.business_roll dl dt.bg03 {background:url("/img/business_bg03.jpg")no-repeat center / cover;}
.business_roll dl dt.bg04 {background:url("/img/business_bg04.jpg")no-repeat center / cover;}
.business_roll dl dt.bg05 {background:url("/img/business_bg05.jpg")no-repeat center / cover;}
.business_roll dl dt.bg06 {background:url("/img/business_bg06.jpg")no-repeat center / cover;}
.business_roll dl dd {width:100%; height:100%;padding:40px; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:flex-end;}
.business_roll dl dd::after {content:'\f8ce'; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; font-family:var(--icon); width:60px; aspect-ratio: 1 / 1; border:1px solid rgba(255,255,255,0.6); border-radius:100%; font-size:25px; position:absolute; top:30px; right:30px; color:var(--white); transition:all 0.5s;}
.business_roll dl:hover dd::after {border-color:var(--white); background:var(--white); color:var(--main); transition:all 0.5s; transform:rotate(45deg);}
.business_roll dl dd .fs24 {color:var(--white);}


.products_roll {}
.products_roll dl {background: var(--white); box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.06);}
.products_roll dl dt {overflow: hidden; aspect-ratio: 1 / 1;}
.products_roll dl dt img {display: block; width: 100%; height: 100%; object-fit: cover; transition:all 0.5s;}
.products_roll dl dd {padding:25px 35px; box-sizing:border-box;}
.products_roll dl dd .fs20 {transition:all 0.5s; font-weight: 600;}
.products_roll dl dd .fs16 {display:block; color:var(--main); font-weight: 600;}

.products_roll dl:hover dt img {transform:scale(1.15); transition:all 0.5s;}
.products_roll dl:hover dd .fs20 {color:var(--main); transition:all 0.5s;}



#news {overflow:hidden; background:url("/img/news_bg.jpg")no-repeat center / cover;}
#news .swiper-pagination-progressbar {background:rgba(191,179,198,0.8) !important;/* mix-blend-mode: multiply; */}
.news_roll {}
.news_roll dl {background: var(--white);}
.news_roll dl dt {position:relative; overflow: hidden; aspect-ratio: 375 / 250;}
.news_roll dl dt .cate {width:80px; height:30px; line-height:30px; position:absolute; top:0; right:0; z-index:10; background:var(--main); color:var(--white); text-align:center; font-family: var(--eng); font-size: 14px; font-weight: 700; text-transform: uppercase;}
.news_roll dl dt img {display: block; width: 100%; height: 100%; object-fit: cover; transition:all 0.5s;}
.news_roll dl dd {padding:30px; box-sizing:border-box;}
.news_roll dl dd .fs20 {font-weight: 600; transition:all 0.5s; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word; overflow:hidden; height: 3.7rem;}
.news_roll dl dd .fs14 {margin:20px 0 0; display:block;}

.news_roll dl:hover dt img {transform:scale(1.15); transition:all 0.5s;}
.news_roll dl:hover dd .fs20 {color:var(--main); transition:all 0.5s;}



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


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

.flex-box br {display:none;}

#procurement .procurement_in {display:block; text-align:center;}
#procurement .procurement_in .btnBox {justify-content:center; margin:40px 0 0;}

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


.circleBtn {width:70px;}
.circleBtn span::before {font-size:26px;}


.business_roll dl dd {padding:30px;}
.business_roll dl dd::after {width:50px; font-size:23px;}

.news_roll dl dd {padding:20px;}


#about .bg::after {width:80%;}

#procurement .procurement_in {padding:80px 30px 100px;}
#procurement .procurement_in .btnBox a {height:62px;}
#procurement .procurement_in .btnBox a span::after {font-size:26px;}


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

.slick-arrow::before {font-size:24px;}
.circleBtn {width:50px;}
.circleBtn span::before {font-size:17px;}



section .titBox {margin:0 0 30px;}

section .titBox .flex-box {padding-right:0; display:block;}
section .titBox .flex-box br {display:none;}
section .titBox .flex-box .fs60 {padding-right:0; box-sizing:border-box;}
section .titBox .circleBtn {bottom:auto; top:-15px;}


section .titBox .deco-tit {margin:0 0 10px;}
section .titBox .flex-box .fs18 {margin:10px 0 0;}


#visual .visual_in .roll .v_txt {padding-bottom:80px; top:40%;}
#visual .visual_in .roll .v_txt .t_list {margin:0 0 15px;}
#visual .visual_in .roll .v_txt .t_list li::after {margin:0 5px;}
#visual .visual_in .roll .v_txt .fs20 {padding:15px 0 0;}

#visual .slick-dots {gap:0 10px;}
#visual .control_box {gap:0 12px; padding-top:100px; top:43%;}

#visual .scroll_down span:before {font-size:30px;}

#about .bg::after {bottom:-20px;}
#about .tBox span.fs16::before, #about .tBox span.fs16::after {width:12px; border-width:3px;}
#about .tBox br {display:none;}
#about .tBox .fs60 {margin:10px 0 15px;}
#about .tBox .fs18 {margin:0 0 15px;}

.swiper-control {margin:20px 0 0; gap:0 10px;}
.swiper-control .btn_wrap {gap:0 10px;}
.swiper-control .btn_wrap .swiper-button-next::before, .swiper-control .btn_wrap .swiper-button-prev::before {font-size:24px;}


.business_roll dl dd {padding:20px;}
.business_roll dl dd::after {width:40px; font-size:18px; right:20px; top:20px;}

.products_roll dl dd {padding:15px 25px;}

.news_roll dl dd {padding:15px;}
.news_roll dl dt .cate {font-size:12px; width:70px; height:26px; line-height:26px;}
.news_roll dl dd .fs14 {margin:10px 0 0;}


#procurement .procurement_in {padding:60px 30px 70px;}
#procurement .procurement_in br {display:none;}
#procurement .procurement_in .tBox .fs18 {margin:5px 0 0;}
#procurement .procurement_in .btnBox {margin:30px 0 0;}
#procurement .procurement_in .btnBox a {height:45px; width:185px;}
#procurement .procurement_in .btnBox a span::after {font-size:20px;}


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

/* #visual .control_box {padding-top:80px;} */




}