/*메인 슬라이드*/
.slide-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 92vh;
    width: 100%;
}
#main_slide .slick-list {width: 100%;}
#main_slide .slide-area {position: relative;}


/*메인슬라드-텍스트*/
#main_slide{
    position: relative;
}
#main_slide .slick-caption {
    position: absolute;
    top: 50%;
    max-width: 1300px;
    width: 100%;
    left: 50%;
    color: #fff;
    transform:translate(-50%,-50% );
    transition:opacity 0s 3s, transform 0s 3s;
    z-index: 999;
}
#main_slide  .slick-active .slick-caption {
    transform:translateY(0);
    opacity:1;
    transition:opacity 2s, transform 2s;
}
#main_slide .slide_txtarea h2 {
    font-size: 60px;
    font-weight: 500;
    margin: 0 auto 120px;
    overflow: hidden;
    height: 150px;
    box-sizing: content-box;
}

#main_slide .slide_txtarea h2 span{
    display: block;
    animation-name: slidetit;
    animation-duration: 1s;
    transform: translateY(80px);
    animation-fill-mode: forwards;
}

#main_slide .slide_txtarea h2 strong{
    font-size: 70px;
    font-weight: 700;
}
#main_slide .slide_txtarea p {
    font-size: 22px;
    font-weight: 500;
    overflow: hidden;
    height: 26px;
}

#main_slide .slide_txtarea p span{
    display: block;
    animation-name: slidetit;
    animation-duration: 1s;
    transform: translateY(80px);
    animation-fill-mode: forwards;
}

#main_slide .scroll-down{
    margin-top: 50px;
    animation-name: scrollArrow; animation-duration: 1s;transform: translateY(0px);animation-iteration-count: infinite;
}

#main_slide .scroll-down img{
    display: inline-block;
    margin-right: 10px;
}

#main_slide .pagingInfo{
    position: absolute;
    max-width: 1300px;
    display: flex;
    justify-content: right;
    column-gap: 10px;
    align-items: center;
    width: 100%;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 30px;
    z-index: 99;
}

#main_slide .pagingInfo .ms-now{
    font-weight: 700;
    font-size: 55px;
}

@keyframes slidetit{
    0%{
        transform: translateY(80px);
    }

    100%{
        transform: translateY(0px);
    }
}

@keyframes scrollArrow{
    0% {transform: translateY(0px);}
    50% {transform: translateY(10px);}
    100% {transform: translateY(0px);}
}

/*메인슬라드-페이지네이션*/
#main_slide .slick-dots {
    position: absolute;
    top : 51.5%;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    z-index: 15;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    max-width: 1300px;
    list-style: none;
    z-index: 9999;
}
#main_slide .slick-dots li {
    height: 6px;
    width: 80px;
    margin-right: 10px;
    background: rgba(255, 255, 255, 0.3)
}
#main_slide .slick-dots li button {font-size: 0; text-indent: -9999px; opacity: 0; }


#main_slide .slick-dots li:hover{cursor:pointer;}

#main_slide .slick-dots .slick-active{
    background: #fff;
}

@media screen and (max-width: 1024px){
    
    #main_slide .slide_txtarea p {font-size: 1.2em!important; word-break: keep-all;}
    
    #main_slide .pagingInfo{
        left: 42%;
    }

    #main_slide .slide_txtarea h2 {font-size: 2.2em; height: 100px;}
    
    #main_slide .slide_txtarea h2 strong{
        font-size: 50px;
    }

    #main_slide .slick-caption{
        padding-left: 50px;
        top: 50%;
    }

    #main_slide .slick-dots{
        top: 48%;
        padding-left: 50px;
    }
    
}

@media screen and (max-width: 768px){

    #main_slide .slick-caption {padding: 0 5%; top: 30%;}
    #main_slide .slide_txtarea h2 {font-size: 1.8em; margin: 0 auto 10px;}
    #main_slide .slide_txtarea p {line-height: 1.5;}
    #main_slide .slick-dots{top: 55%;}
    .htitle h1{font-size: 2em;}
    
    
    #mainproduct .product-tab{
        min-height: 480px;
    }
    
}



@media screen and (max-width: 575px){

    .slide-bg{
        height: 60vh;
    }

    #main_slide .slick-arrow {display: none!important;}
    #main_slide .slick-caption {top: 47%;}
    
    #main_slide .slide_txtarea h2 {font-size:  1.8rem; height: 75px;}
    #main_slide .slide_txtarea p {font-size:  1.1rem; height: 70px;}

    #main_slide .slide_txtarea h2 strong{
        font-size: 32px;
    }

    #main_slide .scroll-down{
        margin-top: 70px;
    }

    #main_slide .pagingInfo .ms-now{
        font-size: 42px;
    }

    #main_slide .slick-dots{
        top: 58%;
        padding-left: 20px;
    }

    #mainproduct .product-tab ul li{
        margin: 10px;
    }

    #mainproduct .product-tab .txtarea{
        padding: 30px 15px;
    }

    #mainproduct .product-tab{
        margin-top: 30px;
    }
}















/*갤러리추출 슬라이드*/
#maingallery .container {padding: 0;}
#maingallery .product-div 
{width: 100%; max-width: 1200px; margin: 0 auto; color: #666;}
#maingallery .container .row {margin-right: 0; margin-left: 0;}

#maingallery .swiper-slide table, 
#maingallery .swiper-slide table tbody, 
#maingallery .swiper-slide table tr, 
#maingallery .swiper-slide table td 
{display: block; width: 270px!important; text-align: center; padding: 0}
#maingallery td.board_output_gallery_img:hover {opacity: 0.7;}
#maingallery .swiper-container,.swiper-container 
{max-width: 1200px!important; display: block; margin: auto; overflow: hidden;}
/*#maingallery td.swiper-slide {background-color: #fff;}*/
#maingallery td.swiper-slide tr:nth-child(2) td {max-height: 50px;}
#maingallery .gallerybbs table td.board_output_gallery_img img 
{width: 270px; height: 270px; max-width: 100%; object-fit: cover; object-position: center; border: 1px solid #ddd;}
#maingallery span.board_output_gallery_subject { padding: 10px 0 0;}
#maingallery span.board_output_gallery_subject, 
#maingallery span.board_output_gallery_subject a 
{font-family: 'pretendard'!important; font-size: 20px!important; letter-spacing: -0.05em!important; color: #333!important; display: block; font-weight: 500;}

.swiper-button-next.next-btn-01 {background: url(../next-btn.png) center center no-repeat; right: 250px!important;}
.swiper-button-prev.prev-btn-01 {background: url(../prev-btn.png) center center no-repeat; left: 250px!important;}

.swiper-button-next.next-btn-01, #maingallery .swiper-button-prev.prev-btn-01 {
    color: #474646!important;
    top: calc(50% + 45px)!important;
    width: 65px!important;
    height: 56px!important;
}
.swiper-button-prev.prev-btn-01, 
.swiper-container-rtl .swiper-button-next.next-btn-01 
{left: 10px; right: auto;}

.swiper-button-next.next-btn-01:after, 
.swiper-container-rtl .swiper-button-prev.prev-btn-01:after, .swiper-button-prev.prev-btn-01:after, 
.swiper-container-rtl .swiper-button-next.next-btn-01:after 
{display: none;}


#maingallery .product-divs li, 
#maingallery .product-divs .board_output_gallery_subject {
    font-size: 17px;
    letter-spacing: -0.5px;
    color: #4e4e4e;
    line-height: 4;
}

#maingallery .product-divs .swiper-slide:hover li {color: #111;}
#maingallery .product-divs .swiper-slide:hover li img {opacity: 0.8;}


.product-divs {background: #f7f7f7;}


@media screen and (max-width: 1700px){
    #maingallery .swiper-button-next.next-btn-01 {right: 5%!important;}
    #maingallery .swiper-button-prev.prev-btn-01 {left: 5%!important;}
}
@media screen and (max-width: 1200px){
/*
    #maingallery .swiper-button-next.next-btn-01, 
    #maingallery .swiper-button-prev.prev-btn-01 {display: none!important;}
*/
    #maingallery .product-div  {max-width: 100%!important;}
    #maingallery .swiper-container {max-width: 750px!important;}
    #maingallery .gallerybbs table td.board_output_gallery_img img {width: 100%!important;}
    #maingallery .swiper-slide table, 
    #maingallery .swiper-slide table tbody, 
    #maingallery .swiper-slide table tr, 
    #maingallery .swiper-slide table td,
    #maingallery .gallerybbs table td.board_output_gallery_img img {
        width: 100%!important;
        max-width: 100%;
    }
    #maingallery table.board_output {margin: auto;}
}
@media screen and (max-width: 768px){
    #maingallery .swiper-button-next.next-btn-01 {right: 0%!important;}
    #maingallery .swiper-button-prev.prev-btn-01 {left: 0%!important;}
    #maingallery .swiper-container {max-width: 600px!important;}
}
@media screen and (max-width: 575px){
    #maingallery .swiper-container {max-width: 300px!important;}
    #maingallery .product-divs {padding: 50px 0 70px;}
    #maingallery span.board_output_gallery_subject {font-size: 13px!important;}
}


@media screen and (max-width: 1200px){
    .swiper-button-next.prod-next {right: 2%;}
    .swiper-button-prev.prod-prev {left: 2%;}
}
@media screen and (max-width: 991px){
    #mainproduct ul {height: auto; max-width: 600px; margin: auto;}
    #mainproduct .prod-spec {padding: 60px 50px 30px;}
    #mainproduct .prod-img {height: 350px;}
    .swiper-button-next.prod-next {right: 5%;}
    .swiper-button-prev.prod-prev {left: 5%;}

}
@media screen and (max-width: 768px){
    #mainproduct .swiper-container {max-width: 600px!important;}
    .swiper-button-next.prod-next, .swiper-button-prev.prod-prev
    {color: #000;}

}
@media screen and (max-width: 575px){
    #mainproduct .prod-img {height: 200px;}
    #mainproduct .swiper-container {max-width: 350px!important;}
    #mainproduct .prod-spec {padding: 30px 30px 30px;}
    .swiper-button-next.prod-next, .swiper-button-prev.prod-prev
    {top: 27%;}
}