h3 {font-size:2em; line-height:1.2}
#container {  width:100%; display:inline-block;  font-size:17px; line-height:1.35; color:#333;  }
hr {height:90px}


h3 span.h3_span {font-size:14px; margin:0 10px; color:var(--main_c)}
h3.flex {font-size:2em; letter-spacing:-2px; color:#111; align-items:center; justify-content:center; }

.section {  position:relative}


@media all and (max-width:900px) {
		#container {  font-size:15px }
		h3 {font-size:1.5em}

		.section  {padding:100px 0; height:auto !important }
		.fp-tableCell  {height:auto !important }
		.aboutme {padding-bottom:0; padding-top:0}
 
}


.tit {font-size:3.5em; margin-bottom:5px; font-weight:700; font-family: "Poppins", sans-serif;}
.tit b {font-family: "Poppins", sans-serif; font-weight:700}
.tit + p {font-size:1.4em; font-weight:400;  margin-bottom:25px; color:#222  }


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

   .tit {font-size:2.5em; }
   .tit + p {font-size:1.1em; }


}


.about .in {max-width:1350px; position:relative; }
 
.about .left  {width:50%;  flex-shrink:0;   }
.about .right {width:45%; }
.about .img { background-size:cover !important  }

.about .box1 .left  { padding:40px 0 60px 0;  }
.about .box1 .left h3 {  line-height:1; color:var(--main_c); margin-bottom:10px; }
.about .box1 a {width:150px; height:150px; background-color:var(--main_c); color:#fff; display:flex; align-items:center; justify-content:center;  position:absolute; bottom:-50px; right:0; transition: all 0.3s ease-out; }
.about .box1 a:hover {border-radius:50%}

.about .box2 .right {padding:70px 0; display:flex; align-content:center; margin-left:auto;  flex-wrap:wrap;  border-bottom:3px solid var(--main_c)}
.about  p.t1 {font-size:1.7em; margin-bottom:10px; font-weight:700;  letter-spacing:-1px; color:#111}
.about  p.t2 {line-height:1.5}

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

	.about .in {padding-left:4%; padding-right:4%}
	.about .left  {width:100%; }
	.about .right  {width:100%; }
	.about .img {  height:200px }
	.about .box1 a {display:none}
	.about .box1 .left  { padding:0 0 60px 0;  }

	.about .box2 .right {padding:60px 0;}

	.about .box2 .left {order:2; }
	.about .box2 .right {order:1; border-bottom:none}

	.about  p.t1 {font-size:1.5em;  }
 


}

.section3 {background-color:#f4f5f7;}
.main_board .tit + p  {margin-bottom:30px}

.main_board {   position:relative}
.main_board .in {max-width:1420px}
.main_board * {transition: all 0.3s ease-out}
  
.main_board ul  {display:flex; justify-content:center;  gap:20px}
.main_board ul li { overflow:hidden;  width:25%; height:50vh; box-sizing:border-box; background-color:#fff;  position:relative; cursor:pointer; border-radius: 8px; }


.main_board ul li > div {width:100%; height:100%;  display:flex; align-items:flex-end; box-sizing:border-box; }
.main_board ul li b {font-size:1.6em; font-weight:600; line-height:1.1;  position:Relative; z-index:99}

.main_board ul li div.off {padding:25px; padding-bottom:50px; background:url('../images/slide_bn_img1.png') no-repeat  ; background-size:cover; color:#fff }
.main_board ul li:nth-child(2) div.off {  background:url('../images/slide_bn_img2.png') no-repeat  ;  background-size:cover; }
.main_board ul li:nth-child(3) div.off {  background:url('../images/slide_bn_img3.png') no-repeat  ;  background-size:cover; }
.main_board ul li:nth-child(4) div.off {  background:url('../images/slide_bn_img4.png') no-repeat  ;  background-size:cover; }
.main_board ul li div.off b {text-shadow:2px 2px 10px rgba(0,0,0,.8)}


@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


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

  .main_board .in {padding-left:4%; padding-right:4%}

}


@media all and (min-width:900px) {

	

	.main_board ul li div.on {color:#fff;   width:500px; height:100%; position:absolute; right:-500px; top:0; z-index:99} 
	.main_board ul li div.on .left {width:100%; height:100%; background:url('../images/slide_bn_img1.png') no-repeat center; background-size:cover; box-sizing:border-box;  padding:30px; padding-top:60px}
	.main_board ul li div.on .bg {display:none; }
	.main_board ul li div.on:after {width:100%; height:100%; background:rgba(94,168,221,.9); position:absolute; left:0; top:0; content:''}
	.main_board ul li:nth-child(2) div.on .left   {background:url('../images/slide_bn_img2.png') no-repeat center; background-size:cover; }
	.main_board ul li:nth-child(3) div.on .left   {background:url('../images/slide_bn_img3.png') no-repeat center; background-size:cover; }
	.main_board ul li:nth-child(4) div.on .left   {background:url('../images/slide_bn_img4.png') no-repeat center; background-size:cover; }

	.main_board ul li div.on p  {position:relative; z-index:99;  display:inline-block; margin-top:20px; font-size:1em; line-height:1.45}
	.main_board ul li div.on p a  {position:relative; z-index:99; width:150px; text-align:Center; line-height:40px; background-color:#fff; color:#333;  font-size:.95em; margin-top:20px; display:inline-block;  text-shadow:none}
	.main_board ul li div.on b {font-weight:800; font-size:1.8em; }


	.main_board ul li:hover {  width:500px; flex-shrink:0  }
	.main_board ul li:hover div.on {  right:0; } 
	.main_board ul li:hover:after {  background:none }


}

@media all and (max-width:900px) {
		.main_board ul {flex-wrap:wrap; gap:0}
		.main_board ul li  {width:50%}
		.main_board ul li div.on {display:none}
		.main_board ul li b {font-size:1.3em;  }

}


.map {background-color:#e8f4ff}
.map .in {position:Relative; z-index:99}
.map .ci {margin-top:-10px; width:90px}
.map .tit {font-size:60px; letter-spacing:-1px; color:#000; }
.map .bg {width:85%; position:absolute; left:50%; top:50%;  transform: translate(-52%, -46%); z-index:9; opacity:1}

.map ul  {  width:800px; justify-content:center;  margin:0 auto; margin-top:30px; gap:80px}
.map ul li  {width:33%; text-align:center; position:relative; overflow:hidden; border-bottom:7px solid var(--main_c); padding-bottom:20px; color:#111;  }
.map ul li:last-child:before  {display:none}

.map ul li h4 {font-weight:500;  font-size:25px; width:100%; text-align:left  }
.map ul li b {font-size:26px; display:flex;  align-items:flex-end; justify-content:flex-start;   align-items:center; width:100%; display:inline-block;  margin-top:5px; font-weight:600; letter-spacing:-1px}
.map ul li b span {font-size:82px; font-weight:800; letter-spacing:-4px; vertical-align:-4px;  }

.map table {width:100%;  max-width:900px; justify-content:center;  margin:0 auto; margin-top:30px; gap:80px}
.map table td  {width:33%; vertical-align:top;   }
.map table td div {width:90%; text-align:center; color:#111;  }
.map table tr:last-child td div {  border-bottom:7px solid var(--main_c); padding-bottom:20px;   }

.map table td h4 {font-weight:500;  font-size:25px; width:100%; text-align:left  }
.map table td b {font-size:26px; display:flex;  align-items:flex-end; justify-content:flex-start;   align-items:center; width:100%; display:inline-block;  margin-top:5px; font-weight:600; letter-spacing:-1px}
.map table td b span {font-size:82px; font-weight:800; letter-spacing:-4px; vertical-align:-4px;  }


.footer_section { padding-top:0; text-align:center}

@media all and (max-width:900px) {
		.map .tit {font-size:2.5em; letter-spacing:0; color:#000; }
		.map .ci {margin-top:0; width:50px}
		.map .bg {width:90%;  }


		.map ul  {width:100%; gap:15px; flex-wrap:nowrap; justify-content:center;  }
 		.map ul li {}
		.map ul li h4 {  font-size:1.2em; margin-bottom:10px  }
		.map ul li b {font-size:1.3em; letter-spacing:0px}
		.map ul li b span {font-size:1.8em; letter-spacing:-1px;  vertical-align:-2px}

		.map table {width:100%;  gap:15px; flex-wrap:nowrap; justify-content:center;  }
 
		.map table td h4 {  font-size:1.2em; margin-bottom:10px  }
		.map table td b {font-size:1.3em; letter-spacing:0px}
		.map table td b span {font-size:1.8em; letter-spacing:-1px;  vertical-align:-2px}

}

/***비쥬얼 컨트롤***/


 
#fp-nav.right {right:25px}
#fp-nav:after {width:1px; height:100%; background-color:#777; z-index:-9; content:''; position:absolute; right:7px; top:0}

.load_complete.fp-viewing-section1 #fp-nav ul li .fp-tooltip {color:rgba(255,255,255,.5);  }
.load_complete.fp-viewing-section1 #fp-nav ul li a span {background-color:#fff; }
.load_complete.fp-viewing-section1 #fp-nav ul li a span:after  {border:1px solid #fff; }
.load_complete.fp-viewing-section1 #fp-nav ul li a.active span {background-color:var(--main_c); }

#fp-nav ul li, .fp-slidesNav ul li {margin:7vh 0}
#fp-nav ul li:last-child {display:none}
#fp-nav ul li .fp-tooltip {color:#333; opacity:1; width:auto;  top:0;  font-size:13px; font-weight:600; }
#fp-nav ul li .fp-tooltip.right {right:25px}
#fp-nav ul li a span {background-color:#555; width:8px; height:8px; margin:0 !important; transform: translate(-50%, -50%) !important; }
#fp-nav ul li a span:after {width:12px; height:12px; border-radius:50%; border:1px solid #555;   position:absolute; left:50%; top:50%; content:''; transform: translate(-50%, -50%);}
#fp-nav ul li a.active span  {  background-color:var(--main_c);  }
#fp-nav ul li a.active span:after {  border:1px solid var(--main_c) !important; }


/*비쥬얼*/
 
   


.main-slider {width:100%; height:calc(100vh - 200px); position:absolute; top:0; left:0;   }

.swiper {
      width: 100%;
      height: 100%;
    }

.swiper-slide {
		text-align: center;
		width:100%; height:100%; 
		display:inline-block; background-color:#fff;
		position:relative; 
}

 

.vi_t2 {width:100%;   display:inline-block; text-align:left;  position:absolute; right:0; top:18vh; color:#333;  max-width:1500px; left:55%; top:50%;  transform: translate(-50%, -50%); color:#fff; z-index:999; }
.vi_t2 span {font-size:1.1em; text-shadow:2px 2px 3px rgba(0,0,0,.2)}
.vi_t2 h3 {font-size:3em; margin:5px 0 10px 0; text-shadow:2px 2px 10px rgba(0,0,0,.2); text-shadow:2px 2px 3px rgba(0,0,0,.2) }
.vi_t2 p {font-size:1.4em; text-shadow:2px 2px 10px rgba(0,0,0,.2); text-shadow:2px 2px 3px rgba(0,0,0,.2) } 
 
 
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
text-align: center; position:absolute; bottom:0;  display:flex; width:100%;  max-width:1350px;  left:50%;  transform: translate(-50%, 0); gap:1px; z-index:9999;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {  border-radius:0; margin:0 !important; height:190px; width:25%; font-family: 'Pretendard'; position:Relative; opacity:1; background-color:#9EA7B7; }
.swiper-pagination-bullet-active {background-color:#6FA9E2 !important}

.swiper-pagination-bullet:after {content:'2차전지'; color:#fff;    position:absolute; left:0; top:40px; width:100%; font-weight:600; font-size:24px; }
.swiper-pagination-bullet:before {content:'2차전지 물류전문팀을 특화운영 및 제품의 보관, 운송, 수출입 통관을 위한 최적의 물류솔루션 제공'; color:#fff;  position:absolute; left:0; top:80px; width:100%; padding:0 10%; box-sizing:border-box;  opacity:.9; line-height:1.5; font-size:16.5px; }
.swiper-pagination-bullet:nth-child(2):after {content:'Records Management';  font-weight:500; font-family:'Poppins'}
.swiper-pagination-bullet:nth-child(2):before {content:'기업의 중요서류의 보안강화, 재난대비, 공간활용 최적화를 위한 분산보관 솔루션'; }
.swiper-pagination-bullet:nth-child(3):after {content:'커피생두';  }
.swiper-pagination-bullet:nth-child(3):before {content:'온습도 관리, 방충, 방서 시설을 구축한 커피생두 전용 보관창고를 운영'; }
.swiper-pagination-bullet:nth-child(4):after {content:'EC택배물류';  }
.swiper-pagination-bullet:nth-child(4):before {content:'고객 맞춤형 서비스로 신속하고 정확하게 대응 가능한 EC물류시스템의 제공'; }


.swiper-pagination_list {text-align: center; position:absolute; bottom:0;  display:flex;   width:100%;  max-width:1350px;  left:50%;  transform: translate(-50%, 0);  gap:0; z-index:999999; }
.swiper-pagination_list li { height:190px; width:25%;  position:Relative; cursor:pointer;   }

a.pop_btn {
		position:absolute; right:100px; bottom:40px;  z-index:9999;
		font-size: 16px;
		border-radius: 5px;
		font-weight: 300;
		border:1px solid rgba(255,255,255,.3);   
		color: #fff;
		padding: 13px 25px;
		line-height: 1.3;
		margin-left: auto;
		display: flex;
		align-items: center;
		transition: all 0.2s ease-out; 
	}

a.pop_btn img  {margin-right: 10px; width: 45px;}
 

.video_pop {width:100%; max-width:1500px; position:absolute; display:flex; bottom:0; left:50%; transform: translate(-50%, 0);  z-index:99; gap:1px}
.video_pop li {position:relative; display:flex; width:25%; align-items:center; text-align:center; justify-content:center; background-color:#9EA7B7;  color:#fff; box-sizing:border-box; height:240px; padding:0 10px; transition: all 0.3s ease-out;  }
.video_pop li:hover {background-color:#5ea8dd}
.video_pop li div {font-weight:300; font-size:.96em}
.video_pop li h4 {font-size:1.2em; margin-bottom:10px}
.video_pop li img { position:absolute; top:25px; right:25px}


@media all and (max-width:1500px) {
 		.vi_t2 {width:25%;left: 14%;top:59%}


}


@media all and (max-width:900px) {
		.main-slider {position:static; height:300px;overflow:hidden }
		.vi_t2 span {font-size:1em; }
		.vi_t2 h3 {font-size:2em;  }
		.vi_t2 p {font-size:1.2em; } 
 
		.swiper {height:100%;}
		.video_pop {position:static; flex-wrap:wrap; transform: translate(0, 0);  }
		.video_pop li {position:static;  width:calc(50% - 1px); align-items:flex-start; padding:0;   height:auto; padding:30px 20px}
  
        a.pop_btn {bottom:auto; top:90vh; margin-top:-60px; right:20px}

}




footer {border-top:none;  padding:60px 0 100px 0;    }