.act_btn.sec_btn { display: inline-block; overflow: hidden; margin-top: 55px; padding: 14px 54px; border: 1px solid #111; border-radius: 100px; }
.act_btn.sec_btn span { font-size: 17px; color: #111; }
.act_btn.sec_btn span::after { content:''; background:url('/images/main/go_black.png') no-repeat center; width:21px; height:11px; position:relative; display:inline-block; margin-left: 15px;}
.act_btn.sec_btn span::after { content:''; background:url('/images/main/go_black.png') no-repeat center; width:21px; height:11px; position:relative; display:inline-block; margin-left: 15px;}
.act_btn.sec_btn:hover span::after { background:url('/images/main/go.png') no-repeat center; }

.section-text { position: relative; }
.section-text .title { line-height: 1.2; font-size: 52px; font-weight: 700; color: #111111; letter-spacing: -0.03em; }
.section-text .title small { display: block; margin-bottom: 10px; font-size: 22px; font-weight: 600; color: #295c9b; letter-spacing: normal; }
.section-text .text { margin-top: 20px; font-size: 20px; letter-spacing: -.7px; line-height: 1.8;}
.section-text-small .title { line-height: 1.3; font-size: 46px; font-weight: 700; color: #111111; }

.main__section{
    padding-top:15rem;
    text-align: center;
	overflow:hidden;
}
.main__section-title{
    display: inline-block;
    margin-bottom:30px;
    border-bottom:1px solid #222;
    font-size:40px;
    font-weight: 600;
    text-align: center;
	    line-height: 1.4;
      text-transform: uppercase;
}

.main__section-sub{
    margin-bottom:60px;
    color:#666;
    font-size:17px;
    text-align: center;
}



@media screen and (min-width:1025px){
	/* hover button sample */
	.act_btn{position:relative; overflow:hidden;}
	.act_btn span{position:relative; z-index:2; transition:all ease .3s;}
	.act_btn:after{content:''; width:0; height:100%; background:#295c9b; position:absolute; right:0; top:0; transition:all ease .3s; }
	.act_btn:hover{ border-color:#295c9b !important;}
	.act_btn:hover:after{content:''; width:100%; left:0; right:auto }
	.act_btn:hover span{color:#fff; }
}

@media screen and (max-width: 1024px){
	.act_btn.sec_btn { padding: 14px 40px; }
    .act_btn.sec_btn span { font-size: 16px; }

    .section-text .title { font-size: 40px; line-height: 1.1; }
    .section-text .title small { font-size: 19px; }
    .section-text-small .title { font-size: 36px; }
    .section-text .text { font-size: 16px; }

	.main__section-title{font-size:32px;} 
	.main__section-sub{margin-bottom:3rem;}

}

@media screen and (max-width: 768px){
	.act_btn.sec_btn { margin-top: 30px; padding: 14px 34px; }
    .act_btn.sec_btn span { font-size: 15px; }
	
    .section-text .title { font-size: 34px; }
    .section-text .title small { font-size: 17px; margin-bottom: 5px; }
    .section-text-small .title { font-size: 30px; }
    .section-text .text { font-size: 15px; margin-top: 15px; }
}

@media screen and (max-width:480px) {
  .section-text .title{
    font-size: 26px;
  }
}

  /* 메인 비주얼 */

.main-banner{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.top_slider,
.top_slider_list,
.top_slider_item {
  position: relative;
  width: 100%;
  height: 100%;
}
.top_slider_item.half_item {
  display: flex;
}
.top_slider_item:nth-child(1) {
  background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)), url("/images/main/main_visuial01.jpg")
    no-repeat;
  background-size: cover;
  /* background-position: center 48%; */
}
.top_slider_item:nth-child(2) {
  background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)), url("/images/main/main_visuial02.jpg")
    no-repeat;
  background-size: cover;
  /* background-position: center 73%; */
}
.top_slider_item:nth-child(3) {
  background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)), url("/images/main/main_visuial03.jpg")
    no-repeat;
  background-size: cover;
  /* background-position: center bottom; */
}
.main-section.product .swiper-slide img{width: 100%;}
.bg_filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.top_slider_item .main_intro_box {
  z-index: 1;
  position: absolute;
  top: 50% !important;
  transform: translate(0%, -50%);
  width: 100%;
  color: #fff;
  text-align: center;
  opacity: 0;
  padding: 0 20px;
  box-sizing: border-box;
}

.main_intro_box .description {
	display: block;
	font-size: 20px;
	line-height: 33px;
	letter-spacing: -.7px;
  }
  .main_intro_box .description.pc {
	display: block;
  }
  .main_intro_box .description.mobile {
	display: none;
  }
  .main_intro_box .heading {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.2;
	margin: 25px 0;
  }
  .main_intro_box .heading.pc {
	display: block;
  }
  .main_intro_box .heading.mobile {
	display: none;
	margin: 8px 0 15px 0;
  }
  .main_intro_box .main_link_btn_box {
	width: 240px;
	height: 50px;
	border: 1px solid #fff;
	margin: 40px auto 0 auto;
  }
  .main_intro_box .main_link_btn_box .main_link_btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	font-size: 15px;
	color: #fff;
  }
  .main_intro_box .main_link_btn_box .main_link_btn > p > span {
	margin-left: 10px;
	padding-bottom: 2px;
  }
  .top_slider_pagination_box {
	position: absolute;
	top: 80%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
  }
  .top_slider_pagination_box .top_slider_fraction.mobile {
	display: none;
  }
  .top_slider_pagination .swiper-pagination-bullet {
	width: 12px;
	height: 5px;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 0;
	margin-right: 6px;
	/* transition: all 0.2s; */
  }
  .top_slider_pagination .swiper-pagination-bullet:last-child {
	margin-right: 0;
  }
  .top_slider_pagination
	.swiper-pagination-bullet.swiper-pagination-bullet-active {
	width: 50px;
	background-color: #fff;
  }
  .scroll_icon {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	transform: rotate(90deg);
  }
  .scroll_icon > img {
	width: 100%;
  }
  .scroll_icon .scroller {
	color: #fff;
	font-weight: 600;
  }
  .scroller,
  .scroller:before,
  .scroller:after {
	border-radius: 50%;
	width: 5px;
	height: 5px;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: load7 1.8s infinite ease-in-out;
	animation: load7 1.8s infinite ease-in-out;
  }
  .scroller {
	color: #ffffff;
	font-size: 14px;
	/* margin: 80px auto; */
	position: relative;
	text-indent: -55px;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
  }
  .scroller:before,
  .scroller:after {
	content: "";
	position: absolute;
	top: 0;
  }
  .scroller:before {
	left: -10px;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
  }
  .scroller:after {
	left: 10px;
  }
  @-webkit-keyframes load7 {
	0%,
	80%,
	100% {
	  box-shadow: 0 5px 0 -2.5px;
	}
	40% {
	  box-shadow: 0 5px 0 0;
	}
  }
  @keyframes load7 {
	0%,
	80%,
	100% {
	  box-shadow: 0 5px 0 -2.5px;
	}
	40% {
	  box-shadow: 0 5px 0 0;
	}
  }

@media screen and (max-width:1024px) {
  .main_intro_box .heading{
    font-size: 40px;
    line-height: 1.2;
  }
}


@media screen and (max-width:768px) {
  .main_intro_box .heading{
    font-size: 28px;
  }

  .main_intro_box .description{
    font-size: 16px;
    line-height: 1.6;
  }
}


  /* 메인 비주얼 */



  /* 섹션 2 */


/* main visual text up */
@-webkit-keyframes textAni {
	0% {
		opacity:0;
		transform:translateY(100%);
	}
	100% {
		opacity:1;
		transform:translateY(0);
	}
}
@-moz-keyframes textAni {
	0% {
		opacity:0;
		transform:translateY(100%);
	}
	100% {
		opacity:1;
		transform:translateY(0);
	}
}
@-ms-keyframes textAni {
	0% {
		opacity:0;
		transform:translateY(100%);
	}
	100% {
		opacity:1;
		transform:translateY(0);
	}
}
@-o-keyframes textAni {
	0% {
		opacity:0;
		transform:translateY(100%);
	}
	100% {
		opacity:1;
		transform:translateY(0);
	}
}
@keyframes textAni {
	0% {
		opacity:0;
		transform:translateY(100%);
	}
	100% {
		opacity:1;
		transform:translateY(0);
	}
}




/* main visual text up reverse */
@-webkit-keyframes textAniReverse {
	0% {
		opacity:1;
		transform:translateY(0);
	}
	100% {
		opacity:0;
		transform:translateY(100%);
	}
}
@-moz-keyframes textAniReverse {
	0% {
		opacity:1;
		transform:translateY(0);
	}
	100% {
		opacity:0;
		transform:translateY(100%);
	}
}
@-ms-keyframes textAniReverse {
	0% {
		opacity:1;
		transform:translateY(0);
	}
	100% {
		opacity:0;
		transform:translateY(100%);
	}
}
@-o-keyframes textAniReverse {
	0% {
		opacity:1;
		transform:translateY(0);
	}
	100% {
		opacity:0;
		transform:translateY(100%);
	}
}
@keyframes textAniReverse {
	0% {
		opacity:1;
		transform:translateY(0);
	}
	100% {
		opacity:0;
		transform:translateY(100%);
	}
}



/* main special leftmove */
@-webkit-keyframes leftMoveIn {
	0% {
		opacity:0;
		transform:rotate(25deg);
	}
	100% {
		opacity:1;
		transform:rotate(0);
	}
}
@-moz-keyframes leftMoveIn {
	0% {
		opacity:0;
		transform:rotate(25deg);
	}
	100% {
		opacity:1;
		transform:rotate(0);
	}
}
@-ms-keyframes leftMoveIn {
	0% {
		opacity:0;
		transform:rotate(25deg);
	}
	100% {
		opacity:1;
		transform:rotate(0);
	}
}
@-o-keyframes leftMoveIn {
	0% {
		opacity:0;
		transform:rotate(25deg);
	}
	100% {
		opacity:1;
		transform:rotate(0);
	}
}
@keyframes leftMoveIn {
	0% {
		opacity:0;
		transform:rotate(25deg);
	}
	100% {
		opacity:1;
		transform:rotate(0);
	}
}



/* main special leftmoveout */
@-webkit-keyframes leftMoveOut {
	0% {
		opacity:1;
		transform:rotate(0);
	}
	100% {
		opacity:0;
		transform:rotate(-25deg);
	}
}
@-moz-keyframes leftMoveOut {
	0% {
		opacity:1;
		transform:rotate(0);
	}
	100% {
		opacity:0;
		transform:rotate(-25deg);
	}
}
@-ms-keyframes leftMoveOut {
	0% {
		opacity:1;
		transform:rotate(0);
	}
	100% {
		opacity:0;
		transform:rotate(-25deg);
	}
}
@-o-keyframes leftMoveOut {
	0% {
		opacity:1;
		transform:rotate(0);
	}
	100% {
		opacity:0;
		transform:rotate(-25deg);
	}
}
@keyframes leftMoveOut {
	0% {
		opacity:1;
		transform:rotate(0);
	}
	100% {
		opacity:0;
		transform:rotate(-25deg);
	}
}



/* main special rightmove */
@-webkit-keyframes rightMoveIn {
	0% {
		opacity:0;
		transform:rotate(-25deg);
	}
	100% {
		opacity:1;
		transform:rotate(0);
	}
}
@-moz-keyframes rightMoveIn {
	0% {
		opacity:0;
		transform:rotate(-25deg);
	}
	100% {
		opacity:1;
		transform:rotate(0);
	}
}
@-ms-keyframes rightMoveIn {
	0% {
		opacity:0;
		transform:rotate(-25deg);
	}
	100% {
		opacity:1;
		transform:rotate(0);
	}
}
@-o-keyframes rightMoveIn {
	0% {
		opacity:0;
		transform:rotate(-25deg);
	}
	100% {
		opacity:1;
		transform:rotate(0);
	}
}
@keyframes rightMoveIn {
	0% {
		opacity:0;
		transform:rotate(-25deg);
	}
	100% {
		opacity:1;
		transform:rotate(0);
	}
}



/* main special rightmoveout */
@-webkit-keyframes rightMoveOut {
	0% {
		opacity:1;
		transform:rotate(0);
	}
	100% {
		opacity:0;
		transform:rotate(25deg);
	}
}
@-moz-keyframes rightMoveOut {
	0% {
		opacity:1;
		transform:rotate(0);
	}
	100% {
		opacity:0;
		transform:rotate(25deg);
	}
}
@-ms-keyframes rightMoveOut {
	0% {
		opacity:1;
		transform:rotate(0);
	}
	100% {
		opacity:0;
		transform:rotate(25deg);
	}
}
@-o-keyframes rightMoveOut {
	0% {
		opacity:1;
		transform:rotate(0);
	}
	100% {
		opacity:0;
		transform:rotate(25deg);
	}
}
@keyframes rightMoveOut {
	0% {
		opacity:1;
		transform:rotate(0);
	}
	100% {
		opacity:0;
		transform:rotate(25deg);
	}
}

/* 유튜브 */
.main-video .inner{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding-bottom: 10rem;
}

.video-wrapper {
  width: calc(50% - 16px);
  flex: 1 1 45%; 
  aspect-ratio: 16 / 9;
  position: relative;
  min-width: 300px; 
}

.video-wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-wrapper p{font-size: 20px; font-weight: 600; position: absolute; bottom:-40px;}

@media (max-width: 768px) {
  .video-wrapper {
    flex: 1 1 100%;
  }
  .main-video .inner{gap: 65px;}
}


/* ----- special ----- */
.main-special { overflow: hidden; padding: 100px 0; }
.main-special .inner{
	position: relative;
}
.main-special .main-special-slider { height:100%;}
.main-special .main-special-slider > div { height:100%;}
.main-special .main-special-slider > div > div { height:100%;}
.main-special .main-special-slider .slick-slide > div { height:100%;}
.main-special .main-special-slider .slick-slide > div > div { overflow: hidden; position:relative; display:block !important; height:100%;}
.main-special .main-special-slider .slick-dots { display:flex; align-items:flex-start; position:absolute; top: 0; left: 0; bottom: auto;  width:100%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
	transition: all 0.5s;
	opacity: 0;
}

.main-special.animated .main-special-slider .slick-dots {
	transform: none;
	opacity: 1;
}

.main-special .main-special-slider .slick-dots li { display:flex; justify-content:center; align-items:center; position:relative; margin-right:15px; width:14px; height:14px; transition: all 0.3s;}
.main-special .main-special-slider .slick-dots li button { display:block; width:8px; height:8px; border-radius:50%; border:none; background:#ddd; font-size:0; line-height:0; text-indent:-9999px;}
.main-special .main-special-slider .slick-dots li.slick-active {/*  width:30px; height:30px; */ transform: scale(1.5); transform-origin: center center;}
.main-special .main-special-slider .slick-dots li.slick-active button { position:absolute; left:0; top:0; width:100%; height:100%; /* background:transparent; border-radius:0; */
    -webkit-animation: windMill 2s linear infinite;
    -moz-animation: windMill 2s linear infinite;
    -ms-animation: windMill 2s linear infinite;
    -o-animation: windMill 2s linear infinite;
    animation: windMill 2s linear infinite;
}
.main-special .main-special-slider .slick-dots li.slick-active button span {display: none; content:""; position:absolute; left:50%; top:50%; margin-top:-10px; margin-left:-1.5px; width:3px; height:6px; background:#38b800;}
.main-special .main-special-slider .slick-dots li.slick-active button:after { display: none; content:""; position:absolute; left:50%; top:50%; margin-left:-9.5px; margin-top:4px; width:3px; height:6px; background:#38b800;
    -webkit-transform-origin:0 center;
    -moz-transform-origin:0 center;
    -ms-transform-origin:0 center;
    -o-transform-origin:0 center;
    transform-origin:0 center;
    -webkit-transform:rotate(60deg) translate(-50%,-50%);
    -moz-transform:rotate(60deg) translate(-50%,-50%);
    -ms-transform:rotate(60deg) translate(-50%,-50%);
    -o-transform:rotate(60deg) translate(-50%,-50%);
    transform:rotate(60deg) translate(-50%,-50%);
}
.main-special .main-special-slider .slick-dots li.slick-active button:before { display: none; content:""; position:absolute; left:50%; top:50%; margin-left:9.5px; margin-top:4px; width:3px; height:6px; background:#38b800;
    -webkit-transform-origin:0 center;
    -moz-transform-origin:0 center;
    -ms-transform-origin:0 center;
    -o-transform-origin:0 center;
    transform-origin:0 center;
    -webkit-transform:rotate(-60deg) translate(-50%,-50%);
    -moz-transform:rotate(-60deg) translate(-50%,-50%);
    -ms-transform:rotate(-60deg) translate(-50%,-50%);
    -o-transform:rotate(-60deg) translate(-50%,-50%);
    transform:rotate(-60deg) translate(-50%,-50%);
}
.main-special .main-special-slider .slick-slide .sp-con { position:relative; z-index:1; margin:0 auto; width:100%; height:100%;}
.main-special .main-special-slider .slick-slide .sp-con .txtbox { position:relative;  top:50%; width:48%; min-height:48em;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
	opacity: 0;
	transition: all 0.5s;
}

.main-special.animated .main-special-slider .slick-slide .sp-con .txtbox{
	transform: none;
	opacity: 1;
}

.main-special .main-special-slider .slick-slide .sp-con h2 { padding-top:85px; font-size:32px; color:#333333; font-weight:300; line-height:1.3em; letter-spacing:-0.005em;}
.main-special .main-special-slider .slick-slide .sp-con h2 strong { font-weight:800;}
.main-special .main-special-slider .slick-slide .sp-con p { margin-top:1.389em; font-size:18px; color:#999; font-weight:400; line-height:1.667em;}
.main-special .main-special-slider .slick-slide .ani-txt-wrap { overflow: hidden; display:block;}
.main-special .main-special-slider .slick-slide .ani-txt-wrap > span { display:block;
    opacity:0;
    -webkit-transform:translateY(100%);
    -moz-transform:translateY(100%);
    -ms-transform:translateY(100%);
    -o-transform:translateY(100%);
    transform:translateY(100%);
}


.main-special .main-special-slider .slick-slide .sp-con .btnwrap { display:flex; flex-wrap:wrap; align-items:flex-end; margin-top:2em; height:auto; gap: 30px;}
/* .main-special .main-special-slider .slick-slide:nth-child(2) .sp-con .btnwrap { height:10em;} */
.main-special .main-special-slider .slick-slide .sp-con .btnwrap > div { width:100%;}
.main-special .main-special-slider .slick-slide .sp-con .btnwrap > div a {
    opacity:0;
    -webkit-transform:translateY(100%);
    -moz-transform:translateY(100%);
    -ms-transform:translateY(100%);
    -o-transform:translateY(100%);
    transform:translateY(100%);
	display: flex;
	justify-content: flex-start;

}

.main-special .main-special-slider .slick-slide.slick-active .ani-txt-wrap > span,
.main-special .main-special-slider .slick-slide.slick-active .sp-con .btnwrap > div a {
    -webkit-animation:textAni 1s ease both;
    -moz-animation:textAni 1s ease both;
    -ms-animation:textAni 1s ease both;
    -o-animation:textAni 1s ease both;
    animation:textAni 1s ease both;
}
.main-special .main-special-slider .slick-slide.slick-active h2 .ani-txt-wrap:nth-child(1) > span {
    -webkit-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
    -ms-animation-delay: 0.9s;
    -o-animation-delay: 0.9s;
    animation-delay: 0.9s;
}
.main-special .main-special-slider .slick-slide.slick-active h2 .ani-txt-wrap:nth-child(2) > span {
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    -ms-animation-delay: 0.8s;
    -o-animation-delay: 0.8s;
    animation-delay: 0.8s;
}
.main-special .main-special-slider .slick-slide.slick-active p .ani-txt-wrap:nth-child(1) > span {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    -ms-animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
.main-special .main-special-slider .slick-slide.slick-active p .ani-txt-wrap:nth-child(2) > span {
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -ms-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.main-special .main-special-slider .slick-slide.slick-active .sp-con .btnwrap > div:nth-child(1) a {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -ms-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.main-special .main-special-slider .slick-slide.slick-active .sp-con .btnwrap > div:nth-child(2) a {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    -ms-animation-delay: 0.1s;
    -o-animation-delay: 0.1s;
    animation-delay: 0.1s;
}
.main-special.animated .main-special-slider .slick-slide.slick-active .ani-txt-wrap > span,
.main-special.animated .main-special-slider .slick-slide.slick-active .sp-con .btnwrap > div a {
    -webkit-animation:textAni 1s ease both;
    -moz-animation:textAni 1s ease both;
    -ms-animation:textAni 1s ease both;
    -o-animation:textAni 1s ease both;
    animation:textAni 1s ease both;
}
.main-special.animated .main-special-slider .slick-slide.slick-active h2 .ani-txt-wrap:nth-child(1) > span {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    -ms-animation-delay: 0.1s;
    -o-animation-delay: 0.1s;
    animation-delay: 0.1s;
}
.main-special.animated .main-special-slider .slick-slide.slick-active h2 .ani-txt-wrap:nth-child(2) > span {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -ms-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.main-special.animated .main-special-slider .slick-slide.slick-active p .ani-txt-wrap:nth-child(1) > span {
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -ms-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.main-special.animated .main-special-slider .slick-slide.slick-active p .ani-txt-wrap:nth-child(2) > span {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    -ms-animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
.main-special.animated .main-special-slider .slick-slide.slick-active .sp-con .btnwrap > div:nth-child(1) a {
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    -ms-animation-delay: 0.8s;
    -o-animation-delay: 0.8s;
    animation-delay: 0.8s;
}
.main-special.animated .main-special-slider .slick-slide.slick-active .sp-con .btnwrap > div:nth-child(2) a {
    -webkit-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
    -ms-animation-delay: 0.9s;
    -o-animation-delay: 0.9s;
    animation-delay: 0.9s;
}
.main-special .main-special-slider .slick-slide .sp-img { position:absolute; left:50%; top:50px; z-index:-1; max-width:1540px; width:90%; height:100%;
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    -o-transform:translateX(-50%);
    transform:translateX(-50%);
}
.main-special .main-special-slider .slick-slide .sp-img .imgbox { overflow:hidden; position:absolute; right:0; bottom:50%; margin-bottom:-21.9335%; max-width:900px; padding-bottom:43.871%; width:63%; height:0;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
    -webkit-transform-origin:center 200%;
    -moz-transform-origin:center 200%;
    -ms-transform-origin:center 200%;
    -o-transform-origin:center 200%;
    transform-origin:center 200%;
}
.main-special .main-special-slider .slick-slide .sp-img .imgbox img { position:absolute; left:50%; top:50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}
.main-special .main-special-slider .slick-slide .sp-img .bg { display:none !important; opacity:0.5; position:absolute; right:0; bottom:0; z-index:-1; margin-right:-11.5%;
    -webkit-transform:scale(2) translateX(50%);
    -moz-transform:scale(2) translateX(50%);
    -ms-transform:scale(2) translateX(50%);
    -o-transform:scale(2) translateX(50%);
    transform:scale(2) translateX(50%);
}
.main-special .main-special-slider.left .slick-slide .sp-img .imgbox {
    -webkit-animation:leftMoveOut 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
    -moz-animation:leftMoveOut 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
    -ms-animation:leftMoveOut 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
    -o-animation:leftMoveOut 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
    animation:leftMoveOut 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
}
.main-special .main-special-slider.left .slick-slide.slick-active .sp-img .imgbox {
    -webkit-animation:leftMoveIn 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
    -moz-animation:leftMoveIn 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
    -ms-animation:leftMoveIn 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
    -o-animation:leftMoveIn 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
    animation:leftMoveIn 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
}
.main-special .main-special-slider.right .slick-slide .sp-img .imgbox {
    -webkit-animation:rightMoveOut 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
    -moz-animation:rightMoveOut 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
    -ms-animation:rightMoveOut 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
    -o-animation:rightMoveOut 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
    animation:rightMoveOut 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
}
.main-special .main-special-slider.right .slick-slide.slick-active .sp-img .imgbox {
    -webkit-animation:rightMoveIn 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
    -moz-animation:rightMoveIn 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
    -ms-animation:rightMoveIn 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
    -o-animation:rightMoveIn 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
    animation:rightMoveIn 0.5s cubic-bezier(0.24,0.57,0.45,1) both;
}
.main-special .main-special-slider .slick-slide.slick-active .sp-img .imgbox img {
    -webkit-animation:imgBigger 20s cubic-bezier(0.24,0.57,0.45,1) both;
    -moz-animation:imgBigger 20s cubic-bezier(0.24,0.57,0.45,1) both;
    -ms-animation:imgBigger 20s cubic-bezier(0.24,0.57,0.45,1) both;
    -o-animation:imgBigger 20s cubic-bezier(0.24,0.57,0.45,1) both;
    animation:imgBigger 20s cubic-bezier(0.24,0.57,0.45,1) both;
}


/* ----- button ----- */
.btn-viewmore { position:relative; font-size:15px; color:#333; font-weight:600; line-height:1; position:relative;}
.btn-viewmore strong { padding-right:85px; margin-right:6px; font-size:20px; font-weight:600}
.btn-viewmore:hover .arrow:after,
.btn-viewmore:hover .arrow:before {opacity:1;} 
/* .btn-viewmore:after { content:""; position:absolute; right:40px; top:50%; z-index:10; margin-top:1px; width:37px; height:2px; background:#333; margin-right:-8px;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	transform:translateY(-50%);
	transition:all ease .3s;
} */
 
/* ----- button add km  ----- */
.btn-viewmore .arrow { display: block; /* position: absolute; width: 70px; height: 70px; right:0; top:-24px; */ z-index:-1;}
.btn-viewmore .arrow.left {
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}
.btn-viewmore .arrow em { display: block;position: relative; /* position: absolute; margin: -10px 0 0 -10px; */ width: 20px; height: 20px; left: 50%; top: 50%; z-index:10;}
.btn-viewmore .arrow em:before, 
.btn-viewmore .arrow em:after { content: ""; width: 10px; height: 2px; border-radius: 1px; position: absolute; left: 50%; top: 50%; background: #333; margin: -1px 0 0 -5px; display: block;
  -webkit-transform-origin: 9px 50%;
  -moz-transform-origin: 9px 50%;
  -ms-transform-origin: 9px 50%;
  -o-transform-origin: 9px 50%;
  transform-origin: 9px 50%;
  z-index:10;
}
.btn-viewmore .arrow em:before {
    -webkit-transform: rotate(-40deg);
    -moz-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    -o-transform: rotate(-40deg);
    transform: rotate(-40deg);
}
.btn-viewmore .arrow em:after {
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transform: rotate(40deg);
}
.btn-viewmore .arrow:before, 
.btn-viewmore .arrow:after { content: ""; display: block; position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px; border-radius: 50%;
  -webkit-transition:all ease .3s; 
  -moz-transition:all ease .3s; 
  -ms-transition:all ease .3s; 
  -o-transition:all ease .3s; 
  transition:all ease .3s; 
}
/* .btn-viewmore .arrow div { display: block; width: 70px; height: 70px; position: relative; z-index: 1; border:2px solid rgba(153,153,153,0.8); border-radius:50%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg); 
} */
/* .btn-viewmore .arrow div:after {
	content:"";
	position:absolute;
	left:-5%;
	top:-5%;
	width:110%;
	height:110%;
	background:#fff;	
}
.btn-viewmore .arrow div:before {
	content:"";
	position:absolute;
	right:-5%;
	top:-5%;
	width:0;
	height:110%;
	background:#fff; 
} */
.btn-viewmore .arrow.animate div:after {
	width:0;
  -webkit-transition:all ease .5s; 
  -moz-transition:all ease .5s; 
  -ms-transition:all ease .5s; 
  -o-transition:all ease .5s; 
  transition:all ease .5s; 	
  -webkit-transition-delay:0.3s;
  -moz-transition-delay:0.3s;
  -ms-transition-delay:0.3s;
  -o-transition-delay:0.3s;
  transition-delay:0.3s;   
}
.btn-viewmore .arrow.animate div:before {
	width:110%;
  -webkit-transition:all ease .5s;  
  -moz-transition:all ease .5s;  
  -ms-transition:all ease .5s;  
  -o-transition:all ease .5s;  
  transition:all ease .5s;  	
  -webkit-transition-delay:0.6s;
  -moz-transition-delay:0.6s;
  -ms-transition-delay:0.6s;
  -o-transition-delay:0.6s;
  transition-delay:0.6s; 	
}
.btn-viewmore .arrow.animate em {
    -webkit-animation: arrow 1.6s ease forwards;
    -moz-animation: arrow 1.6s ease forwards;
    -ms-animation: arrow 1.6s ease forwards;
    -o-animation: arrow 1.6s ease forwards;
    animation: arrow 1.6s ease forwards;
}
.btn-viewmore .arrow.animate em:before {
    -webkit-animation: arrowUp 1.6s ease forwards;
    -moz-animation: arrowUp 1.6s ease forwards;
    -ms-animation: arrowUp 1.6s ease forwards;
    -o-animation: arrowUp 1.6s ease forwards;
    animation: arrowUp 1.6s ease forwards;
}
.btn-viewmore .arrow.animate em:after {
    -webkit-animation: arrowDown 1.6s ease forwards;
    -moz-animation: arrowDown 1.6s ease forwards;
    -ms-animation: arrowDown 1.6s ease forwards;
    -o-animation: arrowDown 1.6s ease forwards;
    animation: arrowDown 1.6s ease forwards;
}
 
.btn-menu, 
.btn-menu:before, 
.btn-menu:after { position: absolute; top: 0; right: 0; z-index: 1; width: 25px; height: 2px; background: #fff; cursor: pointer;
    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;
}
.btn-menu:before { content: ""; top: 9px; right: 0;}
.btn-menu:after { content: ""; top: 18px; right: 0;}



/* slick btn */

.main-special .slider-navigation {
    position: absolute;
    top: 0;
	right: 10px;
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* 버튼 외 클릭 방지 */
	gap: 10px;
}

.main-special .prev-slide,.main-special  .next-slide {
    pointer-events: all;
    color: #000;
    cursor: pointer;
	aspect-ratio: 1/1;
	width: 45px;
	border-radius: 100%;
	border: 1px solid #000;

}



@media all and (max-width: 1700px){
    .main-special .main-special-slider .slick-slide .sp-con .txtbox { width:45%;}
    .main-special .main-special-slider .slick-slide .sp-img .imgbox { width:53%;}
}

@media all and (max-width: 1600px){
    .main-special .main-special-slider .slick-slide .sp-con h2 { font-size:28px;}

    .main-news .news-list  { padding:140px 0;}
    .main-news .left .news-tit h2 { font-size:28px;}
    .main-news .right .bg > div { margin-right:-5%; margin-bottom:40%; width:120em !important; height:120em !important;}
    .main-news .right .bg > div.bg01 { right:-19em; bottom:-125em;}
    .main-news .right .bg > div.bg02 { right:-32em; bottom:-122.4em;}
    .main-news .right .bg > div.bg03 { right:-52em; bottom:-110em;}
}
@media all and (max-width: 1440px){
    .btn-viewmore:after { margin-top:0;}
    .btn-viewmore strong { font-size:18px;}
    .btn-viewmore .arrow i { margin-top:-10px;}
    .btn-viewmore .arrow { top:-26px;}
}
@media all and (max-width:1280px){
    .main-news .left .news-tit { padding-top:140px;}
    .main-special .main-special-slider .slick-slide .sp-con h2 { font-size:24px;}
    .main-news .left .news-tit h2 { font-size:24px;}
}
@media all and (max-width:1080px){
    .btn-viewmore { padding-right:35px;}
    .btn-viewmore:after { width:40px;}

    .main-special .main-special-slider .slick-slide p .ani-txt-wrap,
    .main-special .main-special-slider .slick-slide p .ani-txt-wrap > span {display: initial !important;}
    .main-special .main-special-slider .slick-slide p .ani-txt-wrap > span { opacity:1; transform:none !important; animation:none !important;}
    .main-special .main-special-slider .slick-slide p { display:block;
        /* opacity:0; */
        -webkit-transform:translateY(100%);
        -moz-transform:translateY(100%);
        -ms-transform:translateY(100%);
        -o-transform:translateY(100%);
        transform:translateY(100%);
    }
    .main-special .main-special-slider .slick-slide.slick-active p {
        /* opacity:0; */
      /*   -webkit-animation: textAniReverse 1s ease both;
        -moz-animation: textAniReverse 1s ease both;
        -ms-animation: textAniReverse 1s ease both;
        -o-animation: textAniReverse 1s ease both;
        animation: textAniReverse 1s ease both; */
        -webkit-animation-delay: 0.6s;
        -moz-animation-delay: 0.6s;
        -ms-animation-delay: 0.6s;
        -o-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }
    .main-special.animated .main-special-slider .slick-slide.slick-active p {
        -webkit-animation: textAni 1s ease both;
        -moz-animation: textAni 1s ease both;
        -ms-animation: textAni 1s ease both;
        -o-animation: textAni 1s ease both;
        animation: textAni 1s ease both;
        -webkit-animation-delay: 0.4s;
        -moz-animation-delay: 0.4s;
        -ms-animation-delay: 0.4s;
        -o-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }
}
@media all and (max-width: 767px){
    .btn-viewmore { padding-right:18px;}
    .btn-viewmore:after { display:none; margin-top:3px;}
    .btn-viewmore:before {  content:""; position:absolute; right:0; top:0.11em; width:8px; height:8px; border-right:0.14em solid #000; border-top:0.14em solid #000;
        -webkit-transform:rotate(45deg);
        -moz-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
        -o-transform:rotate(45deg);
        transform:rotate(45deg);
        -webkit-transform-origin:0 0;
        -moz-transform-origin:0 0;
        -ms-transform-origin:0 0;
        -o-transform-origin:0 0;
        transform-origin:0 0;
    }
    .btn-viewmore strong { padding-right:0; font-size:15px;}
    .btn-viewmore .arrow { display:none;}

    .main-special .main-special-slider .slick-slide > div > div { display:flex !important; flex-direction:column; justify-content:space-between;}
    .main-special .main-special-slider .slick-slide .sp-con { padding-top:30px; height:68%;}
    .main-special .main-special-slider .slick-slide .sp-con .txtbox { width:auto !important; min-height:auto;}
    .main-special .main-special-slider .slick-slide .sp-con .btnwrap { margin-top:2em; height:10vh !important;}
    .main-special .main-special-slider .slick-slide .sp-con .btnwrap > div { padding:1em 0; }
    .main-special .main-special-slider .slick-slide .sp-img { left:0; top:auto; bottom:0; width:100%; height:32%; transform:none;}
    .main-special .main-special-slider .slick-slide .sp-img .imgbox { overflow:hidden; position:relative; left:0; top:auto; bottom:0; padding-bottom:0; margin-bottom:0; max-width:none; width:auto; height:100%;}
    .main-special .main-special-slider .slick-dots { /* left:5%; */ top:10px; margin-top:0; transform:none;}
    .main-special .main-special-slider .slick-slide .sp-con h2 { padding-top:2em; font-size:20px;}
    .main-special .main-special-slider .slick-slide .sp-con p { margin-top:1em; line-height:1.4em; font-size: 15px;}

    .main-news .news-con { height:100%;}
    .main-news .left { display:flex; align-items:center; left:5%; top:0; width:90%; height:100%;}
    .main-news .left .news-tit { float:none; padding-top:0; margin-top:-240px; max-width:none; width:100%; height:auto;}
    .main-news .left .news-tit .btnwrap { margin-top:4em;}
    .main-news .left .news-tit h2 { font-size:3.2rem;}
    .main-news .news-wrap { padding:0; height:100%;}
    .main-news .news-list { display:flex; flex-direction:column; justify-content:center; position:relative; z-index:100; padding:0; padding-top:220px; max-width:none; width:100%; height:100%;}
    .main-news .news-list > div { display:block !important; margin: 0 !important; max-width:none; width:auto;}
    .main-news .news-list > div:nth-child(4) { display:none !important;}
    .main-news .news-list .list-date { padding-top:0.8em;}
    .main-news .news-list a { position:relative; padding-left:100px; margin:7px 0;}
    .main-news .news-list a:after { content:""; display:block; clear:both;}
    .main-news .news-list .imgbox { position:absolute; left:0; top:0; padding-bottom:0; height:80px; width:80px;}
    .main-news .right .swiper-slide { display:block; height:100%;}
    .main-news .right .bg > div.bg01 {right: -39em;bottom: -105em;}
    .main-news .right .bg > div.bg02 {right: -61em; bottom: -102.7em;}
    .main-news .right .bg > div.bg03 {right: -82em; bottom: -90em;}
    .main-news .news-list .list-tit { font-size:1.8rem;}

    .pop-wrap {right:0; width:100%; padding:0 10px; text-align:center;}
}



  /* 섹션 2 */
   

/***** 섹션2 추가 *****/
.section-feature { padding: 200px 0 100px; }
.section-feature .grid { display: flex; }
.section-feature .grid .box { flex: 1 1 50%; }
.section-feature .grid .box:first-child { padding: 85px 9% 0 0; }
.section-feature .image_wrap { overflow: hidden; text-align: right; }
.section-feature .image_wrap img { display: block; transition: transform ease 0.8s; }
.section-feature .image_wrap:hover img { transform: scale(1.1); }


@media screen and (max-width: 1024px){
	.section-feature { padding: 70px 0; }
}

@media screen and (max-width: 768px) {
	.section-feature { padding: 50px 0; }
    .section-feature .grid { flex-direction: column-reverse; }
    .section-feature .grid .box:first-child { padding: 30px 0 0; }
}

/***** 섹션2 추가 *****/


/* 제품 섹션 */
.main-section .title h2{font-size:65px; color:#fff; font-weight: bold;  position: relative; display: inline-block; text-transform: uppercase;}
.main-section .title h2::after{content:''; width:10px; height:10px; border-radius:50%; background-color:#f69e25; position: absolute; bottom:23px; right:-15px;}
.main-section .title p{font-size:20px; color:#fff; margin-top:60px; letter-spacing: -.7px;}
.main-section.product {width:100%;height:100vh;padding:100px 0;/* background: url(/images/main/product-bg.jpg) center / cover; */  background: #295c9b; overflow: hidden;}
.main-section.product .content{position: relative;}
.main-section.product .content .swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}
.main-section.product .title-box{position: absolute; padding:0 5% 0 10%;}
.main-section.product .swiper-body{padding-left:39%;}
.main-section.product .controls{display: flex; margin-top:40px;}
.main-section.product .controls div:hover{border-color:#f69e25;}
.main-section.product .controls div:hover::after{opacity: 1;}
.main-section.product .swiper-button-next, .main-section.product .swiper-button-prev{width:auto; height: auto; position: relative; width:75px; height:75px; border:2px solid rgb(255, 255, 255, .3); border-radius: 50%; transition: all ease .3s; margin: 0 -5px; right: auto; left: auto;}
.main-section.product .swiper-button-next:after, .main-section.product .swiper-button-prev:after{content:''; width:11px; height:17px; opacity: .3;}
.main-section.product .swiper-button-next{left: 24px;}
.main-section.product .swiper-button-next:after{background: url(/images/main/product-next.png) no-repeat center / auto 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.main-section.product .swiper-button-prev:after{background: url(/images/main/product-prev.png) no-repeat center / auto 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.main-section.product .swiper-slide{width:51%; margin-right:12%; padding-left:30px;}
.main-section.product .swiper-slide .box{border:1px solid rgb(255, 255, 255, .2); padding:30px; position:relative; transition: all ease .5s;}
.main-section.product .swiper-slide .txt-box {margin-bottom: 80px;}
.main-section.product .swiper-slide .txt-box h2{color:#fff; font-size:30px; margin:25px 0 20px; transition: all ease .5s; text-transform: uppercase; font-weight: bold;}
.main-section.product .swiper-slide .txt-box p{color:#fff; font-size:20px; transition: all ease .3s; font-weight: 500;}
.view{font-weight: 700; display: flex; align-items: center; column-gap: 15px;}
.view .button{width:45px; height:45px; border:1px solid #ddd; border-radius: 50%; position: relative; transition: all ease .3s;} 
.view .button::after{content: ''; width:6px; height:6px; background-color: #f69e25; border-radius: 50%; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); transition: all ease .3s; }
.view .button::before{content:''; width:9px; height:13px; background:url(/images/main/view-icon.png) no-repeat center / auto 80%; position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; z-index: 2; opacity: 0;  transition: all ease .3s;}
.view:hover .button::after{width:45px; height:45px;}
.view:hover .button::before{opacity: 1;}
.view:hover .button{border-color: #f69e25;}
.main-section.product .swiper-slide .view{ opacity: 0; transition: all ease .3s; opacity: 0; animation-duration: .3s; animation-fill-mode: forwards;}
.main-section.product .swiper-slide .view .button{transition: all ease .3s;}
.main-section.product .swiper-slide .view .button::after {transition: all ease .3s;}
.main-section.product .swiper-slide .view:hover .button::after{width:45px; height:45px;}
.main-section.product .swiper-slide .view:hover .button{border-color: #f69e25;}
.main-section.product .swiper-slide .category{color:#f69e25; position: absolute; top:-10px; left:-20px; font-weight: 600; transform: rotate(90deg); transform-origin: left; text-transform: uppercase; font-weight: bold;}
.main-section.product .swiper-slide.swiper-slide-active .box{background-color: #fff;}
.main-section.product .swiper-slide.swiper-slide-active .txt-box h2{color:#111;}
.main-section.product .swiper-slide.swiper-slide-active .txt-box p{color:#111;}
.main-section.product .swiper-slide.swiper-slide-active .view{animation-name: titSlide01; }
@keyframes titSlide01{
    from{
        transform:translateY(30px);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}

/* 반응형 */
@media screen and (max-width: 1400px){
  .main-section.product{padding:60px 0; height:auto;}
  .main-section.product .title-box{position: unset; margin-bottom:60px;}
  .main-section.product .swiper-body{padding-left:10%;}
  .main-section.product .swiper-slide{margin-right: 5%;}
  .main-section .title h2{font-size:38px;}
  .main-section .title p{margin-top:30px;}
  .main-section.product .swiper-button-next, .main-section.product .swiper-button-prev{width:45px; height:45px;}
  .main-section.product .swiper-button-prev:after,.main-section.product .swiper-button-next:after{background-size: auto 70%;}
  
}

@media screen and (max-width: 768px){
  .main-section.product .swiper-body{padding-left: 2%;}
  .main-section .title h2{font-size:28px;}
  .main-section .title p{font-size:16px; margin-top:10px;}
  .main-section.product .controls{margin-top:15px;}
  .main-section.product .swiper-slide .box{padding:15px;}
  .main-section.product .swiper-slide .txt-box{margin-bottom:40px;}
  .main-section.product .swiper-slide .txt-box h2{font-size:20px; margin:15px 0 5px;}
  .main-section.product .swiper-slide .txt-box p{font-size:16px;}
}

/* 제품 섹션 */



/* 제품 하단 아이콘 */
/* title */
.info-icon  .title{font-size:48px; font-weight:700; color:#333; z-index: 2; position: relative; margin-bottom: 40px;}


.info-icon{text-align: center; padding: 100px 0;}
.info-icon ul{display:flex;justify-content: space-between; gap: 1%;}
.info-icon li{
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.info-icon li .iconBox{background-repeat: no-repeat;background-position: top center;background-size: contain; position:relative; aspect-ratio: 1/1; width: 100%; max-width: 200px; display: flex; align-items: center; justify-content: center;}
.info-icon li .iconBox .svg-bg{position:absolute;top:50%;left: 50%;transform: translate(-50%, -50%); width: 100%; }
.info-icon li .iconBox svg{max-width:200px; max-height:200px; }
.info-icon li .iconBox img {
  max-width: 60px;
}
.info-icon .circle-chart__circle {
  transform: rotate(-90deg);
  transform-origin: center;
}

.info-icon.animated .circle-chart__circle {
  animation: circle-chart-fill 2s reverse;
}

@keyframes circle-chart-fill {
  to { stroke-dasharray: 0 6000; }
}

@keyframes circle-chart-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
.info-icon li:nth-child(1) .iconBox{background-image: url(/images/main/bg-circle-20.svg);}
.info-icon li:nth-child(2) .iconBox{background-image: url(/images/main/bg-circle-40.svg);}
.info-icon li:nth-child(3) .iconBox{background-image: url(/images/main/bg-circle-60.svg);}
.info-icon li:nth-child(4) .iconBox{background-image: url(/images/main/bg-circle-80.svg);}
.info-icon li:nth-child(5) .iconBox{background-image: url(/images/main/bg-circle-100.svg);}
*/
.info-icon li p{font-size: 22px; font-weight: 600; color: #000000; margin-top: 10px; line-height: 1.5; letter-spacing: -.7px;}

@media screen and (max-width:1024px) {
  .info-icon .title{
    font-size: 28px;
    margin-bottom: 20px;
  }
  
  .info-icon ul{display:flex;justify-content: center;flex-wrap: wrap;gap: 20px 1%;}
  .info-icon ul li{width:32%;}
  .info-icon li p{font-size: 16px;}
}


@media screen and (max-width:768px) {
  .info-icon{
    padding: 50px 0;
  }
  .info-icon .title{
    font-size: 24px;
  }
  .info-icon li .iconBox svg{max-width: 100%;}

}


@media screen and (max-width:480px) {  
  .info-icon ul li{
    width: 49%;
  }
  .info-icon li p{font-size: 14px;}


}

/* 제품 하단 아이콘 */



.btn-plus {
	display:inline-block;
	position:relative;
	width:48px;
	height:48px;
	transform-origin:center center;
	transition:.5s;
}
.btn-plus::after {
	display:block;
	content:'';
	width:100%;
	height:1px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background:#000;
}
.btn-plus::before {
	display:block;
	content:'';
	width:1px;
	height:100%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background:#000;
}
.btn-plus:hover {
	transform:rotate(180deg);
	transition:.5s;
}


/*main - pergola*/
.main-pergola {padding: 100px 0;}
.pergola-li {/* display: flex; gap: 50px; */}
.pergola-li li { margin-bottom: 130px;display: flex; /* flex-direction: column; */ justify-content: space-between; /* justify-content:center; */ }
.pergola-li li:last-of-type { margin-bottom: 0; }


.pergola-img {/* margin:0 95px 0 0; */ border-radius: 340px;overflow:hidden;transition-duration:1.5s;transition-property:opacity, top, border-radius;top:200px; }
.pergola-img.animated { border-radius: 0; }
.pergola-img a {display:block;height:100%;position:relative; }
.pergola-img a span {display: block; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background:#222; opacity: .7;transition:1s .5s; }
.pergola-img.animated a span { opacity:0; }
.pergola-img a img {}
.pergola-txt { display: flex; justify-content: center; flex-direction: column; }
.pergola-info {}
.pergola-info span {font-size:18px;display:block; font-weight: 500; }
.pergola-info strong {font-size:62px;display:block; margin-top:60px; text-transform: uppercase; font-weight: bold; }
.pergola-info p { font-size: 20px; margin: 18px 0; letter-spacing: -.7px; font-weight: 500; }
.pergola-info p i{font-size: 24px; padding-right: 12px;color: #295c9b; }
.pergola-info .txt{color: #000; margin-top: 3rem;}
.pergola-li li:nth-of-type(2n) .pergola-img {order:10; /* padding-top: 300px; */ /* margin:0 0 0 95px; */ }
.pergola-li .btn-plus {margin-top: 3rem; }

/* .pergola-li li:nth-of-type(4n-3) {padding:0 160px;justify-content: center; }
.pergola-li li:nth-of-type(4n-2) {padding: 0 160px 0 0; }
.pergola-li li:nth-of-type(4n-1) {padding: 0 160px 0 0;justify-content:flex-end; } */
.pergola-li li:nth-of-type(4n) {padding: 0; }

@media screen and (max-width:1600px) {
  /* .pergola-li li:nth-of-type(4n-3) {padding: 0 100px; }
	.pergola-li li:nth-of-type(4n-2) {padding: 0 100px 0 0; }
	.pergola-li li:nth-of-type(4n-1) {padding: 0 100px 0 0; } */
	.pergola-li li:nth-of-type(4n) { }
	/* .pergola-img {margin: 0 80px 0 0; } */
	.pergola-li li:nth-of-type(2n) .pergola-img {margin: 0 0 0 80px; }
}

@media screen and (max-width:1200px) {
  .btn-plus {
		width: 33px;
		height: 33px;
	}
	.btn-plus:hover {
		transform:none;
	}

  .pergola-li{
    flex-direction: column;
  }
/*   .pergola-li li:nth-of-type(4n-3) {padding: 0; justify-content: flex-start; }
	.pergola-li li:nth-of-type(4n-2) {padding: 0; justify-content: flex-end; }
	.pergola-li li:nth-of-type(4n-1) {padding: 0; justify-content: flex-start; }
	.pergola-li li:nth-of-type(4n) { justify-content: flex-end; }
	.pergola-li li:nth-of-type(2n-1) {padding-right: 20%; }
	.pergola-li li:nth-of-type(2n) {padding-left: 10%; }
  .pergola-li li:nth-of-type(2n) .pergola-img{padding-top: 0;} */

}

@media screen and (max-width:1024px){
  .pergola-img {width: 60%;}
  .pergola-info strong { font-size: 36px; margin-top: 22px;}
  .pergola-info p{  font-size: 16px;}
}

@media screen and (max-width:768px) {
  .btn-plus { width: 27px; height: 27px;}
  .main-pergola {padding: 50px 0;}
  .pergola-img {width: 100%;}
  .pergola-img a img { width: 100%}
  .pergola-li li {flex-direction: column; }
  .pergola-img {margin: 0;width: 100%; }
  .pergola-li li:nth-of-type(2n) .pergola-img {margin: 0; }
  .pergola-txt {order:20; margin-top: 20px; }
  .pergola-img {top:100px; }
  .pergola-li li:nth-of-type(2n) .pergola-txt {text-align: right; }
  .pergola-li li {margin-bottom: 90px; }
}