@import url("s-core/s-core-dream.css");

*{margin: 0; padding: 0; border: 0; box-sizing: border-box;}
/* html, body{overflow-x: scroll; width: 100%; margin: 0;} */
body{font-size: 76%; font-family: 's-core-dream-medium'; background: #fbfafb; width: 100%; margin: 0;}
a{color: inherit; text-decoration: none;}

.address{display: none !important;}
.addr{display: none !important;}
.container_box{width: 100%; display: inline-block; height: 120px; margin:0 auto;}
.container{width: 1000px;  margin: 0 auto;}
.wrap{width: 900px; margin: 0 auto;}
.clear{clear: both;}
.mobile{display: none;}
header{width: 100%; height: 116px; font-size:18px; font-weight: 800; color: #bcbcbc;}
    header div{float: left;} 
    header .logo{line-height: 116px;}
        header .logo img{height: 22px; vertical-align: middle; line-height: 116px;}
    header .menu{margin-left: 33px; padding:48px 0;}
        header .menu a{margin-left: 25px; transition: color .2s;}
        header .menu a:hover{color:#6360c0}
    header .sns{float: right; line-height: 116px;}
        header .sns a{display: inline-block; width: 35px; height: 35px; border-radius: 100%; transition: background-color .5s; line-height: 35px; text-align: center;}
        header .sns a:hover{background: #6666cc;}
        header .sns a:hover i{color: #fff;}
            header .sns a i{line-height: 35px; vertical-align: middle; color: #6360c0;}

footer{width: 100%; float: left; background: #fff; padding: 60px 0; font-family: 's-core-dream-medium'; min-width: 1000px;}
    footer .logo{width: 100%; float: left; padding-bottom: 30px;}
        footer .logo img{height: 30px; padding-left: 20px; filter:grayscale(100%); transition: filter .5s;}
        footer .logo img:hover{filter:grayscale(0)}
    footer .bottom{width: 100%; float: left;}
        footer .bottom .info{float: left; width: 80%; margin-top: 38px;}
            footer .bottom .info .contact{margin-bottom: 20px; width: 100%; float: left;}
                footer .bottom .info .contact div{border-right: #e9e9e8 solid 2px; float: left; font-weight: bold; padding: 0 20px;}
                footer .bottom .info .contact div:last-child{border-right: none;}
                    footer .bottom .info .contact div p:nth-child(1){color: #8d8d8f; font-size: 14px; line-height: 26px;}
                    footer .bottom .info .contact div p:nth-child(2){color: #5a53bf; font-size: 16px; line-height: 28px;}
            footer .bottom .info .addr{font-size: 16px; color: #8d8d8f; padding-left: 20px;}
        footer .bottom .app{float: left; width: 20%; text-align: right;}
            footer .bottom .app img{width: 50%;}
            footer .bottom .app p{font-size: 13px; color: #5a53bf; font-family: 's-core-dream-extrabold';}

.main_body .container{position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 1000px; z-index: 101;}

.container{width: 1000px; margin: 0 auto;}

.main_body{background: none;}
.main{width: 100%; float: left;}
    .main .section{width: 100%; height: 100vh; float: left; display: inline-block; position: relative; z-index: 100; overflow: hidden;}
        .main .section .wrap{display: inline-block; transform: translate(-50%,-50%); padding-top:110px; position: absolute; top: 50%; left: 50%;}
    .main .section1{background:url(../image/main/section1_bg.jpg); background-size: cover; background-position: center;}
        .main .section1 .wrap div{font-size: 58px; line-height: 76px; font-family: 's-core-dream-extralight'; width: 40%; float: left; color: #5a53bf;}
        .main .section1 .wrap img{width: 60%; float: left;}
    .main .section2{background:url(../image/main/section2_bg.jpg); background-size: cover; background-position: center;}
        .main .section2 .wrap .text{width: 40%; float: left;}
            .main .section2 .wrap .text p:nth-child(1){font-size: 58px; line-height: 76px; font-family: 's-core-dream-extralight'; float: left; color: #fff;}
            .main .section2 .wrap .text p:nth-child(2){font-size: 18px; line-height: 26px; font-family: 's-core-dream-extralight'; float: left; color: #bdbae5; margin-top: 30px;}
        .main .section2 .wrap .img{width: 60%; float: left; text-align: right;}
            .main .section2 .wrap img{width: 90%;}
    .main .section3{background:url(../image/main/section3_bg.jpg); background-size: cover; background-position: center;}
        .main .section3 .wrap .text{width: 60%; float: left;}
            .main .section3 .wrap .text p:nth-child(1){font-size: 58px; line-height: 76px; font-family: 's-core-dream-extralight'; float: left; color: #fff; margin-top: 20vh;}
            .main .section3 .wrap .text p:nth-child(2){font-size: 18px; line-height: 26px; font-family: 's-core-dream-extralight'; float: left; color: #ffe0e1; margin-top: 30px;}
        .main .section3 .wrap .img{width: 40%; float: left; text-align: right;}
            .main .section3 .wrap img{width: 100%;}
    /* .main .section4{background:url(../image/main/section4.png); background-size: cover; background-position: center;} */
        .main .section4 .wrap img{width: 100%;}

/* 이버봄이란 */
    .customer .section1{width: 100%; float: left;}
        .customer .section1 > div{width: 50%; float: left;}
        .customer .section1 > .text{padding-left: 2%;}
        .customer .section1 > .image{text-align: right;}
            .customer .section1 .text .first{font-size: 48px; line-height: 63px; color: #5a53bf; font-weight: 200; font-family: 's-core-dream-extralight';}
            .customer .section1 .text .sub{margin-top: 30px; line-height: 25px; font-size: 15px; color: #7d7f82; font-family: 's-core-dream-regular';}
        .customer .section1 img{margin-top: 10px; width: 75%;}
    .customer .section2{width: 100%; margin-top:57px; padding: 0 20px; float: left;}
        .customer .section2 .text{width: 70%; float: left; margin-top: 40px;}
            .customer .section2 .text .first{font-size: 28px; line-height: 38px; color: #5a53bf; font-family: 's-core-dream-extrabold'; }
            .customer .section2 .text .sub{font-size: 13px; line-height: 16px; font-weight: 400; color: #5a53bf; margin-top: 15px ;}
        .customer .section2 .image{width: 30%; float: left;}
            .customer .section2 .image img{width: 100%;}
    .customer .line1{width: 100%; height: 1px; background: #dad9da; margin-top: 30px; float: left;}
    .customer .section3{width: 100%; float: left; margin-top: 25px;}
        .customer .section3 .image{width: 20%; float: left;}
            .customer .section3 .image img{width: 100%;}
        .customer .section3 .text{width: 80%; float: left; color: #5a53bf; padding-left: 30px; margin-top: 40px;}
            .customer .section3 .text .first{font-size: 28px; line-height: 38px; font-family: 's-core-dream-extrabold'; padding-left: 5%;}
            .customer .section3 .text .sub{font-size: 13px; line-height: 20px; font-weight: 400; color: #5a53bf; margin-top: 15px; padding-left: 5%;}
            .customer .section3 .text .line{width: 100%; height: 1px; background: #dad9da; margin-top: 50px;}
    .customer .section4{width: 100%; margin-top: 32px; float: left; margin-bottom: 44px;}
        .customer .section4 .text{width: 55%; float: left; color: #5a53bf;}
            .customer .section4 .text .first{font-size: 28px; line-height: 38px; font-family: 's-core-dream-extrabold'; }
            .customer .section4 .text .sub{font-size: 13px; line-height: 20px; font-weight: 400; color: #5a53bf; margin-top: 15px; }
            .customer .section4 .text .line{width: 100%; height: 1px; background: #dad9da; margin-top: 25px;}
        .customer .section4 .image{width: 45%; float: left; text-align: center;}
            .customer .section4 .image img{width: 80%;}
    .customer .section5{width: 100%; margin-top: 30px; float: left;}
        .customer .section5 > .title{font-size: 34px; line-height:46px; font-family: 's-core-dream-extrabold'; color: #5a53bf; }
        .customer .section5 .step{width: 100%; float: left; border-bottom: #dad9da solid 1px; margin-top: 70px; padding: 0 30px;}
            .customer .section5 .step .img{width: 55%; float: left;}
                .customer .section5 .step .img img{width: 100%;}
            .customer .section5 .step .text{width:45%; float: left; padding-left: 64px; padding-top: 170px;}
                .customer .section5 .step .text .step_text{font-size: 24px; color:#6f6f6f; font-weight: bold; line-height: 35px;}
                .customer .section5 .step .text .title{font-size: 30px; line-height: 35px; color: #5d4fc5; font-weight: bold; margin-bottom: 20px;}
                .customer .section5 .step .text .desc{font-size:15px; line-height:24px; color: #8c87d2; font-family: 's-core-dream-medium';}
    .customer .section6{width: 100%; margin-top: 75px; float: left; margin-bottom: 28px;}
        .customer .section6 .img{width: 40%; float: left; text-align: center;}
            .customer .section6 .img img{width: 60%;}
        .customer .section6 .text{width: 60%; float: left; margin-top: 50px;}
            .customer .section6 .text .title{font-size: 34px; line-height: 46px; color: #5a53bf; font-weight: bold; margin-bottom: 10px;}
            .customer .section6 .text .desc{font-size: 12px; line-height: 20px; color: #8c87d2; font-family: 's-core-dream-medium';}

.store_body{background: #fff;}
    .store .section1{width: 100%; float: left; margin-bottom: 58px;}
        .store .section1 > div{width: 50%; float: left;}
        .store .section1 > .text{padding-left: 2%;}
        .store .section1 > .image{text-align: right;}
            .store .section1 .text .first{font-size: 48px; line-height: 63px; color: #5a53bf; font-weight: 200; font-family: 's-core-dream-extralight';}
            .store .section1 .text .sub{margin-top: 30px; line-height: 25px; font-size: 15px; color: #7d7f82; font-family: 's-core-dream-regular';}
        .store .section1 img{margin-top: 10px; width: 60%;}
    .store .section2{width: 100%; float: left; margin-bottom: 30px;}
        .store .section2 .image{width: 30%; float: left;}
            .store .section2 .image img{width: 70%;}
        .store .section2 .text{width: 70%; float: left;}
            .store .section2 .text .title{font-weight: bold; color: #5a53bf; font-size: 34px; line-height: 50px; margin-top: 35px;}
            .store .section2 .text .desc{font-size: 14px; line-height: 25px; margin-top:20px; color: #8c87d2;}
    .store .line1{width: 100%; height: 1px; background: #dad9da; float: left; margin-bottom: 45px;}
    .store .section3{width: 100%; float: left; margin-bottom: 30px;}
        .store .section3 .text{width: 65%; float: left;}
            .store .section3 .text .title{font-weight: bold; color: #5a53bf; font-size: 34px; line-height: 50px; margin-top: 45px;}
            .store .section3 .text .desc{font-size: 14px; line-height: 25px; margin-top:20px; color: #8c87d2;}
            .store .section3 .text .line{width: 100%; height: 1px; background: #dad9da; float: left; margin-top: 64px;}
        .store .section3 .image{width: 35%; float: left; text-align: right;}
            .store .section3 .image img{width: 90%;}
    .store .section4{width: 100%; float: left; margin-bottom: 34px;}
        .store .section4 .image{width: 40%; float: left;}
            .store .section4 .image img{width: 90%;}
        .store .section4 .text{width: 60%; float: left;}
            .store .section4 .text .title{font-weight: bold; color: #5a53bf; font-size: 34px; line-height: 50px; margin-top: 45px;}
            .store .section4 .text .desc{font-size: 14px; line-height: 25px; margin-top:20px; color: #8c87d2;}
    .store .section5{width: 100%; margin-top: 30px; float: left; margin-bottom: 51px;}
        .store .section5 > .title{font-size: 34px; line-height:46px; font-family: 's-core-dream-extrabold'; color: #5a53bf; }
        .store .section5 .step{width: 100%; float: left; border-bottom: #dad9da solid 1px; margin-top: 70px; padding: 0 30px;}
            .store .section5 .step .img{width: 55%; float: left;}
                .store .section5 .step .img img{width: 100%;}
            .store .section5 .step .text{width:45%; float: left; padding-left: 64px; padding-top: 170px;}
                .store .section5 .step .text .step_text{font-size: 24px; color:#6f6f6f; font-weight: bold; line-height: 35px; margin-bottom: 10px;}
                .store .section5 .step .text .title{font-size: 30px; line-height: 38px; color: #5d4fc5; font-weight: bold; margin-bottom: 20px;}
                .store .section5 .step .text .desc{font-size:15px; line-height:24px; color: #8c87d2; font-family: 's-core-dream-medium';}
.store2{width: 100%; background: #fafafa; padding-top: 56px; padding-bottom: 40px; float: left;}
    .store2 .section6{width: 100%; float: left}
        .store2 .section6 .img{width: 40%; float: left; text-align: center;}
            .store2 .section6 .img img{width: 60%;}
        .store2 .section6 .text{width: 60%; float: left; margin-top: 50px;}
            .store2 .section6 .text .title{font-size: 34px; line-height: 46px; color: #5a53bf; font-weight: bold; margin-bottom: 10px;}
            .store2 .section6 .text .desc{font-size: 12px; line-height: 20px; color: #8c87d2; font-family: 's-core-dream-medium';}

.about{width: 100%; float: left;}
    .about .section1{margin-top: 90px; width: 100%; float: left; text-align: center; margin-bottom: 90px;}
        .about .section1 img{width: 90%;}
        .about .section1 .line{width: 100%; height: 1px; background: #dad9da; float: left; margin-top: 40px;}
    .about .section2{width: 100%; float: left; padding: 0 5%;}
        .about .section2 .title{font-size: 34px; color: #5a53bf; line-height: 46px; font-family: 's-core_dream6_bold'; font-weight: bold;}
        .about .section2 .step{width: 100%; float: left; text-align: center;}
        .about .section2 .step2{text-align: right;}
            .about .section2 .step img{width:90%; margin-bottom: 10px; margin-top: 100px;}
            .about .section2 .step .line{width: 60%; height: 1px; background: #dad9da; margin-top: 40px; margin: 0 20%; float: left;}
            .about .section2 .step2 img{width: 95%;}
    .about .line2{width: 100%; height: 1px; background: #dad9da; float: left; margin-bottom: 65px; margin-top: 70px;}
    .about .section3{width: 100%; float: left; text-align: center;}
        .about .section3 img{width:90%; float: left; margin-bottom: 60px;}

.goodstore{width: 100%; float: left; }
    .goodstore .section1{width: 100%; float: left; margin-bottom: 58px; margin-top: 0px;}
        .goodstore .section1 > div{width: 50%; float: left;}
        .goodstore .section1 > .text{padding-left: 2%;}
            .goodstore .section1 .text .first{font-size: 48px; line-height: 63px; color: #5a53bf; font-weight: 200; font-family: 's-core-dream-extralight';}
            .goodstore .text .sub{margin-top: 30px; line-height: 25px; font-size: 15px; color: #7d7f82; font-family: 's-core-dream-regular';}
        .goodstore .section1 > .image{text-align: right;}
            .goodstore .section1 > .image img{width: 100%;}
    .goodstore .section2{width: 100%; float: left;}
        .goodstore .section2 > div{width: 50%; float: left; margin-top: 50px; padding: 22px;}
            .goodstore .section2 > div .img{width: 100%; float: left;}
                .goodstore .section2 > div .img img{height: 45px;}
            .goodstore .section2 > div .text{width: 100%; float: left;}
                .goodstore .section2 > div .text p:nth-child(1){width: 35%; float: left; line-height: 45.87px; color: #5a53bf; font-size: 33px; font-family: 's-core_dream6_bold';}
                .goodstore .section2 > div .text p:nth-child(2){width: 65%; float: left; font-family: 's-core_dream5_medium'; font-size: 12px; line-height: 23px; color: #8c87d2; font-weight: bold;}
        .goodstore .section2 .clear{clear: both; width: 100%; margin-top:0; padding: 0;}
    .goodstore .section3{width: 100%; float: left; margin-top: 100px; background: #ffe4e5; position: relative; min-width: 1000px;}
        .goodstore .section3 .wrap{position: relative; padding-top: 80px;}
        .goodstore .section3 .character{position: absolute; top: 0%; right:0; width: 45%; transform: translateY(-10%);}
        .goodstore .section3 .title{font-size: 30px; line-height: 44px; color: #5a53bf; margin-bottom: 30px; font-family: 's-core_dream4_regular';;}
        .goodstore .section3 .desc{color:#7d7f82; font-size: 16px; line-height: 24px; margin-bottom: 40px;}
        .goodstore .section3 .info_img{width: 100%;}
        .goodstore .section3 .button{width: 45%; margin-top: 90px; transform: translateY(50%); margin: 0 27.5%;}
    .goodstore .section5{width: 100%; float: left; padding-top: 100px; font-family: 's-core_dream4_regular';}
        .goodstore .section5 > div{width: 50%; float: left;}
        .goodstore .section5 .img img{width: 100%; margin-top: 10px;}
        .goodstore .section5 .text .title{font-size: 30px; line-height: 44px; color: #5a53bf;}
        .goodstore .section5 .text .desc{font-size:16px; line-height: 24px; color: #7d7f82; margin-top: 30px;}
        .goodstore .section5 .text img{margin-top: 40px; width: 45%; margin-bottom: 100px;}

    




@media(max-width:800px){
    .pc{display: none;}
    .mobile{display: inline;}
    
    .container, .wrap{padding: 0 32px;}
    .customer{margin-top: 0;}
    .customer .section1 .text{width: 90%; padding-left: 0%; margin-left: 5%;}
        .customer .section1 .text .first{font-size: 7vw; line-height: 10vw;}
        .customer .section1 .text .sub{font-size:2.8vw; line-height: 4vw; margin-top: 4vw;}
    .customer .section1 > .image{width: 100%; text-align: center;}
        .customer .section1 > .image img{width: 50%; margin-top: 5vw;}

    .customer .section2{padding: 0; margin-top: 9vw;}
        .customer .section2 .text{width: 90%; margin: 0 5%;}
        .customer .section2 .text .first{font-size:4.7vw; line-height: 7.1vw;}
        .customer .section2 .text .sub{font-size:3vw; line-height: 4vw; margin-top: 4vw;}
        .customer .section2 > .image{width: 100%; text-align: center;}
            .customer .section2 > .image img{width: 50%; margin-top: 5vw;}
        .customer .section5 .step .text .title{margin-bottom: 10px;}
        .customer .section5 .step{border-bottom: 0px; text-align: center;}
        .customer .section5 .step .img{width: 100%;}
        .customer .section5 .step .text{width: 100%; padding-top: 30px; padding-left: 0;}
        
}