@charset "utf-8";

.main {/* padding-top:120px; */}
.fix_bg {position:fixed;right: -2%;z-index:-2;top: 50%;transform: translateY(-50%);}
.main h3 {font-size: 65px;font-weight:700;/* margin-bottom: 1rem; */color: #fff;letter-spacing: 0;}
.main h3 span {color:var(--color-main)}
.main_sec1 {height: 100vh;margin: 0 auto;width: 100%;}
.link {width: 38.255%;display: flex;flex-direction: column;justify-content: space-between;height: 100%;max-width: 505px;}
.main_slide {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.main_slide {position: relative;}
.main_slide .swiper-wrapper {width: 100%;height: 100%;}
.main_slide .swiper-slide  {background-color:#111}
.main_slide .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.slide-control {
    width: auto;
    /* left: 12rem; */
    top: 25%;
    position: absolute;
    width: 100%;
    max-width: 1510px;
    display: flex;
    left: 50%;
    /* transform: translateX(-50%); */
    z-index: 1;
}
.main_slide .slide-control {transform: translateX(-50%);}
.slide-control .con_area {}
.slide-control div.swiper-pagination {z-index: 1;text-align: left;width: auto;position: static;display: flex;gap: 0 1rem;align-items: center;}
.slide-control .swiper-pagination-bullet {width: 8px;height: 8px;opacity: 1;background: #fff;}
.slide-control .swiper-pagination-bullet-active {background-color: #fff0;opacity: 1;/* width: 25px; */border: 2px solid #fff;width: 12px;height: 12px;}
.slide-control .play_pause {
    margin-left: 1rem;
    z-index: 1;
    position: static;
}
.slide-control .play_pause .slide_pause {
    width: 20px;
    height: 20px;
}
.slide-control i {color:#fff}
.slide-control .play_pause .play_play {}

.slide-control .play_pause .slide_pause, .slide-control .play_pause .slide_play {display:none;}
.slide-control .play_pause .slide_pause.on, .slide-control .play_pause .slide_play.on {display:block;}
.slide-control .leaf{
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
    gap: 0 2rem;
    margin-top: 15rem;
    }
.slide-control .leaf button {width:60px;height:60px;border: 1px solid #fff0;border-radius: 50%;background-color: #ffffff38;transition: all .5s;}
.slide-control .leaf button i {color:#fff;opacity: .7;transition: opacity .5s;}
.slide-control .leaf button:hover {border-color:#fff;}
.slide-control .leaf button:hover i {opacity:1}


.slide_txt {position:absolute;z-index:1;top: 30%;left: 50%;width: 1500px;transform: translateX(-50%);color: #fff;}
.swiper-slide-active .slide_txt h2 {animation: fadeInUp 1.6s;animation-delay: .4s;animation-fill-mode: forwards;opacity:0}
.swiper-slide-active .slide_txt p {animation: fadeInUp 1.4s;animation-delay: .4s;animation-fill-mode: forwards;opacity:0}
.swiper-slide-active .slide_txt ul {animation: fadeInUp 1.8s;animation-delay: .8s;animation-fill-mode: forwards;opacity:0}
.slide_txt h2 {font-size: 80px;line-height: 1.2;margin-bottom: 3rem;}
.slide_txt h2 span {color:var(--color-main)}
.slide_txt p {font-size: 26px;font-weight:500;margin-bottom: 1rem;}
.slide_txt li {font-size: 18px;opacity:.7;line-height: 1.5;font-weight:300}
.main_sec2, .main_sec3, .main_sec4, .main_sec5 {position: relative;overflow: hidden;width: var(--width-size);margin: 0 auto;padding: 0 40px;padding-top: 120px;}
.main_sec2 {width: 1600px;padding: 0;padding-top: 120px;}
.main_sec3 {width:100%;padding: unset;padding: 10rem 0;}
.main_sec3:before {content:"";position:absolute;background-image:url(/img/main/sec3_bg.jpg);width: 100%;height: 1092px;left: 50%;bottom: 0;background-position: center center;background-size: cover;z-index: -1;background-repeat: no-repeat;transform: translateX(-50%);}
.main_sec4 {padding-top:0;padding-bottom: 6rem;}
.sec3_inner {width: var(--width-size);margin: 0 auto;overflow: hidden;padding: 0 40px;}
.sec_top {display:flex;justify-content: space-between;padding-bottom: 4rem;border-bottom: 1px solid rgb(255 255 255 / 20%);align-items: center;padding-top: 10px;/* margin-bottom: 4rem; */}
.sec_top a, .sec_top p {color:#fff}
.sec_top p {opacity:.7;font-size: 20px;font-weight: 300;margin-top: .5rem;}
.sec4_top {border-bottom: 0;position:relative}
.sec4_top:after {content:"";width: 83%;height:1px;background-color:#fff;position: absolute;right: 0;bottom: 0;opacity: .2;}
.top_title p {color:#fff}
.btn_more a {font-size:20px;color: #fff;}
.btn_more span {width:53px;height:53px;display: inline-flex;justify-content: center;align-items: center;position: relative;z-index: -1;margin-left: 10px;transition: all .6s;}
.btn_more span:before {content:"";width: 53px;height: 53px;background-color: var(--color-main);position: absolute;border-radius: 50%;z-index: -1;transition: all .6s;}
.btn_more:hover span {transform:rotate(-45deg);}
.btn_more:hover span:before {width:95px; height:95px;}

.sec2_top {margin-bottom: 4rem;text-align: center;color: #fff;}
.sec2_top p {font-size:20px;opacity:.7;font-weight:300;word-break: keep-all;margin-top: .5rem;}
.banner {position:relative; background-color:#111;}
.banner > img {border-radius:2rem; transition:all .6s}
.banner:hover > img {opacity:.5}
.banner_btn {position:absolute;left: 50%;top: 50%;z-index:1;transform: translate(-50%, -50%);opacity: 0; transition:all .6s}
.banner:hover .banner_btn {opacity:1}
.productSwiper {padding-top:5rem;}
.productSwiper ul {}
.productSwiper li {margin-top: 5rem;background-color:#222222;padding: 3rem 2rem 1rem;/* text-align: center; */border-radius: 1rem;transition: all .6s;}
.productSwiper .swiper-slide-active {margin-top:0}
.productSwiper li:hover {background-color:#000; box-shadow:5px 5px 20px rgb(0 0 0 / 40%)}
.productSwiper li a {display:block; position:relative; width:100%; height:100%}
.product_tit {margin-bottom: 3rem;text-align: center;}
.product_tit img {height:40px; object-fit:contain}
.product_tit h4 {color:#fff;font-size: 26px;font-weight:500;padding-top:1rem}
.product_img {height: 350px;display: flex;justify-content: center;align-items: center;}
.productSwiper li span {width:20px;height:20px;background-color:var(--color-main);display: inline-flex;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);align-items: center;justify-content: center; opacity:0; transition: all .4s;} 
.productSwiper li:hover a span {opacity:1; width:75px;height:75px;}
.ex_inner {
    width: 100%;
    position: relative;
    max-width: 1500px;
    /* margin: 5px; */
    padding-top: 5rem;
}
.ex_inner .gallerySwiper {overflow: hidden;}
.ex_inner .slide-control {top:0;left: 0;margin-top: -6px;}
.gallerySwiper li {
}
.gallerySwiper li img {width:100%;border-radius: 30px;}
.gallerySwiper h4 {color:#fff;text-align:center;padding-top: 1.5rem;font-weight:500;font-size:18px}
.imgSwiper {/* position: relative; */overflow: hidden;}
.imgSwiperul {/* overflow: hidden; */position: relative;}
.imgSwiperulliimg {width:100%;height: 250px;object-fit: cover;object-position: center;border-radius: 10px 10px 0 0;}
.imgSwiperullip {text-align:center;padding: 1rem;border: 1px solid #ddd;border-radius: 0 0 10px 10px;}
.imgSwiper .slide-control {}
.imgSwiper .slide-control .swiper-scrollbar {position: absolute;top: unset;bottom: 0;transform: translateY(40px);}
.imgSwiper .slide-control .swiper-scrollbar .swiper-scrollbar-drag {background-color: var(--color-main);}
.imgSwiper .slide-control .leaf {position: absolute;width: 100%;height: 100%;top: 0;}
.imgSwiper .slide-control .leaf i {font-size: 30px;}
.imgSwiper .slide-control .leaf .img-prev {position: absolute;left: 0;top: 50%;transform: translate(-40px, -50%);}
.imgSwiper .slide-control .leaf .img-next {position: absolute;left: unset;right: 0;top: 50%;transform: translate(40px, -50%);}

.sp-button-next, .sp-button-prev {width: 20px;height: 20px;position: absolute;color: #555;bottom: 5%;/* right: 10%; */z-index: 1;top: 50%;transform: translateY(-50%);background-color: #fff;width: 40px;height: 40px;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;box-shadow: var(--boxshadow);transition:all .4s}
.sp-button-next.swiper-button-disabled, .sp-button-prev.swiper-button-disabled {/* opacity: .35; */cursor: auto;pointer-events: none;}
.sp-button-next {right: -20px;}
.sp-button-prev {left: -20px;}
.sp-button-next:hover, .sp-button-prev:hover {background-color:var(--color-main);color:#fff} 

.ex_inner li .imgbox {
    /* height: 300px; */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    /* margin-bottom: 1rem; */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* margin-bottom: .5em; */
}

.gall_btn {
    position: absolute;
    top: 35%;
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
}
.ex_inner button {position:absolute;top:35%;z-index: 1;}
.ex_inner button i {font-size: 35px;color: #4b4b4b;}
.gall-prev {left: -40px;}
.gall-next {right: -40px;}
.ex_inner button:hover i {color:var(--color-main2)}
.ex_inner button.swiper-button-disabled{display:none;}

.main_sec5 {display:flex;margin-bottom: 120px;width: 100%;background-image: url(/img/main/sec5_img.jpg);background-repeat: no-repeat;background-position: right top;min-height: 560px;/* background-size: 55%; */max-width: 1920px;}
.sec5_inner {width: var(--width-size);margin: 0 auto;padding: 0 40px;}
.sec5_top {display:flex;flex-direction: column;width: 35%;align-items: flex-start;padding: 0;border-bottom: 0;height: 100%;justify-content: flex-start;z-index: 1;position: relative;}
.sec5_top p {margin-top: 2rem;word-break: keep-all;}
.sec5_top > div {margin-bottom: 5rem;}
.sec_top p br, .sec2_top p br {display:none} 

/* PC */ 
@media all and (min-width:1024px) and (max-width: 1600px)  {
	.main_sec2, .main_sec4, .main_sec5, .main_sec6  {padding: 0 5% 5rem;}
	.main_sec1 {/* height: 1100px; */}
	.main_sec2 {width:100%}
	.main_sec3 {padding-top: 5rem;}
	.main_sec5 {background-size: clamp(60%, 1000px, 90%);margin-top: 5rem;}
	.sec5_inner {padding:0}
	.main_slide {width:100%}
	.main_slide .swiper-slide img {/* object-position: 74%; */height: auto;}
	.slide_txt {width:100%;padding-left:5%;9%; */}
	.slide_txt h2 {font-size: clamp(3rem, 12vw, 5rem);}
	.main_slide .slide-control {width:100%;padding-left:5%;}
	.baneer {width:100%}
	.banner img {width:100%}
	.sec3_inner {padding:0}
	.sec3_top {padding:0 5%}
	.productSwiper .swiper-slide-active {} 
	.product_img {padding: 0 1rem;height: auto;}
	.product_img img {height: 100%;object-fit:contain}
}
/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/ 
@media all and (max-width:1023px) {
	.main {/* padding-top:80px; */}
	.main h3 {font-size: clamp(2.8rem, 8vw, 3.2rem);}
	.main_sec1, .main_sec2, .main_sec4, .main_sec5, .main_sec6  {padding: 0 5% 4rem;background-size: 100%;}
    .main_sec1 {height:800px;width: 100%;padding: 0 0 2rem;}
	.main_slide .swiper-slide img {object-position: 72%;}
	.main_slide .slide-control {width:100%;padding-left:5%;}
	.slide_txt {width:100%;padding-left:5%;}
	.slide_txt h2 {font-size: clamp(3rem, 10vw, 3.5rem);}
	.slide_txt p {font-size: clamp(.95rem, 5vw, 1.2rem);}
	.main_sec2 {width:100%}
	.banner {width:100%}
	.banner img {width:100%}
	.main_sec3 {padding-top: 4rem;padding-left: 5%;}
	.sec3_top {padding-right:5%}
	.product_img {/* padding: 1rem; */padding: 0 1rem;}
	.product_img img {width:100%;object-fit:contain;height: 100%;}
	.sec4_top:after {width:80%}
	.main_sec5 {margin-top: 4rem;background-position-y: center;margin-bottom: 4rem;}
	.sec3_inner, .sec5_inner {padding:0}
	.sec5_top {width:100%;display: flex;flex-direction: row;justify-content: space-between;height: auto;align-items: center;}
	.sec5_top > div {margin-bottom:0;}
	.sec5_top p {margin-top: .5rem;}
	
} 


/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) {
	p, li, dd {font-size: clamp(.9rem, 4vw, 1rem);}
	.main_sec1, .main_sec2, .main_sec4 {padding: 3rem 5% 3rem;}
	.main_sec1 {height:100vh;padding: 0;}
	.slide_txt {top:unset;bottom: 15%;}
	.slide_txt h2 {margin-bottom:1rem;font-size: clamp(2.5rem, 8vw, 3.5rem);}
	.main_slide .swiper-slide img {object-position: 87%;padding-bottom:15rem}
	.main_slide .slide-control {top:unset; bottom:6%}
	.main h3 {font-size: clamp(2.5rem, 7vw, 3rem);}
	.main_sec2 h3 span {display:block}
	.slide_txt li {font-size: clamp(.9rem, 4vw, 1rem);}
	.banner {height: 335px;}
	.banner img {height:100%;object-fit:cover;object-position: calc(50% + -7rem);}
	.sec_top {flex-wrap:wrap;padding-bottom: 2rem;}
	.sec_top > div {margin-bottom:1rem}
	.sec_top p, .sec2_top p {font-size: clamp(.9rem, 4.3vw, 1.1rem);width: 100%;}
	.btn_more a {font-size: clamp(1rem, 4.5vw, 1.2rem);}
	.sec2_top p br {display:unset;} 
	.main_sec3 {padding-bottom:3rem}
	.productSwiper li, .productSwiper .swiper-slide-active {margin-top:0;padding: 2rem 1rem;margin-bottom: 0;} 
	.product_tit h4 {font-size: clamp(1rem, 5vw, 1.2rem);}
	.product_tit {margin-bottom: 3rem;}
	.product_img {height:200px;}
	.product_img img {object-fit:contain;height:100%;width: unset;}
	.ex_inner {padding-top:2rem}
	.sec4_top:after {width:50%}
	.main_sec5 {min-height: 370px;background-position-y: bottom;margin-bottom: 6rem;}
}