@charset "utf-8";
@import url(section1_product.css);
@import url(section2_icon3.css);

body{width: 100%;height: 100%;}

#wrap{position: relative;width: 100%;height: auto; }

#wrap #content{width: 100%; height:auto !important; padding-top:0; margin:0;padding:0; }
#wrap #content:after{display: block;content: '';clear: both;}

.section{position: relative; width:100%; height:100%;}
.section .fp-tableCell{}

.section.default .container{width: 100%;height: 100%;}
.section.default h3{padding:11% 0 20px 0;text-align: center;font-size: 48px;color: #fff;font-weight:600; letter-spacing:-0.03em; text-shadow:0px 0px 10px rgba(0,0,0,0.22);}
.section.default p.tit{font-size:18px; font-weight:300; line-height:1.5; color:#fff; text-align: center; text-shadow:0px 0px 10px rgba(0,0,0,0.22);}

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
    height: 160px !important;
}

.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

.section.default .container{width: 100%;height: 100%;}
.section.default h3{padding:12% 0 20px 0;text-align: center;font-size: 48px;color: #fff;font-weight:500; letter-spacing:-0.03em; text-shadow:0px 0px 10px rgba(0,0,0,0.22);}
.section.default p.tit{font-size:18px; font-weight:300; line-height:1.5; color:#fff; text-align: center; text-shadow:0px 0px 10px rgba(0,0,0,0.22);}


/* 우측 버튼 안보이게 */
#fp-nav ul, .fp-slidesNav ul {display:none;}

/* section03 */
.section03{padding : 140px 0; text-align: center;}
.section03 .main_tit_other{margin-bottom: 125px;}
.section03 .main_tit_other p{font-size: 18px; font-weight: bold;}
.section03 .main_tit_other h2{font-size: 36px; font-weight: 300;}

.section03 .card{display : flex; width: 96%; max-width : 1588px; margin : 0 auto; justify-content: space-between; gap: 60px; }
.section03 .card h3{font-size: 35px; font-weight: 900; margin-bottom: 27px;color : #fff;}
.section03 .card p{font-size: 16px; font-weight: 300;color : #fff; margin-bottom: 30px;}
.section03 .card img{ visibility: hidden; opacity: 0; transition: 0.2s;}

.section03 .card > a{width: 100%; max-width: 758px; aspect-ratio: 1.516 / 1; background: #000;  display : flex; justify-content: center; align-items: center; background-repeat: no-repeat; background-position: center;}
.section03 .card > a:hover img{display : inline; visibility: visible; opacity: 1;}
.section03 .card .card01{background-image: url('/file/img/s_img/card01.jpg');}
.section03 .card .card02{background-image: url('/file/img/s_img/card02.jpg');}

.slide_wrap{position: relative;}
.mySwiper02{width: 100%; max-width : 1500px; padding : 0 10px; margin : 0 auto; overflow: hidden;}
.mySwiper02 .swiper-wrapper{padding : 20px 0; }
.mySwiper02 .swiper-slide{text-align: center;}
.mySwiper02 .swiper-slide a{display : flex; flex-direction: column; justify-content: flex-end; margin : 0 auto; box-shadow: 0 3px 6px #00000024; border: 2px solid #fff; border-radius: 20px; width: 100%; max-width : 296px; height: 380px; padding-bottom: 30px; box-sizing: border-box;}
.mySwiper02 .swiper-slide a:hover{border : 2px solid var(--primary-color);}
.mySwiper02 .swiper-slide a:hover p{color : var(--primary-color)}
.mySwiper02 .swiper-slide a img{width: 100%; margin : 0 auto;}
.mySwiper02 .swiper-slide a p{margin-top: 70px; font-size: 20px; font-weight: bold; color : #000;}
.slide_wrap  .swiper-button-next:after, .swiper-button-prev:after{font-size: 24px !important; color : #000; }
.swiper-button-prev, .swiper-container-rtl .swiper-button-next
/* .slide_wrap  .swiper-button-next:after, .swiper-button-prev:after{font-size: 20px;} */

.slide_wrap .swiper-button-prev, .swiper-container-rtl .swiper-button-next{background-image: none !important; left: 4% !important;}
.slide_wrap .swiper-button-next, .swiper-container-rtl .swiper-button-prev{background-image: none !important; right: 4%;}

@media (max-width:1420px) {

.fp-tableCell{height : auto !important; vertical-align: top !important;}
.mySwiper02{width: 70%;}



}/* 1199px End*/





@media (max-width: 991px) {




}/* 991px End*/




@media (max-width: 768px) {

  .section03 .card{width: 94%;}
  .mySwiper02{width: 100%;}

  .slide_wrap .swiper-button-next:after{display : none}
  .swiper-button-prev:after{display : none;}

}/* 768px End*/