#main {width:100%}
hr.main_hr {height:200px}
hr.main_hr2 {height:100px}


@media all and (max-width:900px) {
		hr.main_hr {height:100px}
		hr.main_hr2 {height:70px}


}


.tit {font-size:80px; margin-bottom:30px}
.main_vi {width:100%; height:100vh; position:relative }
.main_vi img {width:100%}
.main_vi .in { position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); }
.main_vi p { font-size:18px; font-weight:300; color:#fff; }
.main_vi h3 {font-size:75px; margin-top:20px;  color:#fff; display:flex}
.swiper-slide-active p {
  animation-name: text-active-animation;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.swiper-slide-active   h3 span {
  animation-name: text-active-animation;
  animation-duration: 1s;
  animation-fill-mode: both;
  letter-spacing:-3px;
}
@keyframes text-active-animation {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.main_vi h3 + h3 {margin-top:0}
 
.main_vi .btn_wrap {z-index:9999999999; margin-top:200px}
.main_vi .btn_wrap2 {width:200px; position:relative; height:30px; }
.main_vi .swiper-button-next:after  {font-size:15px}
.main_vi .swiper-button-prev:after {font-size:15px}
.main_vi .swiper-button-next {color:#fff;  }
.main_vi .swiper-button-prev {color:#fff;  }
.main_vi .swiper-pagination  {width:100%;  height:30px;  display:flex; align-items:center; justify-content:center; gap:10px}
.main_vi .swiper-pagination-bullet {background:none; width:auto; height:auto; line-height:30px; font-size:18px; font-family: "Montserrat",  'Pretendard'; color:#fff}
.main_vi .swiper-pagination-bullet-active {background:none}
.main_vi .swiper-pagination-bullet:before {content:'0'}
.main_vi .mySwiper {height:100%}
.main_vi .swiper-wrapper {height:100%}
.main_vi .swiper-slide {height:100%}
.main_vi .swiper-slide:after {content:''; width:100%; height:100%; background:rgba(0,0,0,.5); display:inline-block; position:absolute; left:0; top:0; }
.main_vi .swiper-slide .in {z-index:99;  }


.slide_text {margin:50px 0; width:100%; overflow:hidden}
.slide_text p {font-size:200px; white-space:nowrap}

@media all and (max-width:900px) {
	.main_vi {height:700px}
	.main_vi h3  {font-size:35px; gap:0 .5px}
	.main_vi span.rm10.lm10 {margin:0 4px !important}
	.main_vi p {font-size:10px}
	.slide_text p {font-size:71px;  }

}


.main_wrap {margin-bottom:200px;  font-size:18px; line-height:1.5}
.main_wrap img {max-width:100%}
.main_wrap * { transition: all 0.3s ease-out; }
.main_wrap .section1 {border-top:1px solid #ddd; padding-top:100px}
.main_wrap .section1 .left {padding-left:100px}
.main_wrap .section1 .left p {color:#ff8800; font-size:28px; font-weight:500; margin-bottom:20px}

@media all and (max-width:900px) {
		.main_wrap {font-size:16px}
		.main_wrap .section1 .left {font-size:14px; padding-left:0; margin-top:20px}
		.main_wrap .section1 .left p {font-size:18px}
}

 


.main_wrap .section2  {line-height:1.2}
.main_wrap .section2 b {font-size:55px; font-weight:700; color:#000}
.main_wrap .section2 p {font-size:30px; margin-top:20px; color:#363636}


@media all and (max-width:900px) {
	.main_wrap .section2 b {font-size:35px;  }
	.main_wrap .section2 p {font-size:16px; }
	.main_wrap .section2 div + hr.main_hr2 {height:50px}
  

}



.section3 {background-color:#f9f9f9; padding:100px 0}
 .section3  .top_text {text-align:center; margin-bottom:100px; line-height:1.2}
.section3  .top_text b {font-size:60px; font-weight:700}
.section3  .top_text p {font-size:35px; margin-bottom:10px  }

.section3 .left {width:70%; flex-shrink:0;  display:flex; flex-direction:column;  }
.section3 .left span.no {font-size:225px; flex-shrink:0; letter-spacing:-5px; width:310px;  font-family: "Montserrat"; font-weight:600;  line-height:1;  color:#eee}
.section3 .left h3 {margin-top:50px; font-size:45px; line-height:1.2; font-weight:700; position:Relative}
.section3 .left h3:before {width:11px; height:11px; background-color:var(--main_c); border-radius:50%; content:''; position:Absolute; left:-15px; top:0px}
.section3 .left h3 + p  {color:#212121; margin-top:30px}


.section3 .left ul {display:flex; gap:50px 50px; margin-top:auto;  flex-wrap:wrap}
.section3 .left ul li {width:calc(25% - 50px); display:flex; align-items:center; padding:15px 0; box-sizing:border-box; border-bottom:2px solid #dbdbdb; cursor:pointer; color:#dbdbdb }

.left-content,
.right-img {
    display: none;
}
.left-content.active,
.right-img.active {
    display: flex;
}

.left ul li.active {
    border-bottom:2px solid var(--main_c);
  color:var(--main_c); 
  font-weight:600
}


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

	.section3 .left {width:100%; }
	.section3 .top_text {margin-bottom:20px}
	.section3  .top_text b {font-size:35px;  }
	.section3  .top_text p {font-size:16px;  }

}

 
.product_list {display:flex; flex-wrap:wrap; gap:50px 2%;   }
.product_list li {width:32%}
.product_name {padding-left:20px; width:100%; box-sizing:border-box; border-left:2px solid var(--main_c)}
.product_name h4 {font-size:30px}
.product_name span {font-size:16px; font-family: "Montserrat"; font-weight:500;  margin-top:10px}

.product_list .img_box {border-radius:20px; margin-top:30px; line-height:0; overflow:hidden; position:relative}
.product_list .img_box img {width:100%}

.product_list li .img_box:after {width:100%; height:100%; background:rgba(0,0,0,.5); content:''; display:inline-block; position:absolute; left:0; top:0; opacity:0;  transition: all 0.3s ease-out;  }
.product_list li:hover .img_box:after {opacity:1}
.product_list li .img_box:before {content:''; width:22px; height:22px; background:url('/common/img/link_arrow.png') no-repeat; background-size:100%; position:Absolute; right:20px; top:20px; z-index:99; opacity:0;}
.product_list li:hover .img_box:before {opacity:1 }


.product_list li .img_box p {line-height:1.5; position:absolute; bottom:-100%; left:0; width:100%; z-index:9;  box-sizing:border-box; padding:20px; color:#fff; font-size:16px; font-weight:300}
.product_list li:hover .img_box  p {bottom:0}


@media all and (max-width:900px) {
.product_list {gap:20px 0}
	.product_list li {width:100%; padding:70px 20px; overflow:hidden; box-sizing:border-box; border-radius:10px;  background-color:#ddd; position:Relative}
.product_list li:after {width:100%; height:100%; background:rgba(0,0,0,.5); content:''; display:inline-block; position:absolute; left:0; top:0; opacity:1;  transition: all 0.3s ease-out;  }
	.product_name { position:Relative; z-index:9; display:flex; gap:10px; padding-left:10px } 
	.product_name h4 {font-size:24px; color:#fff}
	.product_name span {font-size:15px; color:#fff }
	.product_list .img_box { position:Relative; z-index:9; margin-top:20px; border-radius:0}
	.product_list .img_box img {display:none}
	.product_list li .img_box  p {position:static; font-size:13px; padding:0}
 	.product_list li .img_box:before {display:none}
	.product_list li:nth-child(1) {background:url('/common/img/product_img1.png') no-repeat; background-size:cover}
	.product_list li:nth-child(2) {background:url('/common/img/product_img2.png') no-repeat; background-size:cover}
	.product_list li:nth-child(3) {background:url('/common/img/product_img3.png') no-repeat; background-size:cover}
	.product_list li:nth-child(4) {background:url('/common/img/product_img4.png') no-repeat; background-size:cover}
	.product_list li:nth-child(5) {background:url('/common/img/product_img5.png') no-repeat; background-size:cover}
	.product_list li:nth-child(6) {background:url('/common/img/product_img6.png') no-repeat; background-size:cover}
	.product_list li:hover .img_box:after {opacity:0}

}

ul.news li {min-height:300px}
ul.news li.img_none dl {margin-top:auto}
ul.news li.img_none dt { 
			  display: -webkit-box;
			  -webkit-line-clamp: 2; /* 라인수 */
			  -webkit-box-orient: vertical;
 			  
}ul.news li dt { 
              display: -webkit-box;
			  -webkit-line-clamp: 2; /* 라인수 */
			  -webkit-box-orient: vertical;
			 
}
 

 .section5 iframe {height:100vh; width:100%}

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

   .section5 iframe {height:340px}

}