@charset "utf-8";

.main-intro-slide {position:relative;}
.main-sw .swiper-slide {height:570px;}
.main-sw .swiper-slide .sw-text {display:flex; height:100%;     flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; text-align:center;}
.main-sw .swiper-slide .sw-text > div {/*transition:0.5s ease-out; opacity:0; transform:translateY(30px);*/  animation-name: textAni; animation-duration: 0.5s; animation-timing-function: ease-in; animation-iteration-count: 1; animation-direction: alternate; animation-fill-mode: forwards; /*animation-play-state:paused;*/ transform:translateY(30px); opacity:0;}
.main-sw .swiper-slide .sw-text .t1 {font-size:42px; line-height:54px; font-weight:500; color:#fff; animation-delay:0.3s;}
.main-sw .swiper-slide .sw-text .t3 {margin-top:40px; transform:translateY(0); animation-delay:1.3s;}
.main-sw .swiper-slide .sw-text .t3 a {border-radius: 5px; padding:0 45px; line-height:46px; color:#fff; font-size:18px; font-weight:500; background:#308C6B; display: inline-block;}
.main-sw .swiper-slide.swiper-slide-active .sw-text > div {/*opacity:1; transform:translateY(0);*/ /* animation-play-state:running; */}
/*.main-sw .swiper-slide.swiper-slide-active .sw-text .t1 {}*/
/*.main-sw .swiper-slide.swiper-slide-active .sw-text .t2 {}*/
/*.main-sw .swiper-slide.swiper-slide-active .sw-text .t3 {}*/
/*.main-sw .swiper-slide.swiper-slide-active .sw-text .t3 a {}*/
.main-sw .swiper-slide .bg {position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1;  transition:10s ease; /*transition-delay:0.5s;*/ background-blend-mode: overlay; transform:scale(1);}
.main-sw .swiper-slide.swiper-slide1 .bg {background:url("/assets/images/main-bg-1.jpg") no-repeat rgba(0, 0, 0, 0.4);; background-size:cover;}
.main-sw .swiper-slide.swiper-slide2 .bg {background:url("/assets/images/main-bg-2.jpg") no-repeat rgba(0, 0, 0, 0.4);; background-size:cover;}
.main-sw .swiper-slide.swiper-slide-active .bg {transform:scale(1.2);}
.sidebtn {z-index:16; position:absolute; top:50%; transform:translateY(-50%); font-size:40px; color:#fff; opacity:0.5; display: inline-block; transition:0.5s; cursor:pointer;}
.sidebtn:hover {opacity:1;}
.sidebtn-left {left:40px;}
.sidebtn-right {right:40px;}
.sw-control {position:absolute; right:120px; bottom:40px; color:#fff; z-index:10; display:flex; width:105px; justify-content: space-between; align-items: center;}
.sw-control > div {opacity:0.8; cursor:pointer;}
.sw-control .sw-prev, .sw-control .sw-next {font-size:20px;}
.sw-control .sw-play .fa-pause { display: inline; }
.sw-control .sw-play .fa-play {display:none;}
.sw-control .sw-play.on .fa-pause {display:none;}
.sw-control .sw-play.on .fa-play {display:inline;}
.main-intro-slide .swiper-pagination {position:absolute; left:50%; transform:translateX(-50%); bottom:48px;}
/* .main-intro-slide .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin :0; margin-right: 20px; } */
.main-intro-slide .swiper-pagination-bullet {width: 12px; height: 12px; background:#fff; opacity:0.5; margin:0 3px;}
.main-intro-slide .swiper-pagination-bullet-active {border-radius:6px; width:28px; opacity:1;}
/* .main-intro-slide .swiper-pagination-bullet-active b { animation-name: countingBar; animation-duration: 3.5s; animation-timing-function: ease-in; animation-iteration-count: 1; animation-direction: alternate; animation-fill-mode: forwards; } */
/* .main-intro-slide .swiper-pagination.off .swiper-pagination-bullet b {animation-play-state: paused;} */

@keyframes countingBar {
    0% {width: 0;}
    100% {width:100%;}
}

@keyframes textAni {
    0% {/*transform:translateY(30px); opacity:0;*/}
    100% {transform:translateY(0); opacity:1;}
}

.main-section-1 {margin-top:140px;}
.main-section-1 .tit {text-align:center;}
.main-section-1 .tit .t1 {color:#444444; font-size:32px; font-weight: 700; margin-bottom:30px; position:relative;}
.main-section-1 .tit .t1::after {content:""; width:31px; height:6px; background:#F58120; border-radius:3px; position:absolute; left:50%; transform: translateX(-50%); bottom:-18px;}
.main-section-1 .tit .t2 {color:#444444; font-size:16px; line-height:24px;}
.main-section-1 .prod-list {margin-top:60px;}
.main-section-1 .prod-list ul {display:flex; justify-content: space-between;}
.main-section-1 .prod-list ul li {width:470px; height:445px; border-radius:10px; overflow: hidden; background:#fff; box-shadow:rgb(0 0 0 / 7%) 0 3px 25px; position: relative;}
.main-section-1 .prod-list ul li a {position:absolute; left:0; top:0; z-index:5; width:100%; height:100%;}
.main-section-1 .prod-list ul li .img {height:290px; position:relative; overflow:hidden; z-index:3;}
.main-section-1 .prod-list ul li .img::after {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-color: #000; opacity: 0; transition:ease-in-out 0.5s;}
.main-section-1 .prod-list ul li .img img {width:100%; height:100%; object-fit:cover; transition:ease-in-out 0.5s;}
.main-section-1 .prod-list ul li .txtbox {padding:40px 20px 0; text-align:center;}
.main-section-1 .prod-list ul li .txtbox .t1 {font-size:21px; font-weight:700; color:#444444;}
.main-section-1 .prod-list ul li .txtbox .t2 {font-size:16px; line-height:24px; color:#444444; margin-top:7px;}
.main-section-1 .prod-list ul li:hover .img::after {opacity:0.15;}
.main-section-1 .prod-list ul li:hover .img img {transform:scale(1.2,1.2);}

.main-section-2 {margin-top: 115px; overflow:hidden; height:670px;}
.main-section-2 .con {position: relative;}
.main-section-2 .left {z-index:5; position:relative; transform:translate(-220px,45px); display: inline-block; border-radius:10px; overflow: hidden;}
.main-section-2 .right {z-index:1; position: absolute; left:0; top:0; height:600px; background:#222222; width:130%; border-radius:10px 0 0 0 ; padding-left:742px; padding-top:100px; padding-right:20%;}
.main-section-2 .right .tit {position:relative; margin-bottom:76px;}
.main-section-2 .right .tit .t1 {font-size:32px; font-weight:700; line-height: 40px; color:#fff;}
.main-section-2 .right .tit::after {content:""; position:absolute; left:0; bottom:-20px; display: inline-block; width:31px; height:6px; border-radius:3px; background-color: #F58120;}
.main-section-2 .right ul.txtbox {}
.main-section-2 .right ul.txtbox li {position:relative; padding-left:40px; margin-bottom:40px;}
.main-section-2 .right ul.txtbox li .num {position:absolute; left:0; top:0; color:#308C6B; font-size:21px; font-weight:700;}
.main-section-2 .right ul.txtbox li .txt {}
.main-section-2 .right ul.txtbox li .txt .t1 {font-size:21px; font-weight:700; color:#fff;}
.main-section-2 .right ul.txtbox li .txt .t2 {font-size:16px; color:rgb(255 255 255 / 80%); line-height:1.6;}

.main-section-3 {margin-top:100px;}
.main-section-3 .tit {position:relative; text-align: center;}
.main-section-3 .tit .t1 {font-size:16px;}
.main-section-3 .tit .t2 {font-size:32px; font-weight:700; margin-top:10px;}
.main-section-3 .tit::after {content:""; position:absolute; left:50%; bottom:-20px; transform: translateX(-50%); display: inline-block; width:31px; height:6px; border-radius:3px; background-color: #F58120;}
.main-section-3 ul {display:flex; justify-content: space-between; margin-top:70px;}
.main-section-3 ul li {display:flex; align-items: center; margin-right:40px; position:relative;}
.main-section-3 ul li a {position:absolute; left:0; top:0; width:100%; height:100%; z-index:2;}
.main-section-3 ul li:last-child {margin-right:0;}
.main-section-3 ul li .icon {color:#308C6B; font-size:100px; margin-right: 50px; position:relative; z-index:1;}
.main-section-3 ul li .txt {}
.main-section-3 ul li .txt .t1 {font-size:21px; font-weight:700;}
.main-section-3 ul li .txt .t2 {font-size:16px; margin-top:10px; line-height:24px;}

/* 효과 */
@-webkit-keyframes spin { 100%{ -webkit-transform: rotate(-360deg); } } @-moz-keyframes spin { 100%{ -moz-transform: rotate(-360deg); } } @-ms-keyframes spin { 100%{ -ms-transform: rotate(-360deg); } } @keyframes spin { 100%{ transform: rotate(-360deg); } }
.test {-webkit-animation:spin 10000ms infinite linear; -moz-animation:spin 10000ms infinite linear; -ms-animation:spin 10000ms infinite linear; animation:spin 10000ms infinite linear;}