@charset "utf-8";
:root {
    --size: clamp(10rem, 1rem + 30vmin, 30rem);
    --gap: calc(var(--size) / 5);
    --duration: 60s;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));
}

/* 메인 비주얼 */
.mainVisual { position: relative; }
.main_slider { position: relative; width: 100%; height: var(--app-height); opacity: 0; visibility: hidden; overflow: hidden; }
.main_slider.slick-initialized { opacity: 1; visibility: visible; }
.main_slider .slick-list { z-index: 1; }
.main_slider .slide { position: relative; height: var(--app-height);
	-webkit-backface-visibility: hidden;
  	backface-visibility: hidden;
}
.main_slider .slide:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: .05; z-index: 1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;   
}
.main_slider .slide .loading { display: none; position: absolute; top: 44%; left: 0; width: 100%; }
.main_slider.active .slide.slick-active { z-index: 1; }
.main_slider .slide .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; min-height: 100%; z-index: -1; background-position: center center; background-repeat: no-repeat; background-size: cover; transform: scale(1.1); transition: all 6.8s linear; }
.main_slider.active .slide.slick-active .bg { transform: scale(1); }
.main_slider .slide .image-entity { width: 100%; opacity: 0; visibility: hidden; }
.main_slider .slide .intro { position: absolute; left: 50%; top: 50%; max-width: 800px; height: auto; text-align: center; z-index: 3; transform: translate(-50%,-50%); }
.main_slider .slide .intro .txt_box .txt1 { position: relative; display: block; opacity: 0; font-size: 52px; font-weight: 300; text-transform: uppercase; line-height: 1.2; color: #fff; text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2); transform: translateY(50px); transition: all 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0.8s; }
.main_slider .slide .intro .txt_box .txt1 img { display: inline-block; }
.main_slider .slide.s1 .intro .txt_box .txt1 { font-weight: 500; }
.main_slider.active .slide.slick-active .intro .txt_box .txt1 { opacity: 1; transform: translateY(0); }

.mainVisual .slick_control { position: absolute; left: 50%; top: calc(50% + 120px); display: flex; transform: translateX(-50%); z-index: 3; }
.mainVisual .slide_arrow { display: none; width: 45px; height: 45px; font-size: 0; }
.mainVisual .slide_arrow a { display: block; width: 45px; height: 45px; background-position: left top; background-repeat: no-repeat; background-size: contain; opacity: 0.5; transition: all 0.2s ease-in-out; }
.mainVisual .slide_arrow a:hover { opacity: 1; }
.mainVisual .slide_arrow.prev a { background-image: url('../images/btn_prev.png'); }
.mainVisual .slide_arrow.next a { background-image: url('../images/btn_next.png'); }
/*
.mainVisual .mvi_slick_dots { padding: 0 10px; font-size: 0; }
.mainVisual .mvi_slick_dots .slick-dots { text-align: center; }
.mainVisual .mvi_slick_dots .slick-dots li { display: inline-block; font-size: 20px; font-weight: 700; line-height: 45px; color: rgba(255,255,255,0.4); margin: -2px 8px 0 8px; cursor: pointer; overflow: hidden; transition: all 0.3s; }
.mainVisual .mvi_slick_dots .slick-dots li.slick-active { color: #fff; }
*/

.mainVisual .mvi_slick_dots { position: absolute; top: 100%; left: 50%; margin: 0 auto; z-index: 2; transform: translateX(-50%); }
.mainVisual .mvi_slick_dots .slick-dots { width: 66px; }
.mainVisual .mvi_slick_dots .slick-dots li { display: inline-block; margin: 0 5px; overflow: hidden; transition: all 0.3s; }
.mainVisual .mvi_slick_dots .slick-dots li button { position: relative; display: block; width: 8px; height: 8px; cursor: pointer; font-size: 0; border-radius: 8px; background-color: rgba(255,255,255,0.4); outline: none; transition: all 0.3s; }
.mainVisual .mvi_slick_dots .slick-dots li.slick-active button { width: 38px; background-color: var(--color-secondary); }

.mainVisual .scrollDown { position: absolute; left: 50%; bottom: 0; width: 1px; height: 98px; background: rgba(255, 255, 255, 0.3); z-index: 2; }
.mainVisual .scrollDown::before { position: absolute; left: calc(50% + 5px); bottom: 10px; content: 'scroll'; font-size: 12px; font-weight: 500; letter-spacing: 5px; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; writing-mode: vertical-rl;}
.mainVisual .scrollDown::after{ display: inline-block; position: absolute; bottom: 0; left: 50%; content: ''; width: 1px; height: 98px; background: rgba(255, 255, 255, 1); transform: scaleY(0); animation: lineActiveAnimation 1.9s cubic-bezier(0.445,0.05,0.55,0.95) infinite; margin-left: -1px; }

@keyframes lineActiveAnimation {
    0% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: center top; transform-origin: center bottom; }
    49% {-webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center top; transform-origin: center bottom; }
    50% {-webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center bottom; transform-origin: center top; }
    99% {-webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: center bottom; transform-origin: center top; }
    100% {-webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: center bottom; transform-origin: center top; }
}

@media all and (max-width:1280px) {
	.main_slider { height: 685px; }
	.main_slider .slide { height: 685px; }
	.main_slider .slide .intro .txt_box .txt1 { font-size: 49px; }
	.main_slider .slide.s1 .intro .txt_box .txt1 img { width: 210px; height: 60px; }

	.mainVisual .slick_control { left: 0; margin-left: 0; width: 100%; bottom: 8%; justify-content: center; }
}

@media all and (max-width:768px) {
	.main_slider .slide .intro { width: 100%; }
	.main_slider .slide .intro .txt_box .txt1 { font-size: 31px; }
	.mainVisual .slick_control { display: none !important; }
	
}

@media all and (max-width:480px) {
	.main_slider { height: var(--app-height); }
	.main_slider .slide { height: var(--app-height); }
	.main_slider .slide .intro { text-align: center; }
	.main_slider .slide .intro .txt_box .txt1 { font-size: 28px; }
}


/* 공통 */
.msection { padding: 146px 8.33%; }
.msection .inner { width: 100%; max-width: 100%; }
.msec_tit1 { position: relative; display: block; font-size: 20px; font-weight: 700; color: var(--color-secondary); margin-bottom: 30px; text-transform: uppercase; }
.msec_tit2 { font-size: 42px; font-weight: 300; line-height: 1.3; } 

.mbtn_more { position: relative; display: inline-block; font-size: 15px; font-weight: 700; border: 1px solid #222; border-radius: 56px; padding: 13px 56px 13px 26px; margin-top: 46px; transition: all 0.3s; }
.mbtn_more::before { position: absolute; right: 26px; top: 50%; content: ''; width: 8px; height: 1px; margin-top: -3px; background-color: #222; transform: rotate(218deg); }
.mbtn_more::after { position: absolute; right: 26px; top: 50%; content: ''; width: 15px; height: 1px; background-color: #222; }
.mbtn_more:hover { background-color: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
.mbtn_more:hover::before,
.mbtn_more:hover::after { background-color: #fff; }


@media all and (max-width:1280px) {
	.msection { padding-left: 20px; padding-right: 20px; }
}

@media all and (max-width:768px) {
	.msection { padding-top: 64px; padding-bottom: 64px; }
	.msection br { display: none; }
	.msec_tit1 { font-size: 16px; margin-bottom: 20px; }
	.msec_tit2 { font-size: 34px; } 
}

@media all and (max-width:480px) {	
	.msec_tit1 { font-size: 14px; }
	.msec_tit2 { font-size: 26px; } 
}


/* -------- 사업분야 -------- */
.ms_bs .inner { display: flex; flex-wrap: wrap; }
.ms_bs .ctarea_l { position: relative; width: 480px; }
.ms_bs .bsSlde_nav { margin-top: 36px; }
.ms_bs .bsSlde_nav a { display: block; font-size: 28px; font-weight: 700; color: #c1c1c1; transition: all 0.3s; }
.ms_bs .bsSlde_nav a.active { color: var(--color-secondary); background: url('../images/icon_triangle.png') left center no-repeat; background-size: 9px 13px; padding-left: 20px; }
.ms_bs .slick_control { position: absolute; bottom: 0; left: 0; font-size: 0; z-index: 3; }
.ms_bs .slick_control .slide_arrow { display: inline-block; vertical-align: top; width: 45px; height: 45px; font-size: 0; margin-right: 1px; }
.ms_bs .slick_control .slide_arrow a { display: block; width: 45px; height: 45px; background-position: left top; background-repeat: no-repeat; transition: all 0.2s ease-in-out; }
.ms_bs .slick_control .slide_arrow.prev a { background-image: url('../images/btn_slide_prev.png'); }
.ms_bs .slick_control .slide_arrow.prev a:hover { background-image: url('../images/btn_slide_prevOv.png'); }
.ms_bs .slick_control .slide_arrow.next a { background-image: url('../images/btn_slide_next.png'); }
.ms_bs .slick_control .slide_arrow.next a:hover { background-image: url('../images/btn_slide_nextOv.png'); }

.ms_bs .ctarea_r { width: calc(100% - 480px); padding-left: 105px; }
.business_slick .bs_item { width: 445px; min-height: 526px; margin-right: 40px; padding: 52px 40px; background-color: #f8f8f8; background-position: center bottom 20px; background-repeat: no-repeat; overflow: hidden; }
.business_slick .bs_item.bs1 { background-image: url('../images/main/msc_02_img01.png'); }
.business_slick .bs_item.bs2 { background-image: url('../images/main/msc_02_img02.png'); }
.business_slick .bs_item.bs3 { background-image: url('../images/main/msc_02_img03.png'); }
.business_slick .item_con strong { font-size: 28px; font-weight: 700; }
.business_slick .item_con p { font-size: 18px; color: #8a8a8a; margin: 20px 0; } 
.business_slick .item_con .mbtn_more { font-size: 13px; padding: 7px 56px 7px 26px; margin-top: 0; }

@media all and (min-width:1281px) {
	.ms_bs { padding-right: 0; }
}

@media all and (max-width:1280px) {
	.ms_bs .ctarea_l { width: 100%; padding-bottom: 74px; }
	.ms_bs .msec_tit1 { margin-bottom: 18px; }
	.ms_bs .msec_tit2 br { display: none; }
	.ms_bs .ctarea_r { width: 100%; margin-top: 32px; padding-left: 0; }
	.business_slick .bs_item { min-height: 482px; margin-right: 20px; padding: 42px 32px; }
}

@media all and (max-width:768px) {
	.ms_bs .ctarea_l { padding-bottom: 65px; }
	.ms_bs .bsSlde_nav { margin-top: 28px; }
	.ms_bs .bsSlde_nav a { font-size: 24px; }
	.business_slick .bs_item { margin-right: 0; }
	.business_slick .item_con strong { font-size: 24px; }
	.business_slick .item_con p { font-size: 16px; } 
}

@media all and (max-width:480px) {
	.ms_bs .bsSlde_nav a { font-size: 22px; }
	.business_slick .bs_item { padding: 36px 24px; }
}


/* -------- 창고 보유현황 -------- */
.ms_wh { background: url('../images/main/msc_03_bg.jpg') center top no-repeat; background-size: cover; }
.ms_wh .inner { display: flex; flex-wrap: wrap; }
.ms_wh .ctarea_l { position: relative; width: 480px; }
.ms_wh .ctarea_l .msec_tit1, 
.ms_wh .ctarea_l .msec_tit2 { color: #fff; }
.ms_wh .ctarea_l .mbtn_more { color: #fff; border: 1px solid #fff; background-color: rgba(255, 255, 255, 0.1); }
.ms_wh .ctarea_l .mbtn_more::before { background-color: #fff; }
.ms_wh .ctarea_l .mbtn_more::after { background-color: #fff; }
.ms_wh .ctarea_l .mbtn_more:hover { background-color: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
.ms_wh .ctarea_l .mbtn_more:hover::before,
.ms_wh .ctarea_l .mbtn_more:hover::after { background-color: #fff; }

.ms_wh .slick_control { position: absolute; bottom: 0; left: 0; font-size: 0; z-index: 3; }
.ms_wh .slick_control .slide_arrow { display: inline-block; vertical-align: top; width: 45px; height: 45px; font-size: 0; margin-right: 1px; }
.ms_wh .slick_control .slide_arrow a { display: block; width: 45px; height: 45px; background-position: left top; background-repeat: no-repeat; transition: all 0.2s ease-in-out; }
.ms_wh .slick_control .slide_arrow.prev a { background-image: url('../images/btn_slide_prev.png'); }
.ms_wh .slick_control .slide_arrow.prev a:hover { background-image: url('../images/btn_slide_prevOv.png'); }
.ms_wh .slick_control .slide_arrow.next a { background-image: url('../images/btn_slide_next.png'); }
.ms_wh .slick_control .slide_arrow.next a:hover { background-image: url('../images/btn_slide_nextOv.png'); }

.ms_wh .ctarea_r { width: calc(100% - 480px); padding-left: 105px; }
.warehouse_slick .slick-list, 
.warehouse_slick .slick-track { display: flex; }
.warehouse_slick .wh_item { width: 445px; min-height: 526px; margin-right: 40px; padding: 52px 40px; background-color: #fff; overflow: hidden; }
.warehouse_slick .item_con { display: flex; flex-direction: column; justify-content: space-around; height: 100%; }
.warehouse_slick .item_con strong { font-size: 28px; font-weight: 700; }
.warehouse_slick .item_con ul { margin-top: 10px; margin-bottom: auto; }
.warehouse_slick .item_con ul li { display: flex; position: relative; font-size: 16px; line-height: 1.5; margin: 5px 0; color: #8a8a8a; padding-left: 15px; }
.warehouse_slick .item_con ul li::before { position: absolute; left: 0; top: 9px; content: ''; width: 5px; height: 5px; background-color: #ddd; border-radius: 50%; }
.warehouse_slick .item_con ul li .tit { display: inline-block; width: fit-content; margin-right: 8px; }
.warehouse_slick .item_con ul li .info { flex: 1 1 0; }
.warehouse_slick .item_con .pic { margin-top: 20px; border-radius: 16px; overflow: hidden; }
.warehouse_slick .item_con .pic img { width: 100%; height: auto; }

@media all and (min-width:1281px) {
	.ms_wh { padding-right: 0; }
}

@media all and (max-width:1280px) {
	.ms_wh .ctarea_l { width: 100%; padding-bottom: 86px; }
	.ms_wh .ctarea_l .mbtn_more { margin-top: 24px; }
	.ms_wh .msec_tit1 { margin-bottom: 18px; }
	.ms_wh .msec_tit2 br { display: none; }
	.ms_wh .ctarea_r { width: 100%; margin-top: 32px; padding-left: 0; }
	.warehouse_slick .wh_item { min-height: 482px; margin-right: 20px; padding: 42px 32px; }
}

@media all and (max-width:768px) {
	.ms_wh .ctarea_l { padding-bottom: 76px; }
	.warehouse_slick .wh_item { margin-right: 0; }
	.warehouse_slick .item_con strong { font-size: 24px; }
	.warehouse_slick .item_con ul li { font-size: 14px; }
}

@media all and (max-width:480px) {
	.warehouse_slick .wh_item { min-height: 426px; padding: 36px 24px; }
}