@import url('sub.css');

/* 자동창고시스템 */
.warehouse-section { display: flex; flex-direction: column; gap: 50px; position: relative; isolation: isolate; }
.warehouse-section--gray::before { content: ""; position: absolute; left: 50%; top: -200px; width: 100vw; height: calc(100% + 400px); transform: translateX(-50%); background: var(--grayBg); z-index: -1; }
.warehouse-section__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.warehouse-section__category { color: var(--main); font-weight: 700; padding-bottom: 5px;}
.warehouse-section__title { margin: 0; color: var(--black); font-weight: 800 !important; font-family: var(--eng);}
.warehouse-section__subtitle { margin: 0; color: var(--black); font-weight: 400; padding-top: 10px; font-family:var(--eng);}
.warehouse-section__desc {max-width: 100%; margin: 0; color: var(--basic); font-weight: 400; padding-top: 20px; text-wrap: balance;}
.warehouse-section__desc strong { color: var(--black); font-weight: 700; }

.warehouse-section__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.warehouse-section__image { display: block; aspect-ratio: 4/2.63; overflow: hidden; }
.warehouse-section__image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.warehouse-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.warehouse-points.four{grid-template-columns: repeat(4, minmax(0, 1fr));}
.warehouse-point { position: relative; padding: 148px 40px 40px; border: 1px solid var(--border); background: var(--white); }
.warehouse-point > img { position: absolute; left: 39px; top: 39px; width: 72px; height: 72px; object-fit: contain; }

.warehouse-point__title { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin: 0 0 10px; font-weight: 700 !important;}
.warehouse-point__title span { color: var(--deep); font-family:var(--eng); font-weight: inherit;}
.warehouse-point__title em { font-style: normal; font-weight: 400; color: var(--deep); }

/* 물류센터 정보처리시스템 WMS 다이어그램 */
.wms__diagram{position: relative; text-align:center; padding: 50px 0 0;} 
.wms__diagram-img{max-width:730px; width: 100%; height: auto; margin: 0 auto;}
.wms-node{max-width:460px; width: 100%; position: absolute; }
.wms-node--top{top:0; left: 50%; transform:translateX(-50%);}
.wms-node--left{text-align:right; top:290px; right: 50%; margin-right: 350px;}
.wms-node--right{text-align:left; top:290px; left: 50%; margin-left: 350px;}
.wms-node--bottom-left{text-align:right; top:570px; right: 50%; margin-right: 260px;}
.wms-node--bottom-right{text-align:left; top:570px; left: 50%; margin-left: 260px;}
.wms-node__title{font-weight: 700; color:var(--black);}
.wms-node__title br{display: block;}
.wms-node__desc{color:var(--basic); padding-top: 4px;}
.wms-node__desc br{display: block;}

.wms__diagram_mobile{display: none;}


/* AMR·AGV·RGV (unmanned) */
.unmanned-list { display: flex; flex-direction: column; gap: 30px; }
.unmanned-row { display: flex;}
.unmanned-row__image {flex:1;}
.unmanned-row__image .warehouse-section__image {width: 100%; height: auto;}
.unmanned-row__txt { flex: 1; padding:0 0 0 80px; box-sizing:border-box; display: flex; flex-direction: column; justify-content: center;}
.unmanned-row__category {padding-bottom: 5px; color:var(--main);}
.unmanned-row__title{font-weight: 800; color:var(--black); font-family: var(--eng);}
.unmanned-row__desc{color:var(--black); font-weight: 400; padding-top: 15px;}
.unmanned-row .dots_list{padding-top: 15px;}




/* 솔루션개요 */
.solution_head{text-align:center; padding: 0 0 50px;}
.solution_head h3{font-family:var(--eng); font-weight: 800;}
.solution_head h3 span{display: inline; letter-spacing: inherit; line-height: inherit;}
.solution_head p{padding-top: 20px; font-weight: 300;}

.solution_image{text-align:center;}
.solution_image__item{padding: 50px 0;}
.solution_image__item img{max-width: 100%; height: auto;}

.solution_video h3{padding:0 0 50px;}

/* 솔루션 아코디언 (PC) */
.solution-accordion {display: flex; gap: 10px;}
.solution-accordion__item {flex: 1; min-width: 160px; height: 820px; overflow: hidden; transition: flex 0.45s ease, min-width 0.45s ease; }
.solution-accordion__item.is-active { flex:6; }

.solution-accordion__link { display: block; position: relative; width: 100%; height: 100%; color: inherit; text-decoration: none; cursor:default;}
.solution-accordion__bg { position: absolute; inset: 0; display: block; }
.solution-accordion__bg img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.solution-accordion__item.is-active .solution-accordion__bg img { transform: scale(1.05); }

.solution-accordion__gradient { position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); pointer-events: none; opacity: 0; transition: opacity 0.35s ease; }
.solution-accordion__item:hover .solution-accordion__gradient { opacity: 1; }
.solution-accordion__item.is-active .solution-accordion__gradient { opacity: 1; }
.solution-accordion__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.6); opacity: 1; transition: opacity 0.35s ease; pointer-events: none; }
.solution-accordion__item:hover .solution-accordion__bg::after { opacity: 0; }
.solution-accordion__item.is-active .solution-accordion__bg::after { opacity: 0; }

.solution-accordion__txt { position: absolute; left: 0; bottom: 0; width: 1040px; box-sizing:border-box; padding: 70px; display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.35s ease 0.1s, visibility 0.35s ease 0.1s, transform 0.35s ease 0.1s; }
.solution-accordion__item:hover .solution-accordion__txt { opacity: 1; visibility: visible; transform: translateY(0); }
.solution-accordion__item.is-active .solution-accordion__txt { opacity: 1; visibility: visible; transform: translateY(0); }

.solution-accordion__title {font-family:var(--eng); font-weight: 800; }
.solution-accordion__title span { display: inline; letter-spacing: inherit; line-height: inherit; }
.solution-accordion__desc { opacity: 0.8; font-weight: 400 !important;}
.solution-accordion__desc br{display: block;}

.solution-accordion__vertical { position: absolute; left: 50%; top: 50px; display: block; font-weight: 800; color: var(--white); white-space: nowrap; opacity: 1; transition: opacity 0.3s ease; pointer-events: none; transform: rotate(90deg); transform-origin: left center; font-family:var(--eng); letter-spacing: 0.5pt;}
.solution-accordion__item:hover .solution-accordion__vertical { opacity: 0; }
.solution-accordion__item.is-active .solution-accordion__vertical { opacity: 0; }



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

	
	.warehouse-section { gap: 40px; }
	.warehouse-section__subtitle br{display: none;}
	.warehouse-point { padding: 134px 30px 36px; }


/* 솔루션 아코디언 (PC) */
.solution-accordion__txt {width: 100%;}
.solution-accordion__desc br{display: none;}

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




	.warehouse-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.warehouse-point { padding: 120px 26px 30px; }
	.warehouse-point:nth-child(3) { grid-column: 1 / -1; }
	.warehouse-point > img { width: 64px; height: 64px; left: 30px; top:30px;}
	.warehouse-points.four{grid-template-columns: repeat(2, minmax(0, 1fr));}
	.warehouse-points.four .warehouse-point:nth-child(3) { grid-column: auto; }


	/* AMR·AGV·RGV (unmanned) */
	.unmanned-row__txt { padding:0 0 0 50px;}

/* 물류센터 정보처리시스템 WMS 다이어그램 */
.wms__diagram{padding: 90px 0 0;} 
.wms__diagram-img{max-width:550px;}
.wms-node{max-width:240px;}
.wms-node--left{top:260px; margin-right: 260px;}
.wms-node--right{top:260px; margin-left: 260px;}
.wms-node--bottom-left{top:470px; margin-right: 190px;}
.wms-node--bottom-right{top:470px; margin-left: 190px;}

.wms-node__title br{display: none;}
.wms-node__desc br{display: none;}



/* 솔루션 아코디언 (PC) */
.solution-accordion__item {min-width: 120px; height: 680px;}
.solution-accordion__txt {padding: 50px; gap:5px;}
.solution-accordion__vertical {top: 30px;}


}

/*******************************************************************************
    @media  ~980px
*******************************************************************************/
@media all and (max-width: 980px) {
    .warehouse-section--gray::before {top: -150px; height: calc(100% + 300px);}
	.warehouse-section { gap: 20px; }
	.warehouse-points { grid-template-columns: 1fr; gap: 10px;}
	.warehouse-points.four{grid-template-columns: repeat(1, minmax(0, 1fr));}
	.warehouse-point:nth-child(3) { grid-column: auto; }
	
	.warehouse-section__subtitle{padding-top: 5px;}
	.warehouse-section__desc{padding-top: 5px;}


/* 물류센터 정보처리시스템 WMS 다이어그램 */
.wms__diagram{padding: 0;} 
.wms__diagram-img{display: none;}
.wms-node{display: none;}
.wms-node__desc{padding-top: 2px;}

.wms__diagram_mobile{display: block;}
.wms__diagram_title{text-align:center;}
.wms__diagram_title p{color:var(--black);}
.wms__diagram_title h4{}
.wms__diagram_list{padding-top: 30px; max-width:600px; margin: 0 auto;}
.wms__diagram_list dl{display: flex;}
.wms__diagram_list dl ~ dl{margin-top: 10px;}
.wms__diagram_list dl dt{width: 100px;}
.wms__diagram_list dl dt figure{width: 100px; aspect-ratio:1/1; background:rgba(255, 255, 255, 0.10); border-radius:50%; box-shadow:10px 10px 45px rgba(101, 125, 162, 0.24); position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.wms__diagram_list dl dt figure::before{content:''; display: block; width: 100%; height: 100%; border-radius:50%; transform:scale(0.8); position: absolute; left: 0; top:0;}
.wms__diagram_list dl:nth-child(1) dt figure::before{background:#1BCCF4;}
.wms__diagram_list dl:nth-child(2) dt figure::before{background:#008ED5;}
.wms__diagram_list dl:nth-child(3) dt figure::before{background:#003876;}
.wms__diagram_list dl:nth-child(4) dt figure::before{background:#062548;}
.wms__diagram_list dl:nth-child(5) dt figure::before{background:#00D9C0;}
.wms__diagram_list dl dt img{transform:scale(0.6); position: relative; z-index: 5;}
.wms__diagram_list dl dd{flex:1; padding-left: 20px; box-sizing:border-box; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}


/* AMR·AGV·RGV (unmanned) */
.unmanned-list { gap: 20px; }
.unmanned-row { }
.unmanned-row__image {}
.unmanned-row__txt { padding:0 0 0 30px;}
.unmanned-row__desc{padding-top: 10px;}
.unmanned-row .dots_list{padding-top: 10px;}


/* 솔루션개요 */
.solution_head{padding: 0 0 30px;}
.solution_head p{padding-top: 10px;}
.solution_head p br{display: none;}
.solution_image__item{padding: 30px 0;}
.solution_video h3{padding:0 0 30px;}



/* 솔루션 아코디언 (PC) */
.solution-accordion {gap: 5px;}
.solution-accordion__item {min-width: 80px; height: 560px;}
.solution-accordion__txt {padding: 30px;}
.solution-accordion__vertical {top: 20px;}


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width: 680px) {
    .warehouse-section--gray::before {top: -100px; height: calc(100% + 200px);}
	.warehouse-section { gap: 15px; }
	.warehouse-section__gallery { grid-template-columns: 1fr; }
	.warehouse-point { padding: 90px 20px 20px; }
	.warehouse-point > img{width: 50px; height: 50px; left: 20px; top:20px;}

/* 물류센터 정보처리시스템 WMS 다이어그램 */
.wms__diagram_list{padding-top: 20px;}
.wms__diagram_list dl dt{width: 80px;}
.wms__diagram_list dl dt figure{width: 80px;}
.wms__diagram_list dl dt img{transform:scale(0.5);}
.wms__diagram_list dl dd{padding-left: 15px;}	

/* AMR·AGV·RGV (unmanned) */
.unmanned-row {flex-direction: column; }
.unmanned-row__image {}
.unmanned-row__txt { padding:15px 0 0;}
.unmanned-row__category {padding-bottom: 3px;}
.unmanned-row__desc{padding-top: 5px;}
.unmanned-row .dots_list{padding-top: 5px;}

/* 솔루션개요 */
.solution_head{padding: 0 0 20px;}
.solution_head p{padding-top: 6px;}

.solution_image__item{padding: 20px 0;}

.solution_video h3{padding:0 0 20px;}

/* 솔루션 아코디언 (PC) */
.solution-accordion {display: block;}
.solution-accordion__item {flex:auto; min-width: 100%; height:80px;}
.solution-accordion__item.is-active {flex:auto; height: 400px;}
.solution-accordion__txt {padding: 20px;}
.solution-accordion__vertical {top: 50%; left: 0; width: 100%; padding: 0 20px; box-sizing:border-box; transform:translateY(-50%); white-space: wrap;}


}