@charset "utf-8";

/* 풀페이지 블릿 */
#fp-nav ul li a span {
    background: #fff;
    border: 1px solid #ccc;

}


/* top swiper */
/* .swiper-pagination{
    color: #ddd;
}
.swiper-pagination-current{
    font-size: 20px;
    color: #eee;
} */
.sw1 .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.8;
}

.sw1 .swiper-pagination-bullet-active {
    background: #124331;

}

.top_slide {
    height: 100%;
}

.top_slide ul li {
    height: 100%;
}

.top_slide ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* best prod */
.best_prod {
    display: flex;
    align-items: center;
}

.best_prod figure {
    margin-right: 60px;
    width: 50%;
    margin-top: 40px;
}

.best_prod figure img {
    max-width: 100%;
    transform: translate(-100%, 1px) rotate(-360deg);
    transition: 1.3s .2s;
}

#bp_sec.active .best_prod figure img {
    transform: translate(0.5px, 1px) rotate(0deg);
}

.bp_text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 50%;
    position: relative;
}

.bp_text>div>p {
    font-size: 6vw;
    /* 120px */
    font-style: italic;
    font-weight: 300;
    color: #142e34;
    text-indent: -10%;
}

.bp_text .line {
    position: relative;
}

.bp_text .line p {
    font: 18vw "Noto Sans KR", sans-serif;
    /* 350px */
    line-height: 1;
    color: #fff;
    position: absolute;
    top: -10%;
}

.bp_text .line div {
    background: #142e14;
    height: 17vw;
    width: 0;
    transition: 1s .2s;
}

#bp_sec.active .bp_text .line div {
    width: 100%;
}

.bp_text .ka_bp {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bp_text .ka_bp_text {
    margin-left: 60%;
    display: flex;
    flex-direction: column;
    margin-top: 15%;
}

.bp_text .ka_bp span {
    color: #124331;
    font-size: 1.5vw;
    margin-right: 10%;
}


.bp_text .ka_bp .ka_bp_text>span {
    font-weight: 300;
    margin-right: 17%;
}

.bp_text .ka_bp p span {
    position: relative;
}

.bp_text .ka_bp p span::after {
    display: block;
    content: '';
    position: absolute;
    width: 0%;
    left: 0;
    bottom: 1px;
    border-bottom: 1px solid #142E34;
    transition: 1.5s .5s;
}

#bp_sec.active .bp_text .ka_bp p span::after {
    width: 200%;
}

/* best prod 2 */
.best_prod_2 {
    display: flex;
    justify-content: space-between;
    height: 100%;
}

.bp2_left {
    margin-top: 158px;
}

.bp2_left_img {
    position: relative;
}

.bp2_left_img img {
    max-width: 100%;
    transform: translateX(-50%);
    opacity: 0;
    transition: 1s .3s;
}

#bp2_sec.active .bp2_left_img img {
    transform: translateX(0%);
    opacity: 1;
}

.bp2_left_img img:nth-child(2) {
    position: absolute;
    right: 0;
    bottom: -22%;
    width: 50%;
}




.bp2_right {
    display: flex;
    flex-direction: column;
    margin-top: 130px;
    justify-content: flex-end;
}

.bp2_right_text {
    margin-left: 50%;
    margin-bottom: 150px;
    font: 1.5vw "Noto Sans KR", sans-serif;
    font-weight: 300;
    color: #666;
    transform: translateX(50%);
    opacity: 0;
    transition: 1s .6s;
}

#bp2_sec.active .bp2_right_text {
    transform: translateX(0);
    opacity: 1;
}


.bp2_right_text span {
    font-size: 1.7vw;
    font-weight: 400;
    color: #124331;
}

.bp2_right_text p:nth-child(2) {
    margin-left: 30%;
}

.bp2_right_img {
    position: relative;
    padding-left: 35px;
    padding-top: 30px;
    transform: translateX(50%);
    opacity: 0;
    transition: 1s .4s;
}

#bp2_sec.active .bp2_right_img {
    transform: translateX(0%);
    opacity: 1;
}

.bp2_right_img img {
    max-width: 100%;
}

.bp2_right_text_2 {
    position: absolute;
    width: 300px;
    top: -10px;
    left: 0px;
    height: 45px;

}

.bp2_right_text_2 p {
    font-size: 20px;
    font-weight: 300;
}

.bp2_right_text_2 p:nth-child(1) {
    margin-left: 10%;
}

.bp2_right_text_2 p .orange {
    color: #e7743b;
}

.bp2_right_text_2 p .brown {
    color: #34180f;
}

.bp2_right_text_2 p .green {
    color: #0d2e22;
}

.bp2_right_text_2 p .indigo {
    color: #044269;
}


/* life */
.life {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.p_title {
    display: flex;
    flex-direction: column;
    margin-left: 6%;
    margin-top: 5%;
}

.p_title span:nth-child(1) {
    font-size: 22px;
    font-weight: 300;
    position: relative;
}

.p_title span:nth-child(1)::after {
    position: absolute;
    display: block;
    content: '';
    width: 213px;
    left: -113px;
    border-bottom: 1px solid #142E34;
}

.p_title span:nth-child(2) {
    font-size: 50px;
    font-weight: 300;
    color: #124331;
}

.gallery {
    margin: 5% 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.gallery ul {
    display: flex;
    width: 100%;
    align-items: center;
    padding-bottom: 30px;
}

/* .g_scroll .prev_sw1, .g_scroll .next_sw1{

} */
.gallery ul li {
    position: relative;
    height: 550px;
}

.gallery ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(1);
    transition: .3s;
}

.gallery ul li .g_img_text {
    display: none;
    position: absolute;
    width: 300px;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .3s;
}

.gallery ul li .more_icon {
    position: absolute;
    color: #fff;
    font-size: 40px;
    right: 0;
    opacity: 0;
}

.swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
    width: 400px;
    height: 2px;
    position: static;
}

.swiper-scrollbar-drag {
    background: #124331;
}

.swiper-button-next:after,
.swiper-button-prev::after {
    display: none;
}

.g_scroll {
    display: flex;
    width: 600px;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
}

.g_scroll span {
    transform: translateY(21px);
}


/* 어두운 모달 윈도우 */
#glayLayer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    left: 0;
    top: 0;
    display: none;
    z-index: 1000;
}

#overLayer {
    position: absolute;
    z-index: 1001;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

#overLayer figure img {
    max-width: 100%;
}

#overLayer .mw_close {
    position: absolute;
    right: -10%;
    top: 0%;
    cursor: pointer;
    font-size: 30px;
    color: #fff;
}



/* category */
/* .category{
    margin-top: 10%;
} */
.category {
    height: 100vh;
}

.ctg_wrap,
.ctg_right ul {
    height: 100%;
}

.ctg_wrap {
    display: flex;
    justify-content: space-between;

}

.ctg_left {
    width: 800px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 6.8%;
}

.ctg_title {
    display: flex;
    flex-direction: column;
    margin-left: -2%;
    margin-top: 5%;
}

.ctg_title span:nth-child(1) {
    font-size: 22px;
    font-weight: 300;
    position: relative;
}

.ctg_title span:nth-child(1)::after {
    position: absolute;
    display: block;
    content: '';
    width: 213px;
    left: -113px;
    border-bottom: 1px solid #142E34;
}

.ctg_title span:nth-child(2) {
    font-size: 50px;
    font-weight: 300;
    color: #124331;
}

.ctg_left_text {
    max-width: 650px;
    letter-spacing: -1px;
}

.ctg_left_text p {
    font: 18px "Noto Sans KR", sans-serif;
    font-weight: 300;
}

.ctg_left_text span {
    font-size: 25px;
    color: #124331;
}

.ctg_left .animation {
    position: relative;
    max-width: 100%;
    height: 185px;
}


.ctg_left .animation ul li {
    padding: 20px 20px 20px 0;
    box-sizing: border-box;
}

.ctg_left .ani_img img,
.ctg_left .ani_line img {
    width: 100%;
}

.ctg_left .ani_img,
.ctg_left .ani_line {
    display: flex;
    width: 100%;
    justify-content: space-between;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}



.ctg_left .animation .ani_img img {
    animation: prod_img 4.5s ease-in infinite both;
}

.ctg_left .animation .ani_line img {
    animation: prod_line 4.5s .8s ease-in-out infinite both;
    transform: scale(0);
}

@keyframes prod_line {
    0% {
        transform: scale(0);
    }

    10% {
        transform: scale(1.2);
    }

    25% {
        transform: scale(1);
    }

    55% {
        transform: scale(1);
    }

    60% {
        transform: scale(1);
        opacity: 1;
    }

    70% {
        transform: scale(0);
        opacity: 0;
    }

}

@keyframes prod_img {
    0% {
        transform: scale(1);
    }

    15% {
        transform: scale(1);
    }

    25% {
        transform: scale(0);
    }

    80% {
        transform: scale(0);
    }

    90% {
        transform: scale(1);
    }
}

.ctg_right {
    margin-left: 30px;
}

.ctg_right ul img {
    width: 100%;
    transition: .3s;
    height: 100%;
    object-fit: cover;
}

.ctg_right ul li:nth-child(2) img {
    transform: rotateY(180deg);
}

.ctg_right ul li {
    position: relative;
    overflow: hidden;
    transform: translateX(50%);
    opacity: 0;
    height: 33.3%;
}

.ctg_right ul li:nth-child(1) {
    transition: 1s .6s;
}

.ctg_right ul li:nth-child(2) {
    transition: 1s .4s;
}

.ctg_right ul li:nth-child(3) {
    transition: 1s .2s;
}

#cate_sec.active .ctg_right ul li {
    transform: translateX(0%);
    opacity: 1;
}


.ctg_right li p {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;
    font-size: 40px;
    font-weight: 300;
    color: #124331;
}

.ctg_right li p span {
    font-size: 70px;
    font-weight: 400;
}



/* .ctg_right li:hover{
    transform: translateX(-20px);
}
.ctg_right li:hover img{
    transform: scale(1.1);
    filter: brightness(.5);
}
.ctg_right li:hover p{
    color: #fff;
}
 */

/* info */
.info {
    height: 100%;
}

#info_wrap {
    display: flex;
    height: 100%;
}

.info_ctg {
    padding-left: 120px;
    margin-top: 170px;
    margin-right: 100px;
    box-sizing: border-box;

}

.info_ctg li {
    cursor: pointer;
    margin-bottom: 35px;
}

.info_ctg li span {
    font-size: 30px;
    font-weight: 300;
    color: #666;
    position: relative;
}

.info_ctg li span::after {
    position: absolute;
    content: '';
    width: 0%;
    border-bottom: 1px solid #124331;
    bottom: -3px;
    right: 0;
    transition: .2s;
}

/* info 카테고리 활성화 */
/* .info_ctg li span.info_on{
    color: #124331;
}
.info_ctg li span.info_on::after{
    width: 300%;

}
.info_ctg li:hover span{
    color: #124331;
}
.info_ctg li:hover span::after{
    width: 300%;
} */

.info_right {
    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; */
    overflow: hidden;
}

.swiper-button-next:after,
.swiper-button-prev::after {
    text-indent: -9999px;
}

.swiper-button-next,
.swiper-button-prev {
    position: static;
    width: auto;
    color: #333;
}

.info_right .scroll_btn {
    display: flex;
    justify-content: space-between;
    margin: 170px 0 30px 0;
}

.info_right .scroll_btn>div {
    display: flex;
    align-items: center;
    cursor: pointer;
}


.info_right>div .img {
    display: flex;
}

.info_right>div .img li {
    margin-right: 50px;
    position: relative;
}

.info_right>div .img li a {
    display: block;
    width: 100%;
    position: relative;
}

.info_right>div .img li .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;

}

.info_right>div .img li .text .title {
    font: 1.3vmax "Noto Sans KR", sans-serif;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, .7);
    margin-bottom: 20px;
    position: relative;
}

.info_right>div .img li .text .title::after {
    content: '';
    position: absolute;
    width: 40px;
    border: 2px solid #fff;
    bottom: -13px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    transition: .3s;

}

.info_right>div .img li .text .content {
    font: 1.1vmax "Noto Sans KR", sans-serif;
    color: #eee;
    display: none;
    transition: .3s;
    padding: 0 20px;
}

.info_right>div .img li a:before {
    content: '';
    position: absolute;
    background: rgba(0, 0, 0, .4);
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: .3s;
}

.info_right>div .img li span {
    position: absolute;
    bottom: 0;
    right: 0;
    /* padding: 132% 0 0 84%; */
    font-size: 80px;
    color: #fff;
    transform: scale(0);
    transition: .3s;
}


.sw3 .swiper-slide img {
    width: 100%;
}

/* footer 블릿네비 숨김 */
#fp-nav ul li:last-child {
    display: none;
}




/* .info_right > div .img li:hover::before{
    opacity: 1;
}
.info_right > div .img li:hover .text .content{
    display: block;
}
.info_right > div .img li:hover .text .title::after{
    text-shadow: none;
    transform: translateX(-50%) scaleX(1)
}
.info_right > div .img li:hover span{
    transform: scale(1);
} */




/* 반응형 */

@media screen and (min-width:1401px) {
    .info_ctg li span.info_on::after {
        width: 300%;
    }

    .info_ctg li:hover span::after {
        width: 300%;
    }
}

@media screen and (max-width:1400px) {
    .info {
        height: auto;
        /* margin-bottom: 20%; */
    }

    #info_wrap {
        flex-direction: column;
        /* margin-top: 20%; */
    }

    .info_ctg {
        display: flex;
        justify-content: space-evenly;
        padding: 0;
        margin: 80px 0 0;
    }

    .info_right>div .img li .text .content {
        font-size: 16px;
    }

    .info_ctg li span::after {
        position: absolute;
        content: '';
        width: 0;
        border-bottom: 1px solid #124331;
        bottom: -5px;
        left: 50%;
        transform: scaleX(0) translateX(-50%);
        transition: .2s;
    }

    .info_ctg li span.info_on {
        color: #124331;

    }

    .info_ctg li span.info_on::after {
        transform: scaleX(1) translateX(-50%);
        width: 80%;
    }

    .info_ctg li:hover span::after {
        transform: scaleX(1) translateX(-50%);
        width: 80%;
    }

    .info_right .scroll_btn {
        margin: 30px 20px;
        justify-content: space-between;
    }

    .info_right>div .img li .text .title {
        font-size: 24px;

    }
}

@media screen and (min-width:971px) {



    /* life style */
    .gallery ul li:hover img {
        filter: brightness(.3);
    }

    .gallery ul li:hover .g_img_text {
        display: block;
    }

    .gallery ul li:hover .more_icon {
        opacity: 1;
    }

    /* 카테고리 */


    .ctg_right li:hover img {
        transform: scale(1.1);
        filter: brightness(.5);
    }

    .ctg_right ul li:nth-child(2):hover img {
        transform: rotateY(180deg) scale(1.1);
    }

    .ctg_right li:hover p {
        color: #fff;
    }


    /* info 카테고리 활성화 */
    .info_ctg li span.info_on {
        color: #124331;
    }

    .info_ctg li:hover span {
        color: #124331;
    }


    .info_right>div .img li:hover a::before {
        opacity: 1;
    }

    .info_right>div .img li:hover .text .content {
        display: block;
    }

    .info_right>div .img li:hover .text .title::after {
        text-shadow: none;
        transform: translateX(-50%) scaleX(1)
    }

    .info_right>div .img li:hover span {
        transform: scale(1);
    }

}

/* PC */


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

    #main_wrap {
        overflow: hidden;
    }

    .section,
    .fp-tableCell {
        height: auto !important;
        padding-bottom: 50px;
    }

    /* top slide */
    .swiper-pagination {
        display: none;
    }

    #bp_sec .bp_text .line div {
        width: 100%;
    }

    /* best prod */
    .best_prod {
        height: auto;
    }

    .best_prod figure {
        background: url(../img/main/product_animation_line02.png) no-repeat 50% 50%;

    }

    .best_prod figure {
        margin-right: 20px;
        margin-top: 0;
    }

    /* .best_prod figure img{
        width: 100%;
        animation: best_prod 1s .6s both;
    }
    @keyframes best_prod {
        0%{
            transform: translateX(-100%) rotate(-360deg);
        }
        100%{
            transform: translateX(0%) rotate(0deg);
        }
    } */



    .bp_text .line p {
        top: -11%;
    }

    .bp_text .ka_bp span {
        font-size: 14px;
    }

    .bp_text .ka_bp span:nth-child(1) {
        font-size: 12px;
    }

    .bp_text .ka_bp span:nth-child(2)::after {
        width: 40%;
    }

    /* best prod 2 */
    .bp2_left {
        margin-top: 20px;
    }

    .best_prod_2 {
        flex-direction: column;
    }

    .bp2_left_img img {
        max-width: 100%;
        transform: translateX(0%);
        opacity: 1;
    }

    .bp2_left_img img:nth-child(2) {
        width: 30%;
        bottom: -20%;
    }

    .bp2_right {
        margin-top: 60px;
    }

    .bp2_right_text {
        margin: 20% auto;
        width: 100%;
        font: 3vw "Noto Sans KR", sans-serif;
    }

    .bp2_right_text span {
        font-size: 3.3vw;
    }

    .bp2_right_text p:nth-child(1) {
        margin-left: 30%;
    }

    .bp2_right_text p:nth-child(2) {
        margin-left: 45%;
    }

    /* life style */

    .life {
        height: auto;
        /* margin: 80px 0 30px; */
    }

    #life_sec {
        padding-bottom: 0;
    }

    .p_title {
        margin-top: 0;
    }

    .life .p_title {
        text-align: center;
        margin-left: 0;
    }

    .p_title span:nth-child(1) {
        font-size: 18px;
    }

    .p_title span:nth-child(2) {
        font-size: 36px;
    }

    .p_title span:nth-child(1)::after {
        bottom: 0;
        left: 0;
        width: 25%;
    }

    .p_title span:nth-child(1)::before {
        position: absolute;
        display: block;
        content: '';
        width: 25%;
        right: 0;
        bottom: 0;
        border-bottom: 1px solid #142E34;
    }

    .gallery {
        margin: 13% 0;
    }

    .gallery ul {
        height: 600px;
        padding-bottom: 0;
        margin-top: -10%;
    }

    .gallery ul li .g_img_text {
        display: block;
        font-size: 24px;
        text-shadow: 0px 0px 4px #000;
    }

    .g_scroll {
        width: 40%;
    }

    #overLayer .mw_close {
        right: -30%;
    }

    #overLayer figure img {
        min-width: 130%;
        position: relative;
        right: -50%;
        transform: translateX(-50%);
    }

    /* category */
    .ctg_wrap {
        flex-direction: column;
    }

    .ctg_left {
        width: auto;
        margin-left: 0;

    }

    .ctg_title {
        margin-left: 0;
        text-align: center;
    }

    .ctg_title span:nth-child(1) {
        font-size: 18px;
    }

    .ctg_title span:nth-child(2) {
        font-size: 36px;
    }

    .ctg_title span:nth-child(1)::after {
        bottom: 0;
        left: 0;
        width: 25%;
    }

    .ctg_title span:nth-child(1)::before {
        position: absolute;
        display: block;
        content: '';
        width: 25%;
        right: 0;
        bottom: 0;
        border-bottom: 1px solid #142E34;
    }

    .ctg_left .animation {
        width: 100%;
        margin: 10% auto;
    }

    .ctg_left .animation ul li {
        padding: 30px;
    }

    .ctg_left_text {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .ctg_left_text p {
        padding: 0 20px 10%;
    }

    .ctg_right {
        margin-left: 0;
    }

    .ctg_right li p {
        font-size: 5vw;
    }



    /* info */
    .info {
        height: auto;
        /* margin-bottom: 20%; */
    }

    #info_wrap {
        flex-direction: column;
        /* margin-top: 20%; */
    }

    .info_ctg {
        display: flex;
        justify-content: space-evenly;
        padding: 0;
        margin: 0;

    }

    .info_ctg li span::after {
        position: absolute;
        content: '';
        width: 0;
        border-bottom: 1px solid #124331;
        bottom: -5px;
        left: 50%;
        transform: scaleX(0) translateX(-50%);
        transition: .2s;
    }

    .info_ctg li span.info_on {
        color: #124331;
    }

    .info_ctg li span.info_on::after {
        transform: scaleX(1) translateX(-50%);
        width: 80%;
    }

    .info_right .scroll_btn {
        margin: 30px 20px;
        justify-content: space-between;
    }

    .info_right>div .img li .text .title {
        font-size: 24px;

    }

    #footer_sec,
    #footer_sec .fp-tableCell {
        padding-bottom: 0;
    }

}

/* 970 */

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

    #top_sec,
    #bp_sec {
        padding-bottom: 0;
    }

    /* top slide */
    .top_slide {
        height: 435px;
    }

    .top_slide ul li {
        padding-top: 0;
        height: 100%;
    }

    .top_slide ul li img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .bp2_right_text p:nth-child(1) {
        margin-left: 15%;
    }

    .bp2_right_text {
        font-size: 18px;
    }

    .bp2_right_text span {
        font-size: 24px;
    }


    .ctg_left_text p {
        font-size: 14px;
    }

    .ctg_left_text span {
        font-size: 18px;
    }


    .gallery {
        margin-top: 50px;
    }

    .gallery ul {
        height: 500px;
    }

    .gallery ul li {
        height: 400px;
    }

    .gallery ul li .g_img_text {
        font-size: 20px;
        text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8), 0px 0px 5px rgba(0, 0, 0, 0.8);
    }

    .info_right>div .img li .text .title {
        font-size: 20px;
        text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8), 0px 0px 5px rgba(0, 0, 0, 0.8);
        margin-bottom: 0;
    }

    .bp_text .ka_bp_text {
        margin-left: 37%;
    }

    .info_ctg li {
        margin-bottom: 15px;
    }

    .info_right>div .img li a {
        height: 100%;
    }

    .info_right>div .img {
        height: 450px;
    }

    .sw3 .swiper-slide img {
        height: 100%;
        object-fit: cover;
    }
}

/* 510 */