@charset "UTF-8";

/*
File	: home.css
*/


/*
.main-home-title {margin: 24px 0px 22px 6px; line-height: 1.22;letter-spacing: -1px;color: #000;}
*/

.main-home {width: 100%;height: 1080px;position: relative;margin: auto;}
.main-home-contents {position: absolute;height: 100%;top: 180px; buttom: 0; text-align: left;margin: 0 auto; left: 0px; right: 0px;}

.main-home-title {font-weight: bold;font-stretch: normal;font-style: bold;color: #000;}
.main-home-title .pf {font-family: Pretendard;font-size: 18px;line-height: 20px;letter-spacing: 0;}
/* .main-home-title .company {margin-top: 20px; font-size: 4.5rem;}*/
.main-home-title .solution {margin: 22px 0px 25px 0px;}
.main-home-title .solution span {
    font-family: Pretendard;
    font-size: 48px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
}

.main-home-contents .line-rectangle {width: 100%;height: 1px;background-color: #f2f2f2;}
.main-home-info {margin: 28px 0px 0px 0px;}
.main-home-info span {
    font-family: Pretendard;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #000;    
}

.back-logo {position: absolute;left:-8px; top:380px;}
.back-logo span {
    font-family: VisbyCF;
    font-size: 120px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    line-height: 0.99;
    letter-spacing: normal;
    color: #f2f2f2;    
}

.back-arrow img.Fill-1 {
    position: absolute; top:510px;
}
.home-img {
    position: absolute;top:430px;width: 100%;
}
.home-img img.home-picto {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 489.7px;
    height: 388px;
    object-fit: contain;
}

.main-value{
    position: relative;
    width: 100%;
    height: 280px;
}
.main-value br.none {
    display:none;
}
.main-value .main-value-title {position: relative;top:20px;}
.main-value .main-value-title span {
    font-size: 56px;font-family: VisbyCF;
    font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: -1px;color: #000;
}
.main-value .main-value-info {position: relative;top:56px; width:130px}
.main-value .main-value-info span {
    font-size: 14px;
    font-family: VisbyCF;
    font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000;
}

.main-value .main-value-contents {position: absolute;left:520px; top:166px;}
.main-value .main-value-contents span {
    font-size: 14px;
    font-family: Pretendard;
    font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: -1px;color: #000;
}

.main-product {
    position: relative;
    width: 100%;
    height: 800px;
}
.main-product .space {
    padding: 20px;
}
.main-product .main-value-product {position: relative;top:60px;}
.main-product .main-value-product .title {
    font-family: VisbyCF;
    font-size: 56px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    color: #000;
}
.main-product .contents_value {
    position: relative;
    top:60px;
}
.main-product .contents_value .slidecontent {
    width: 381px;
    height: 576px;    
    display: block;
    margin: 0 auto;
}

/*
.main-product .contents_value .slidecontent .rectangle01::before {position: absolute;width: 100%; height:30px; background: #0080ff;}
.main-product .contents_value .slidecontent .box01 {position: absolute;width: 800px; height:30px; background: #999aff;transition: all 0.5s ease;opacity: 0}
#f0f0f9
*/
.main-product .contents_value .slidecontent .box:before {position: absolute;width: 100%; height:50px;transition: all 0.5s ease;opacity: 1}
.main-product .contents_value .slidecontent .box {position: absolute;width: 381px; height:576px;transition: all 0.5s ease;opacity: 1}
.main-product .contents_value .slidecontent .box.box01{background: #f0f0f9;transition: all 0.5s ease;opacity: 1}
.main-product .contents_value .slidecontent .box.box02{background: #E4EAF9;transition: all 0.5s ease;opacity: 1}
.main-product .contents_value .slidecontent .box.box03{background: #f0f0f9;transition: all 0.5s ease;opacity: 1}
.main-product .contents_value .slidecontent .box.box04{background: #E4EAF9;transition: all 0.5s ease;opacity: 1}
.main-product .contents_value .slidecontent .box.box05{background: #f0f0f9;transition: all 0.5s ease;opacity: 1}
.main-product .contents_value .slidecontent .box.box06{background: #E4EAF9;transition: all 0.5s ease;opacity: 1}
.main-product .contents_value .slidecontent .box.box07{background: #f0f0f9;transition: all 0.5s ease;opacity: 1}
.main-product .contents_value .slidecontent .box.box08{background: #E4EAF9;transition: all 0.5s ease;opacity: 1}

.main-product .contents_value .slidecontent .value-info {position: absolute;top: 415px;left: 34px;transition: all 1s ease;opacity: 1}


.middle_line {
    position: absolute;
    margin : 36px 0 0 34px;
    width: 80px;
    height: 2px;
    background-color: #000;
}
.product_title {
    position: absolute;
    margin : 36px 0 0 34px; 
}

.product_title span {
    font-family: VisbyCF;
    font-size: 24px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.17;
    letter-spacing: normal;
    color: #000;
    transition: all 1s ease;opacity: 1
}
.value-info {
    margin : 20px 0 20px 0;
}
.value-info span {
    font-family: Pretendard;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    color: #000;
    transition: all 1s ease;opacity: 1
}



.main-product .contents_value .slidecontent .slide0{position: absolute;width: 100%; height:50px;}
.main-product .contents_value .slidecontent img {transition: all 1s ease; opacity: 1;}
/*
.main-product .contents_value .rectangle .rectangle01{position: absolute;width: 381px; height:576px; background: #0080ff; opacity: 0}
*/
.main-product .contents_value .slidecontent .slide1{position: absolute;width: 381px; height:576px; transition: all 1s ease;opacity: 1;}
.main-product .contents_value .slidecontent .slide2{position: absolute;width: 381px; height:576px; transition: all 1s ease;opacity: 1;}
.main-product .contents_value .slidecontent .slide3{position: absolute;width: 381px; height:576px; transition: all 1s ease;opacity: 1;}
.main-product .contents_value .slidecontent .slide4{position: absolute;width: 381px; height:576px; transition: all 1s ease;opacity: 1;}
.main-product .contents_value .slidecontent .slide5{position: absolute;width: 381px; height:576px; transition: all 1s ease;opacity: 1;}
.main-product .contents_value .slidecontent .slide6{position: absolute;width: 381px; height:576px; transition: all 1s ease;opacity: 1;}
.main-product .contents_value .slidecontent .slide7{position: absolute;width: 381px; height:576px; transition: all 1s ease;opacity: 1;}
.main-product .contents_value .slidecontent .slide8{position: absolute;width: 381px; height:576px; transition: all 1s ease;opacity: 1;}

.main-product .contents_value .slidecontent .picto {margin: 185px 0 0 100px;transition: all 1s ease;opacity: 1}

.button-contain {
    height: 100%;
    margin: 180px 0 0 34px;
}
.button { 
    position: absolute;
    width: 250px;
    height: 59px;    
    padding: 16px 0px 0px 27px;
    border: solid 2px #000;
    background-color: #fff;
    display: block;
    cursor:pointer;
    z-index:1;
    transition:all ease 1s 0s;
}
.viewbutton {
    transition:all 1s;
    top: 10px;
    display: block;
}

.viewbutton_comingsoon {
    transition:all 1s;
    display: none;
}
.button:hover {    
    background-color: #000;
}
.button:hover .viewbutton {
    display: none;
}
.button:hover .viewbutton_comingsoon {
    display: block;
}

.viewbutton span {
    margin: 0 78px 0 0;
    font-family: VisbyCF;
    font-size: 18px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.11;
    letter-spacing: normal;
    color: #000;
}
.viewbutton_comingsoon span {
    margin: 0 78px 0 0;
    font-family: VisbyCF;
    font-size: 18px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.11;
    letter-spacing: normal;
    color: #fff;
}

.viewbutton img.combined-shape {
    position: absolute;
    width: 13px;
    height: 14px;
    margin: 6px 0 0 -7px;
    object-fit: contain;
}

.viewbutton_comingsoon img.combined-shape {
    position: absolute;
    width: 13px;
    height: 14px;
    margin: 6px 0 0 -7px;
    transform: rotate(90deg);
    object-fit: contain;
}

.swiper-container{
    height: 680px;
    overflow: hidden;
    z-index: 0;
}
.swiper-wrapper{
    /*display: inline-flex;*/
}
.swiper-slide{
    text-align: left;
    font-size: 18px;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 8px;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 25px;
}
.swiper-pagination-bullet-active {
    background: #f70404;
}
@media (max-width: 1200px) {
    .main-home {width: 100%;height: 768px;position: relative;margin: auto;}
    .main-home-contents {position: absolute;top: 129px; buttom: 0; text-align: left;margin: 0 30px 0 30px}
    /*.main-home-contents .line-rectangle {width: 100px;}*/
    .main-home br.none {
        display:none;
    }
    .main-value br.none {
        display:none;
    }
    
    .main-home-title .pf {font-family: Pretendard;font-size: 16px;line-height: normal;letter-spacing: normal;}

    .main-home-title .solution {margin: 22px 0px 30px 0px;}
    .main-home-title .solution span {
        font-size: 4.0vh;
        line-height: 1.25;
        letter-spacing: -0.44px;
    }

    .main-home-title .solution .next {
        display: inline-block;
        margin: 8px 0 0 0;
        color: #d8d8d8;
    }
    .main-home-info {margin: 28px 0px 0px 0px;}
    .main-home-info span {font-size: 14px;}
    
    .back-logo {position: absolute;left:26px; top:315px;}
    .back-logo span {font-size: 86px;}

    .back-arrow img.Fill-1 {display: none;}
    .home-img {position: absolute;top:320px;width: 100%;}
    .home-img img.home-picto {width: 315px;height: 250px;}
    
    .main-value {height: 280px;padding: 0 30px 0 30px;}

    .main-value .main-value-title {position: relative;top:20px;}
    .main-value .main-value-title span {font-size: 42px;}
    .main-value .main-value-info {position: relative;top:56px; width:130px}
    .main-value .main-value-info span {font-size: 16px;}
    
    .main-value .main-value-contents {position: absolute;right:30px; left:auto; top:140px;}
    .main-value .main-value-contents span {font-size: 16px;}
    
    .main-product {position: relative;width: 100%;height: 100%;}
    .main-product .space {padding: 20px;}
    .main-product .main-value-product {position: relative;top:60px;padding: 0 0 0 0;}
    .main-product .main-value-product .title {font-size: 42px;padding: 0 30px 0 30px;}
    .main-product .contents_value {top:60px;}

    .main-product .contents_value .slidecontent_mobile {width: 414px;height: 825px;display: block;margin: 0 auto;}

    .main-product .contents_value .slidecontent_mobile .value-info {position: absolute;top: 385px;left: 30px;transition: all 1s ease;opacity: 1}
    
    .middle_line {margin : 55px 0 0 30px;width: 80px;background-color: #fff;}
    .product_title {position: absolute; margin : 26px 0 0 30px;}
    
    .product_title span {font-size: 18px;line-height: 1.43;color: #fff}
    .value-info {margin : 20px 0 20px 0;}
    .value-info span {font-size: 16px;line-height: 1.5;color: #fff}
    .main-product .contents_value .slidecontent {display: none;}
    .main-product .contents_value .slidecontent_mobile .slide0{position: absolute;width: 100%; height:50px;}    
    .main-product .contents_value .slidecontent_mobile .picto {position: relative;margin: 145px 0 0 115px;transition: all 1s ease;opacity: 1}
    
    .main-product .contents_value .slidecontent_mobile .box:before {position: absolute;width: 100%; height:50px;transition: all 0.5s ease;opacity: 1}
    .main-product .contents_value .slidecontent_mobile .box {position: absolute;width: 100%; height:576px;background: #7677f9;transition: all 0.5s ease;opacity: 1}
    
    .button-contain {
        margin: 225px 56px 60px 56px;
    }
    
    .button {
        width: 300px;
        height: 50px;    
        padding: 10px 17px 14px 16px;
        border: solid 2px #000;
        background-color: #fff;
        display: block;
        cursor:pointer;
        z-index:1;
        transition:all ease 0.5s 0s;
    }
    
    .button:hover .viewbutton {
        display: none;
    }
    .button:hover .viewbutton_comingsoon {
        display: block;
    }
    
    .viewbutton span {
        margin: 0 63px 0 0;
        font-size: 18px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #000;
    }
    .viewbutton_comingsoon span {
        margin: 0 63px 0 0;
        font-family: VisbyCF;
        font-size: 18px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #fff;
    }
    
    .viewbutton img.combined-shape {
        position: absolute;
        width: 13px;
        height: 14px;
        margin: 6px 0 0 -7px;
        object-fit: contain;
        right: 25px;
    }
    
    .viewbutton_comingsoon img.combined-shape {
        position: absolute;
        width: 13px;
        height: 14px;
        margin: 6px 0 0 -7px;
        transform: rotate(90deg);
        object-fit: contain;
        right: 25px;
    }
}
@media (max-width: 1160px) {
    .main-home {width: 100%;height: 768px;position: relative;margin: auto;}
    .main-home-contents {position: absolute;top: 129px; buttom: 0; text-align: left;margin: 0 30px 0 30px}
    /*.main-home-contents .line-rectangle {width: 100px;}*/
    .main-home br.none {
        display:none;
    }
    .main-value br.none {
        display:none;
    }
    
    .main-home-title .pf {font-family: Pretendard;font-size: 16px;line-height: normal;letter-spacing: normal;}

    .main-home-title .solution {margin: 22px 0px 30px 0px;}
    .main-home-title .solution span {
        font-size: 3.1vw;
        line-height: 1.25;
        letter-spacing: -0.44px;
    }

    .main-home-title .solution .next {
        display: inline-block;
        margin: 8px 0 0 0;
        color: #d8d8d8;
    }
    .main-home-info {margin: 28px 0px 0px 0px;}
    .main-home-info span {font-size: 14px;}
    
    .back-logo {position: absolute;left:26px; top:305px;}
    .back-logo span {font-size: 86px;}

    .back-arrow img.Fill-1 {display: none;}
    .home-img {position: absolute;top:320px;width: 100%;}
    .home-img img.home-picto {width: 315px;height: 250px;}
    
    .main-value {height: 280px;padding: 0 30px 0 30px;}

    .main-value .main-value-title {position: relative;top:20px;}
    .main-value .main-value-title span {font-size: 42px;}
    .main-value .main-value-info {position: relative;top:56px; width:130px}
    .main-value .main-value-info span {font-size: 16px;}
    
    .main-value .main-value-contents {position: absolute;right:30px; left:auto; top:140px;}
    .main-value .main-value-contents span {font-size: 16px;}
    
    .main-product {position: relative;width: 100%;height: 100%;}
    .main-product .space {padding: 20px;}
    .main-product .main-value-product {position: relative;top:60px;padding: 0 0 0 0;}
    .main-product .main-value-product .title {font-size: 42px;padding: 0 30px 0 30px;}
    .main-product .contents_value {top:60px;}

    .main-product .contents_value .slidecontent_mobile {width: 414px;height: 825px;display: block;margin: 0 auto;}

    .main-product .contents_value .slidecontent_mobile .value-info {position: absolute;top: 385px;left: 30px;transition: all 1s ease;opacity: 1}
    
    .middle_line {margin : 55px 0 0 30px;width: 80px;background-color: #fff;}
    .product_title {position: absolute; margin : 26px 0 0 30px;}
    
    .product_title span {font-size: 18px;line-height: 1.43;color: #fff}
    .value-info {margin : 20px 0 20px 0;}
    .value-info span {font-size: 16px;line-height: 1.5;color: #fff}
    .main-product .contents_value .slidecontent {display: none;}
    .main-product .contents_value .slidecontent_mobile .slide0{position: absolute;width: 100%; height:50px;}    
    .main-product .contents_value .slidecontent_mobile .picto {position: relative;margin: 145px 0 0 115px;transition: all 1s ease;opacity: 1}
    
    .main-product .contents_value .slidecontent_mobile .box:before {position: absolute;width: 100%; height:50px;transition: all 0.5s ease;opacity: 1}
    .main-product .contents_value .slidecontent_mobile .box {position: absolute;width: 100%; height:576px;background: #7677f9;transition: all 0.5s ease;opacity: 1}
    
    .button-contain {
        margin: 225px 56px 60px 56px;
    }
    
    .button {
        width: 300px;
        height: 50px;    
        padding: 10px 17px 14px 16px;
        border: solid 2px #000;
        background-color: #fff;
        display: block;
        cursor:pointer;
        z-index:1;
        transition:all ease 0.5s 0s;
    }
    
    .button:hover .viewbutton {
        display: none;
    }
    .button:hover .viewbutton_comingsoon {
        display: block;
    }
    
    .viewbutton span {
        margin: 0 63px 0 0;
        font-size: 18px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #000;
    }
    .viewbutton_comingsoon span {
        margin: 0 63px 0 0;
        font-family: VisbyCF;
        font-size: 18px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #fff;
    }
    
    .viewbutton img.combined-shape {
        position: absolute;
        width: 13px;
        height: 14px;
        margin: 6px 0 0 -7px;
        object-fit: contain;
        right: 25px;
    }
    
    .viewbutton_comingsoon img.combined-shape {
        position: absolute;
        width: 13px;
        height: 14px;
        margin: 6px 0 0 -7px;
        transform: rotate(90deg);
        object-fit: contain;
        right: 25px;
    }
}

@media (max-width: 640px) {
    .main-home {width: 100%;height: 120vh;position: relative;margin: auto;}
    .main-home br.none {
        display:block;
    }
    .main-home-contents {position: absolute;height: 100%;top: 129px; buttom: 0; text-align: left;margin: 0 30px 0 30px}
    .main-home-contents .line-rectangle {width: 100px;}
    
    .main-home-title .pf {font-family: Pretendard;font-size: 16px;line-height: normal;letter-spacing: normal;}

    .main-home-title .solution {margin: 22px 0px 49px 0px;}
    .main-home-title .solution span {
        font-size: 32px;
        line-height: 1.25;
        letter-spacing: -0.44px;
    }

    .main-home-title .solution .next {
        display: inline-block;
        margin: 8px 0 0 0;
        color: #d8d8d8;
    }
    .main-home-info {margin: 28px 0px 0px 0px;}
    .main-home-info span {font-size: 16px;}
    
    .back-logo {position: absolute;left:26px; top:440px;}
    .back-logo span {font-size: 86px;}

    .back-arrow img.Fill-1 {display: none;}
    .home-img {position: absolute;top:562px;width: 100%;}
    .home-img img.home-picto {width: 315px;height: 250px;}
    
    .main-value {height: 400px;padding: 0 30px 0 30px;}
    .main-value br.none {
        display:block;
    }
    .main-value .main-value-title {position: relative;top:20px;}
    .main-value .main-value-title span {font-size: 42px;}
    .main-value .main-value-info {position: relative;top:56px; width:130px}
    .main-value .main-value-info span {font-size: 16px;}
    
    .main-value .main-value-contents {position: absolute;right:30px; left:auto; top:305px;}
    .main-value .main-value-contents span {font-size: 16px;}
    
    .main-product {position: relative;width: 100%;height: 100%;}
    .main-product .space {padding: 20px;}
    .main-product .main-value-product {position: relative;top:60px;padding: 0 0 0 0;}
    .main-product .main-value-product .title {font-size: 42px;padding: 0 30px 0 30px;}
    .main-product .contents_value {top:60px;}

    .main-product .contents_value .slidecontent_mobile {width: 100%;height: 825px;display: block;margin: 0 auto;}

    .main-product .contents_value .slidecontent_mobile .value-info {position: absolute;top: 385px;left: 30px;transition: all 1s ease;opacity: 1}
    
    .middle_line {margin : 55px 0 0 30px;width: 80px;background-color: #fff;}
    .product_title {position: absolute; margin : 26px 0 0 30px;}
    
    .product_title span {font-size: 18px;line-height: 1.43;color: #fff}
    .value-info {margin : 20px 0 20px 0;}
    .value-info span {font-size: 16px;line-height: 1.5;color: #fff}
    .main-product .contents_value .slidecontent {display: none;}
    .main-product .contents_value .slidecontent_mobile .slide0{position: absolute;width: 100%; height:50px;}    
    .main-product .contents_value .slidecontent_mobile .picto {position: relative;margin: 145px 0 0 115px;transition: all 1s ease;opacity: 1}
    
    .main-product .contents_value .slidecontent_mobile .box:before {position: absolute;width: 100%; height:50px;transition: all 0.5s ease;opacity: 1}
    .main-product .contents_value .slidecontent_mobile .box {position: absolute;width: 100%; height:576px;background: #7677f9;transition: all 0.5s ease;opacity: 1}
    
    .button-contain {
        margin: 225px 56px 60px 56px;
    }
    
    .button {
        width: 300px;
        height: 50px;    
        padding: 10px 17px 14px 16px;
        border: solid 2px #000;
        background-color: #fff;
        display: block;
        cursor:pointer;
        z-index:1;
        transition:all ease 0.5s 0s;
    }
    
    .button:hover .viewbutton {
        display: none;
    }
    .button:hover .viewbutton_comingsoon {
        display: block;
    }
    
    .viewbutton span {
        margin: 0 63px 0 0;
        font-size: 18px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #000;
    }
    .viewbutton_comingsoon span {
        margin: 0 63px 0 0;
        font-family: VisbyCF;
        font-size: 18px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #fff;
    }
    
    .viewbutton img.combined-shape {
        position: absolute;
        width: 13px;
        height: 14px;
        margin: 6px 0 0 -7px;
        object-fit: contain;
        right: 25px;
    }
    
    .viewbutton_comingsoon img.combined-shape {
        position: absolute;
        width: 13px;
        height: 14px;
        margin: 6px 0 0 -7px;
        transform: rotate(90deg);
        object-fit: contain;
        right: 25px;
    }
}

@media (max-width: 408px) {
    .main-home {width: 100%;height: 130vh;position: relative;margin: auto;}
    .main-home br.none {
        display:block;
    }
    .main-home-contents {position: absolute;height: 100%;top: 129px; buttom: 0; text-align: left;margin: 0 30px 0 30px}
    .main-home-contents .line-rectangle {width: 100px;}
    
    .main-home-title .pf {font-family: Pretendard;font-size: 16px;line-height: normal;letter-spacing: normal;}

    .main-home-title .solution {margin: 22px 0px 49px 0px;}
    .main-home-title .solution span {
        font-size: 3.4vh;
        line-height: 1.25;
        letter-spacing: -0.44px;
    }

    .main-home-title .solution .next {
        display: inline-block;
        margin: 8px 0 0 0;
        color: #d8d8d8;
    }
    .main-home-info {margin: 28px 0px 0px 0px;}
    .main-home-info span {font-size: 16px;}
    
    .back-logo {position: absolute;left:26px; top:390px;}
    .back-logo span {font-size: 86px;}

    .back-arrow img.Fill-1 {display: none;}
    .home-img {position: absolute;top:460px;width: 100%;}
    .home-img img.home-picto {width: 315px;height: 250px;}
    
    .main-value {height: 400px;padding: 0 30px 0 30px;}
    .main-value br.none {
        display:block;
    }
    .main-value .main-value-title {position: relative;top:20px;}
    .main-value .main-value-title span {font-size: 42px;}
    .main-value .main-value-info {position: relative;top:56px; width:130px}
    .main-value .main-value-info span {font-size: 16px;}
    
    .main-value .main-value-contents {position: absolute;right:30px; left:auto; top:305px;}
    .main-value .main-value-contents span {font-size: 16px;}
    
    .main-product {position: relative;width: 100%;height: 100%;}
    .main-product .space {padding: 20px;}
    .main-product .main-value-product {position: relative;top:60px;padding: 0 0 0 0;}
    .main-product .main-value-product .title {font-size: 42px;padding: 0 30px 0 30px;}
    .main-product .contents_value {top:60px;}

    .main-product .contents_value .slidecontent_mobile {width: 100%;height: 825px;display: block;margin: 0 auto;}

    .main-product .contents_value .slidecontent_mobile .value-info {position: absolute;top: 385px;left: 30px;transition: all 1s ease;opacity: 1}
    
    .middle_line {margin : 55px 0 0 30px;width: 80px;background-color: #fff;}
    .product_title {position: absolute; margin : 26px 0 0 30px;}
    
    .product_title span {font-size: 18px;line-height: 1.43;color: #fff}
    .value-info {margin : 20px 0 20px 0;}
    .value-info span {font-size: 16px;line-height: 1.5;color: #fff}
    .main-product .contents_value .slidecontent {display: none;}
    .main-product .contents_value .slidecontent_mobile .slide0{position: absolute;width: 100%; height:50px;}    
    .main-product .contents_value .slidecontent_mobile .picto {position: relative;margin: 145px 0 0 115px;transition: all 1s ease;opacity: 1}
    
    .main-product .contents_value .slidecontent_mobile .box:before {position: absolute;width: 100%; height:50px;transition: all 0.5s ease;opacity: 1}
    .main-product .contents_value .slidecontent_mobile .box {position: absolute;width: 100%; height:576px;background: #7677f9;transition: all 0.5s ease;opacity: 1}
    
    .button-contain {
        margin: 225px 56px 60px 56px;
    }
    
    .button {
        width: 300px;
        height: 50px;    
        padding: 10px 17px 14px 16px;
        border: solid 2px #000;
        background-color: #fff;
        display: block;
        cursor:pointer;
        z-index:1;
        transition:all ease 0.5s 0s;
    }
    
    .button:hover .viewbutton {
        display: none;
    }
    .button:hover .viewbutton_comingsoon {
        display: block;
    }
    
    .viewbutton span {
        margin: 0 63px 0 0;
        font-size: 18px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #000;
    }
    .viewbutton_comingsoon span {
        margin: 0 63px 0 0;
        font-family: VisbyCF;
        font-size: 18px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #fff;
    }
    
    .viewbutton img.combined-shape {
        position: absolute;
        width: 13px;
        height: 14px;
        margin: 6px 0 0 -7px;
        object-fit: contain;
        right: 25px;
    }
    
    .viewbutton_comingsoon img.combined-shape {
        position: absolute;
        width: 13px;
        height: 14px;
        margin: 6px 0 0 -7px;
        transform: rotate(90deg);
        object-fit: contain;
        right: 25px;
    }
}