@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

::selection {
    color: #000;
    background: #ffbf00;
}

::-moz-selection {
    /* Code for Firefox */
    color: #000;
    background: #ffbf00;
}


/*reser*/
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

.clearfix:before,
.clearfix::after {
    display: block;
    content: "";
    clear: both;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
}

/*layout*/
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    background: #ffbf00;
}
#Wrap{ position: relative; width: 100%; height: 100%;}

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

    .btn_login{ position: fixed; right: 15px; bottom: 285px; display: inline-block; width: 70px; height: 70px; text-indent: -9999px; background: url(../img/btn_login.png) no-repeat center center; background-size: cover; z-index: 1000; }
    .btn_form{ position: fixed; right: 15px; bottom: 220px; display: inline-block; width: 70px; height: 70px; text-indent: -9999px; background: url(../img/m_ico_form.png) no-repeat center center; background-size: cover; z-index: 1000; }
    .kakao{position: fixed; right: 15px; bottom: 25px; display: inline-block; width: 70px; height: 70px; text-indent: -9999px; background: url(../img/kakao.png) no-repeat center center; background-size: cover; z-index: 1000;}

	.blog{position: fixed; right: 20px; bottom: 160px; display: inline-block; width: 60px; height: 60px; text-indent: -9999px; background: url(../img/blogm.png) no-repeat center center; background-size: cover; z-index: 1000;}
	.instagram{position: fixed; right: 20px; bottom: 95px; display: inline-block; width: 60px; height: 60px; text-indent: -9999px; background: url(../img/instagramm.png) no-repeat center center; background-size: cover; z-index: 1000;}


    /*index_slide1*/
    .slide1 { position: relative; background: url(../img/m_1_bg.png)no-repeat center center; background-size: cover; width: 100%; height: 100%; }
    .slide1 .slide1_logo { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 80%; animation: s1 1s both;}
    .slide1 .slide1_logo img{ width: 100%;}
    .slide1 .slide1_line { width: 1px; height: 50px; background: #000; position: absolute; top: 42%; left: 51%; transform: translate(100%, 0); animation: s1_line 1s both calc(var(--delay)*1s); }
    .slide1 .slide1_text { text-align: center;}
    .slide1 .slide1_text p { font-weight: 700; font-size: 10vw; letter-spacing: -2px; text-transform: capitalize; white-space: nowrap; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 65px 0 5px; animation: s1_text1 .8s both calc(var(--delay)*1s);}
    .slide1 .slide1_text span { font-size: 10vw; font-weight: 200; letter-spacing: -2px;}
    .slide1 .slide1_text b { font-weight: 700; font-size: 9vw; color: #fff; margin: 0; animation: s1_text2 1s both calc(var(--delay)*1s); background: #ffbf00; padding: 0 5px;}
    .slide1 .slide1_text2 { font-size: 5vw; letter-spacing: -1px; font-weight: 400; color: 111; width: 290px; position: absolute; top: 76%; left: 50%; transform: translateX(-50%); text-align: center; animation: s1_text3 1s both calc(var(--delay)*0.8s); }
    .slide1>img { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 60;}
    .slide1 .scroll_more { position: absolute; text-align: center; bottom: 30px; animation: more 2s ease infinite; }

    @keyframes s1 {
        0% {
            transform: translate( -50% , 100px);
        }

        100% {
            transform: translate( -50%, 0);
        }
    }

    @keyframes s1_line {
        0% {
            height: 0;
        }

        100% {
            height: 50px;
        }
    }

    @keyframes s1_text1 {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes typing {
        0% {
            width: 0%;
        }

        100% {
            width: 100%;
        }
    }

    @keyframes s1_text2 {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes s1_text3 {
        0% {
            opacity: 0;
            filter: blur(20px);
        }

        50% {
            opacity: 0.5;
            filter: blur(10px);
        }

        100% {
            opacity: 1;
            filter: none;
        }
    }

    @keyframes more {
        0% {
            bottom: 30px;
        }

        50% {
            bottom: 20px;
        }

        100% {
            bottom: 30px;
        }
    }


    /*index_silde2*/
    #s02 { background: url(../img/m_2_bg.png) no-repeat center center; background-size: cover;}
    #s02 ul { width: 80%; margin: 0 auto 5%; display: flex; justify-content: space-between; }
    #s02 ul > li{ width: 32%; }
    #s02 ul > li:not(:first-of-type){ margin-left: 2%; }
    #s02 ul > li img{ width: 100%; }
    #s02 .slide2_text{ text-align: center; }
    #s02 .slide2_text p { font-size: 11vw; font-weight: 100; letter-spacing: -2px; }
    #s02 .slide2_text b { font-size: 10vw; font-weight: 700; color: #fff; background: #ffbf00; padding: 0 5px; }


    /*index_silde3*/
    #s03 { background: url(../img/m_3_bg.png) no-repeat; background-size: cover; text-align: center;}
    #s03 p{ font-size: 13vw;}
    #s03 p:first-of-type{font-weight: 100;}
    #s03 p:last-of-type{font-weight: 500;}
    #s03 div{width: 70%; max-width: 340px; margin: 0 auto;}
    #s03 div img{ width: 100%; margin-left: 15px;}


    /*index_silde4*/
    #s04 {background: url(../img/m_4_bg.png) no-repeat center center; background-size:cover;}
    #s04 .slide4_text { text-align:center; }
    #s04 .slide4_text p { color:#fff; font-size:11vw; font-weight: 700; letter-spacing:-2px; margin-bottom: 50px;}
    #s04 .slide4_text span { font-size:11vw; font-weight: 200; letter-spacing:-2px; color:#222;  background:#fff; padding:0 5px; }

    /*index_silde5*/
    #s05 {background: url(../img/m_5_bg.png) no-repeat center center; background-size:cover; text-align: center;}
    #s05 .s5_top{ margin-bottom: 30px; }
    #s05 .s5_top h2 { font-size: 8vw; font-weight: 700; line-height: 10vw; letter-spacing: -2px; color: #222; margin-bottom: 10px; }
    #s05 .s5_top p { font-size: 20px; line-height: 30px; letter-spacing: -2px; color: #222; padding: 0 30px;}
    #s05 .owl-carousel .item{ width: 320px; height: 400px; border: 1px solid #dbdbdb; border-radius: 15px;  background-color: #fff; padding: 40px 25px; box-sizing: border-box;}
    #s05 .owl-carousel .item img{ margin: 0 auto 40px;}
    #s05 .owl-carousel .item h2{ font-size: 28px; color: #111; letter-spacing: -2px; margin-bottom: 20px;}
    #s05 .owl-carousel .item span{ font-size: 28px; color: #ffa200; letter-spacing: -2px; margin-bottom: 20px;}
    #s05 .owl-carousel .item p{ font-size: 17px; color: #111; letter-spacing: -1px; margin-bottom: 26px;}
    #s05 .owl-carousel .item.s5_point{ background-color: #ffa200; border: 1px solid #ffa200;}
    #s05 .owl-carousel .item.s5_point > *{ color: #fff;}
    #s05 .owl-carousel .owl-carousel .owl-nav { display: none; }

    /*index_silde6*/
    #s06 {background-color: #ffbf00; text-align: center;}
    #s06 .s6_top{ margin-bottom: 20px; }
    #s06 .s6_top h2 { font-size: 7vw; font-weight: 700; line-height: 10vw; letter-spacing: -2px; color: #222;}
    #s06 .owl-carousel .item { width: 95%;}
    #s06 .owl-carousel .item div h3{ font-size: 5.5vw; letter-spacing: -2px; font-weight: 300; color: #111; margin-bottom: 10px;}
    #s06 .owl-carousel .item div h3 span{ background-color: #ffdb70;}
    #s06 .owl-carousel .item div p{ font-size: 4.5vw; line-height: 8vw; letter-spacing: -2px; color: #8e6a00; margin-bottom: 20px;}
    #s06 .owl-carousel .item div img{ width: 90%; margin: 0 auto;}
    #s06 .bx-controls{ display: none;}


    /*index_silde7,8,9*/
    #s07,#s08,#s09 {background-color: #ffbf00; text-align: center; overflow: hidden;}
    #s07 .s7_top,#s08 .s7_top,#s09 .s7_top { margin-bottom: 15px;}
    #s07 .s7_top img,#s08 .s7_top img,#s09 .s7_top img { border-radius: 3px;}
    #s07 .s7_top h2,#s08 .s7_top h2,#s09 .s7_top h2 { font-size: 8vw; font-weight: 700; line-height: 10vw; letter-spacing: -2px; color: #222; margin-bottom: 10px;}
    #s07 .s7_top > img:last-of-type,#s08 .s7_top > img:last-of-type,#s09 .s7_top > img:last-of-type{ display: block; margin: 0 auto 15px}
    #s07 .s7_top span,#s08 .s7_top span,#s09 .s7_top span { display: inline-block; width: 100px; font-size: 14px; font-weight: 400; line-height: 40px; color: #fff; background-color: #111; border-radius: 3px;}
    #s07 .owl-carousel li,#s08 .owl-carousel li,#s09 .owl-carousel li{ width: 95%;}
    #s07 .owl-carousel li p, #s08 .owl-carousel li p, #s09 .owl-carousel li p{ font-size: 5vw; letter-spacing: -2px; font-weight: 300; color: #111; margin-bottom: 10px;}
    #s07 .owl-carousel li img, #s08 .owl-carousel li img, #s09 .owl-carousel li img{ width: 60%; margin: 0 auto;}


    /*index_silde8*/
    #s10 {background-color: #fff; text-align: center;}
    #s10 .s8_top{ margin-bottom: 20px; }
    #s10 .s8_top h2 { font-size: 8vw; font-weight: 700; line-height: 10vw; letter-spacing: -2px; color: #222; margin-bottom: 15px;}
    #s10 .s8_top p{ font-size: 13px; margin-bottom: 20px;}
    #s10 .s8_top a { display: inline-block; margin-bottom: 50px; width: 55%; min-width: 100px; height: 60px; line-height: 60px; letter-spacing: -0.5px; color: #fff; font-weight: 400; font-size: 18px; background-color: #111; border-radius: 5px;}
    #s10 .s8_video { width: 95%; height: 350px; margin: 0 auto;}
    #s10 .s8_video iframe{ width: 100%; height: 100%;}

}