@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
*      
 * SUMMARY:
 * 1) MAIN animation
 * 2) MAIN CONTENTS
*/

/* **************************************** *
 * Main animation set
 * **************************************** */
[data-txt-motion]{}
[data-txt-motion="hidden"]{overflow:hidden;}
[data-txt-motion="hidden"] > *{display:block; opacity:0;}

.swiper-slide-active [data-txt-motion="hidden"] > *{animation:text_hidden_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="left"]{animation:text_left_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="right"]{animation:text_right_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="up"]{animation:text_up_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="down"]{animation:text_down_motion 1.6s ease 0.1s forwards;}

@keyframes text_hidden_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateY(0);}
}
@keyframes text_left_motion {
 from{opacity:0; transform:translateX(70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_right_motion {
 from{opacity:0; transform:translateX(-70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_up_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateX(0);}    
}
@keyframes text_down_motion {
 from{opacity:0; transform:translateY(-70rem);}
 to{opacity:1; transform:translateX(0);}
}

/* **************************************** *
 * Site custom
 * **************************************** */
 body:not(.fp-viewing-0) #header{background-color: rgba(240, 240, 240, 0.30); backdrop-filter: blur(10rem); }

.main h3{font-size: 48rem;}

/* main visual */
.main-visual{height:var(--height-full); position: relative;}
.main-visual-container,
.main-visual-wrapper,
.main-visual .swiper-slide{height:100% !important;}
.main-visual .swiper-slide::before{content:'';position:absolute;background-position:50% 50%;transition:all 1s ease;transform:scale(1);inset:0;background-repeat:no-repeat;background-size: cover;}
.main-visual .swiper-slide .wrap{width:100%;}
.main-visual__bg{position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual__bg i{display:block; height:100%; background-position:50% 50%; background-size: cover;}
.main-visual__btn{position:relative;width:30rem;height:30rem;cursor:pointer;display: flex;align-items: center;margin: 0 25rem;font-size: 16rem;color: #fff;font-weight: 600;}
.main-visual__btn::after{content:"";display:block;min-width: 30rem;height: 30rem;background:url(../img/common/arrow-basic_w.svg) no-repeat 50% 50%;background-size: 14rem;}
.main-visual__btn.button-prev{flex-direction: row-reverse;}
.main-visual__controls{position:absolute;bottom: 110rem;left:0;z-index:999;width:100%;}
.main-visual__controls > div{display:flex;align-items:center;justify-content: flex-start;}
.main-visual__count{display:flex; align-items:center; margin:0 50rem; font-size:17rem; color:#fff;}
.main-visual__count i{display:flex; align-items:center; position:relative;}
.main-visual__count i::after{content:""; display:block; width:3rem; height:3rem; margin:0 10rem; background:#fff;}
.main-visual__btn.button-next::after{transform:rotate(-90deg);}
.main-visual__btn.button-prev::after{transform: rotate(90deg);}

.main-visual .swiper-pagination{display:flex; gap:18rem;}
.main-visual .swiper-pagination-bullet{background: var(--f-01);}
.main-visual .swiper-pagination-bullet{opacity:0.4; width:22rem; height:22rem; border-radius: 50rem; background: transparent; border:2rem solid transparent; position: relative; box-sizing: border-box; }
.main-visual .swiper-pagination-bullet::before{content: ""; position: absolute; display: block; width: 6rem; height: 6rem; border-radius: 30rem; background-color: #fff; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.main-visual .swiper-pagination-bullet-active{opacity:1; border-color: #fff;}

.main-visual__text{position:absolute; top:29vh; width:100%;  color:#fff;}
.main-visual__text h2{overflow:hidden; line-height:1.1; font-weight:600; font-size:76rem; line-height: 130%;}  
.main-visual__text p{font-weight:700; font-size:16rem; font-family: var(--lang-en); color: var(--c-01); letter-spacing: 3.2rem; margin-bottom: 17rem;}
.main-visual__text .button-style{margin-top: 73rem;}

.main-visual__bar{position:absolute; bottom:0; z-index:50; width:100%; height:10rem; background:rgba(255,255,255,0.3);}
.main-visual__bar > i{position:absolute; width:0%; height:100%; background:var(--c-01);}
.main-visual .swiper-slide-active .main-visual__bar > i{width:100%; transition:all 5s ease;}

.main-visual__play{position:absolute; top:50%; left:0; z-index:99999; background:#fff; font-size:30rem; cursor:pointer;}
.main-visual__play:not(.on){opacity:0; visibility:hidden;}
.main-visual__play.on{opacity:1; visibility:visible;}

.main-visual a.scroll-down{position: absolute; right: 100rem; bottom: 80rem; z-index: 10;}
.main-visual a.scroll-down span{font-size: 11rem; text-align: center; margin-top: 12rem; color: #fff; font-weight: 500; font-family: var(--lang-en);}
.main-visual a.scroll-down .big-round{width: 90rem; height: 90rem; display: block; border-radius: 100%; background-color: transparent; border:1px solid rgba(255,255,255,0.6); box-sizing: border-box;}
.main-visual a.scroll-down .small-round{position: absolute; width: 11rem; height: 11rem; border-radius: 20rem; background-color: rgba(255,255,255,0.6); left: 50%; margin-left: -5.5rem; animation: scrolldown 1.4s infinite }

@keyframes scrolldown {
	from { 
		top: 12rem;
	}
	to {
		top: 68rem;
		opacity: 0;
	}
}


@media all and (max-width:1480px){
    .main-visual__text h2{font-size: 62rem;}
    .main-visual__bg i{background-position: 60% 10%;}

    .main-visual a.scroll-down{right: 50rem; bottom: 60rem;}
}

@media all and (max-width:1023px){
	.main-visual{min-height: 600rem;}
}

@media all and (max-width:860px){
    .main-visual__bg i{background-position: 70% 50%;}
    
}

@media all and (max-width:540px){
    .main-visual__text p{font-size: 14rem;}
    .main-visual__text h2{font-size: 30rem;}
    .main-visual__text .button-style{margin-top: 52rem;}
    .main-visual__controls{bottom: 60rem;}
    .main-visual a.scroll-down .big-round{width: 50rem; height: 50rem; margin: 0 auto;}
    .main-visual a.scroll-down{right: 20rem; bottom: 40rem;}
    .main-visual a.scroll-down span{font-size: 10rem;}
    .main-visual a.scroll-down .small-round{width: 6rem; height: 6rem; margin-left: -3rem; animation: scrolldown 1.8s infinite;}
    @keyframes scrolldown {
        from { 
            top: 6rem;
        }
        to {
            top:38rem;
            opacity: 0;
        }
    }
}
.keywordhBox{padding: 9.813rem 17.34rem 9.813rem 38rem; width: 364rem; border:5rem solid var(--c-02); box-sizing: border-box; position: relative; gap: 18rem; display: block; }
.keywordhBox i{display: block; width: 7rem; height: 50rem; background-color: var(--c-02); position: absolute; animation: blink 1.1s step-end infinite; left: 18rem; top: 50%; transform: translateY(-50%);}
.keywordhBox em{font-size: 48rem; font-weight: 700; display: block; white-space: nowrap; overflow: hidden; width: 335rem; height: 62rem; line-height: 130%; animation: typing 3s steps(8, end) infinite, blink-caret .3s step-end infinite;}
@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }

.main-about{/* padding: 150rem 0 198rem; */ position: relative;; background-color: #fff; overflow: hidden;}
.main-about__rotate{font-size: 210rem;font-family: var(--lang-en);font-weight: 700;color: rgba(37, 130, 37, 0.05);transform: rotate(-90deg);position: absolute;top: 420rem;left: -350px;}
.main-about__conts{display: flex; justify-content: flex-end; }
.main-about__text{width:67.709%;}
.main-about__text h3{font-weight: 400; color: var(--b-01);}
.main-about__text h3 span{display: block;}
.main-about__text h3 b{font-weight: 700;}
.main-about__text h3 i{opacity: 0; transition: all 1s;}
.main-about__text h3 i:nth-child(1){ transition-delay: .1s }
.main-about__text h3 i:nth-child(2){ transition-delay: .3s }
.main-about__text h3 i:nth-child(3){ transition-delay: .5s }
.main-about__text h3 i:nth-child(4){ transition-delay: .7s }
.main-about__text h3 i:nth-child(5){ transition-delay: .9s }
.main-about__text h3 i:nth-child(6){ transition-delay: 1.1s }
.main-about__text h3 i:nth-child(7){ transition-delay: 1.3s }
.main-about__text h3 i:nth-child(8){ transition-delay: 1.5s }
.main-about__text h3 i:nth-child(9){ transition-delay: 1.7s }
.main-about__text h3 i:nth-child(10){ transition-delay: 1.9s }
.main-about__text h3 i:nth-child(11){ transition-delay: 2.1s }
.main-about__text h3 i:nth-child(12){ transition-delay: 2.3s }
.main-about__text h3 i:nth-child(13){ transition-delay: 2.5s }
.main-about__text h3 i:nth-child(14){ transition-delay: 2.7s }
.main-about__text h3 i:nth-child(15){ transition-delay: 3s }
.main-about__text h3 i:nth-child(16){ transition-delay: 3.3s }
.main-about__text h3 i:nth-child(17){ transition-delay: 3.6s }
.main-about__text h3 i:nth-child(18){ transition-delay: 3.9s }
.main-about__text h3 i:nth-child(19){ transition-delay: 4.1s }
.active .main-about__text h3 i{opacity: 1;}

.main-about__text p{margin-top: 65rem;}
.main-about .keywordhBox{margin-top: 47rem;}
.main-about__tag{margin-top: 80rem;position: relative;}
.main-about__tag li{display: inline-flex; width: 214rem;  position: absolute; font-size: 18rem; color: var(--c-02); font-weight: 500; height: 214rem; border-radius: 100%; border:3rem solid #f0f0f0;box-sizing: border-box; justify-content: center; align-items: center;  background-color: #fff; transition: all 1.2s; transform: translateX(40rem); opacity: 0; }
.main-about__tag li:nth-child(1){position: relative;  transition-delay: .1s}
.main-about__tag li:nth-child(2){left: 12%;transition-delay: .3s}
.main-about__tag li:nth-child(3){left: 23%;transition-delay: .5s}
.main-about__tag li:nth-child(4){left: 35%;transition-delay: .6s}
.main-about__tag li:nth-child(5){left: 47%;transition-delay: .7s}
.main-about__tag li:nth-child(6){left: 60%;transition-delay: .7s}
.main-about__tag li:nth-child(7){left: 72%;transition-delay: .9s}
.main-about__tag li:nth-child(8){left: 83%;transition-delay: 1.1s;}


@media (max-width:1680px){
    .main h3{font-size: 44rem;}
    .main-about__tag li{width: 184rem; height: 184rem;}
}
@media all and (max-width:1480px){
    .main h3{font-size: 38rem;}
    .main-about{padding: 130rem 0 158rem;}
    .main-about__text{width: 75%;}
    .main-about__rotate{font-size: 180rem; top: 369rem; left: -320rem;}
    .keywordhBox{width: 335rem;}
    .keywordhBox em{font-size: 44rem; height: 56rem; width: 307rem;}
    .main-about__tag{margin-top: 90rem;}

}
@media (min-width:1024px){
    .active .main-about__tag li{opacity: 1; transform: none;}

}

@media all and (max-width:1023px){
    .main h3{font-size: 32rem;}
    .main-about{padding: 100rem 0;}
    .main-about__text h3 + h3{margin-top: 8rem;}
    .main-about .keywordhBox{margin-top: 28rem;}
    .keywordhBox{width: 265rem; padding: 7.813rem 17.34rem 7.813rem 31rem;}
    .keywordhBox em{font-size: 34rem; height: 42rem; width: 237rem;}
    .keywordhBox i{height: 36rem; left: 13rem;}
    .keywordhBox{width: 258rem;}
    .main-about__text p{margin-top: 25rem;}
    .main-about__rotate{font-size: 158rem; top: 349rem; left: -372rem; }
    .main-about__text{width: 82%;}
    .main-about__tag li{font-size: 16rem; width: 164rem; height: 164rem;}

    .main-about__tag li{opacity: 1; transform: none;}
}

@media all and (max-width:860px){
    .main h3{font-size: 28rem;}
    .main-about{padding: 80rem 0;}
    .main-about__tag li{width: 130rem; height: 130rem;}
    .main-about__text{width: 92%;}
}

@media (max-width: 540px){
	.main h3{font-size: 22rem;}
    .main-about{padding: 60rem 0;}
    .main-about__text p{margin-top: 45rem;}
    .main-about .keywordhBox{margin-top: 14rem;}
    .keywordhBox{border:3rem solid var(--c-02); width: 161rem; padding: 7rem 12rem 7rem 21rem;}
    .keywordhBox i{width: 3rem; height: 23rem; left: 10rem; }
    .keywordhBox em{height: 25rem; width: 139rem; font-size: 20rem;}
    .main-about__tag{margin-top: 30rem;}
    .main-about__tag li{width: 110rem; height: 110rem; font-size: 14rem; border:2rem solid #f0f0f0}
    .main-about__tag li:nth-child(1){position: relative;  }
    .main-about__tag li:nth-child(2){left: 23%; }
    .main-about__tag li:nth-child(3){left: 46%; }
    .main-about__tag li:nth-child(4){left: 70%;}
    .main-about__tag.mob-block + .main-about__tag.mob-block{margin-top:-10rem;}
}

/* .fp-section#section0,body:not(.fp-responsive) .fp-overflow{height: auto !important; max-height:auto !important} */
.main-sticky{position: relative;   --width-base:900  }
.main-sticky .main-sticky__image{width: 43%;height: 100vh;position: sticky; overflow: hidden; top: 0;border-right: 8rem solid var(--c-02);}
.main-sticky .main-sticky__image img{display: block;width: 100%;height: 100%;object-fit: cover;transition: all .7s;opacity: 0;position: absolute;left: 0;top: 0;z-index: -1;}
.main-sticky .main-sticky__image img.on {opacity: 1;}
.main-sticky__conts{width: 57%;padding: 128rem calc(42 / var(--width-base) * 100vw) 160rem calc(65 / var(--width-base) * 100vw);/* margin: 0 auto; */position: relative;/* padding: 128rem 100rem 160rem 128rem  */}
.main-sticky__conts h2{text-align: center; font-size: 76rem; font-family: var(--lang-en);}

.main-stikcy__list{position: relative; margin-top: 42rem; }
.main-stikcy__list .dot{position: absolute; width: 10rem; height: 10rem; background-color: #bcbcbc; border-radius: 30rem; left: 50%; margin-left: -5rem;  top: 0;}
.main-stikcy__list::before{content: ""; display: block; position: absolute; left: 50%;  width: 1px; height: 100%; border-right: 1px dashed #e7e7e7;}
.main-sticky-figure{position: absolute; left: 0; top: 0; width: 100%; height: 100%;;}
.main-sticky-figure__link{position: absolute; right: 119rem; bottom: 85rem;  }
.main-sticky-figure__link *{color: #fff;}
.button-line{width: 202rem; /* padding: 0 30rem; */ margin-left: auto; overflow: hidden; margin-top: 46rem; display: flex; align-items: center; position: relative; height: 66rem; border-radius: 100rem; transition: all .3s; box-sizing: border-box; border:3rem solid #fff; background: rgba(255, 255, 255, 0.30); backdrop-filter: blur(2px);}
.button-line span{font-size: 16rem;padding-left: 30rem; font-weight: 400; display: block; text-align: right; z-index: 11; transition: all .3s;}
.button-line i{width: 22rem; height: 15rem; background: url(../img/layout/ic-link.svg) no-repeat; background-size: 100%; display: block; position: absolute; right: 30rem; top: 50%; transform: translateY(-50%);}
.button-line::before{content: ""; position: absolute;  width: 100%;height: 100%; clip-path: circle(26rem at 223rem 33rem ); background-color: #fff; transition: all .5s; }
.main-sticky__figure{position: relative; width: /* 320rem */ 100%; transition: all .3s; }
.main-sticky__figure::before{content: ""; display: block; padding-bottom: 100%;}
.main-sticky__figure img{width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; transition: all .3s;}
.main-sticky__figure .link-button{position: absolute; opacity: 0; z-index: 8; left: 50%; top: 50%; transform: translate(-50%,-50%); border-color: var(--c-01); background-color: var(--c-01);}
.main-sticky__item{display: flex;/* justify-content: center; */}
.main-sticky__item > *{width: 50%; display: flex;}
.main-sticky__item a{/* max-width: 320rem; */ width: 100%;}
.main-sticky__txt--wrap{/* width: 320rem; */ padding-top: 140rem;}
.main-sticky__txt h4{margin-top: 21rem; font-size: 32rem;}
.main-sticky__link p{margin-top: 35rem;}
.main-sticky__link h4{display: none;}
.main-sticky__point{position: relative;}
.main-sticky__point span{background-color: var(--c-02); font-family: var(--lang-en); font-weight: 500; padding: 7rem 19rem; border-radius: 30rem; display: inline-flex; justify-content: center; align-items: center; font-size: var(--font-16); color: #fff;position: relative; }
.main-sticky__point span::before{content: ""; width: 13rem; height: 14rem; background: url(../img/main/ic-polygon.svg) no-repeat; background-size: contain; position: absolute; }
.main-sticky__point .line{display: block;  width: 100rem; height: 1px; border-top: 1px dashed var(--c-02); position: absolute; top: 50%; }
.main-sticky__point .round{position: absolute; border-radius: 30rem;  box-sizing: border-box; }
.main-sticky__item:nth-of-type(odd) .main-sticky__link{justify-content: flex-start; padding-left: 100rem;} 
.main-sticky__item:nth-of-type(odd) .main-sticky__txt{justify-content: flex-end;}
.main-sticky__item:nth-of-type(odd) .main-sticky__txt--wrap{text-align: right; padding-right: 100rem;}
.main-sticky__item:nth-of-type(odd) .main-sticky__point span::before{right: -11rem;}
.main-sticky__item:nth-of-type(odd) .line{right: -96rem;}
.main-sticky__item:nth-of-type(odd) .round{width: 16rem; height: 16rem;border:3rem solid var(--c-02); background-color: #fff; right: -109rem; top: 9rem;}
.main-sticky__item:nth-of-type(even){flex-direction: row-reverse;}
.main-sticky__item:nth-of-type(even) .main-sticky__point span::before{left: -11rem; transform: rotate(-180deg);}
.main-sticky__item:nth-of-type(even) a{width: calc(100% - 100rem);}
.main-sticky__item:nth-of-type(even) .main-sticky__txt{padding-left: 100rem;}
.main-sticky__item:nth-of-type(even) .line{left: -99rem;}
.main-sticky__item:nth-of-type(even) .round{width: 10rem; height: 10rem;  background-color: var(--c-02); left: -103rem; top: 12rem; }
.main-sticky__item + .main-sticky__item{padding-top: 70rem;}
.main-sticky__item:nth-of-type(1){padding-top: 127rem;}

#sticky-title{/* width: 90%; */text-align: right;margin-left: auto;}

@media (hover: none) {
    .main-sticky__figure .link-button{border-color: transparent; opacity: 1; background-color: transparent; left: inherit; top: inherit; right: 0; bottom: 0; transform: none;}
}

@media (hover: hover){
    .main-sticky__item a:hover .link-button{opacity: 1; }
    .main-sticky__item a:hover .main-sticky__figure{box-shadow: 21rem 36rem 45rem 0px rgba(124, 124, 124, 0.35);}
    .button-line:hover {background-color: rgba(255,255,255,1);}
    .button-line:hover span{color: var(--c-02) ;}
    .button-line:hover i{background: url(../img/layout/ic-link_green.svg) no-repeat;}
    .button-line:hover::before{clip-path: circle(236rem at 193rem 33rem );}

}



@media (max-width:1680px){
    .main-sticky-figure__link{right: 68rem; bottom: 65rem;}
    .main-sticky__image .button-line{margin-top: 26rem;}
    .main-sticky__link p br{display: none;}
    .main-sticky__item:nth-of-type(odd) .main-sticky__link{padding-left: 80rem;}
    .main-sticky__item:nth-of-type(even) a{width: calc(100% - 80rem);}
    .main-sticky__item:nth-of-type(odd) .main-sticky__txt--wrap{padding-right: 80rem;}
    .main-sticky__item:nth-of-type(even) .main-sticky__txt{padding-left: 80rem;}
    .main-sticky__item:nth-of-type(even) .line{left: -80rem;}
    .main-sticky__item:nth-of-type(odd) .line{right: -80rem;}
    .main-sticky__item:nth-of-type(odd) .round{right: -89rem;}
    .main-sticky__item:nth-of-type(even) .round{left: -85rem;}
    .main-sticky__txt--wrap{padding-top: 120rem;}
    .main-sticky__conts{padding: 108rem calc(34 / var(--width-base) * 100vw) 120rem calc(44 / var(--width-base) * 100vw);}
    .main-sticky__conts h2{font-size: 66rem;}
    .main-sticky__link p{margin-top: 25rem;}
    .main-sticky__txt h4{font-size: 28rem; margin-top: 14rem;}
    .main-sticky__point .line{width: 80rem;}
    
}
@media all and (max-width:1480px){

}

@media all and (max-width:1023px){
    .main-sticky__conts h2{font-size: 48rem;}
    .main-sticky__item,.main-sticky__item:nth-of-type(even){flex-direction: column;}
    .main-stikcy__list::before,.main-stikcy__list .dot{left: 0;}
    .main-sticky__item:nth-of-type(1){padding-top: 80rem;}
    .main-sticky__item > *{width: 100%;}
    .main-sticky .main-sticky__image{width: 64%;}
    .main-sticky__txt--wrap{padding-top: 0;}
    .main-sticky__conts{padding: 108rem calc(44 / var(--width-base) * 100vw) 100rem calc(64 / var(--width-base) * 100vw)  }
    .main-sticky__item .main-sticky__link{margin-top: 22rem;}
    .main-sticky__item:nth-of-type(odd) .main-sticky__link{padding-left: 100rem;}
    .main-sticky__item:nth-of-type(odd) .main-sticky__txt--wrap{text-align: left; padding-right: 0;}
    .main-sticky__item:nth-of-type(odd) .main-sticky__txt{justify-content: flex-start;}
    .main-sticky__item:nth-of-type(odd) .main-sticky__txt--wrap{padding-left: 100rem;}
    .main-sticky__item:nth-of-type(odd) .main-sticky__point span::before{right: inherit; left: -11rem; transform: rotate(180deg);}
    .main-sticky__item:nth-of-type(odd) .line{right: inherit;left: -100rem;}
    .main-sticky__item:nth-of-type(odd) .round{right: inherit; left: -107rem;}
    .main-sticky__item:nth-of-type(even) .main-sticky__txt{padding-left: 100rem;}
    .main-sticky__item:nth-of-type(even) .line{left: -100rem;}
    .main-sticky__item:nth-of-type(even) .round{left: -104rem;}
    .main-sticky__item:nth-of-type(even) a{width: 100%}
    .main-sticky__item:nth-of-type(even) .main-sticky__link{padding-left: 100rem;}

    .main-sticky__point .line{width: 100rem;}
    .main-sticky__figure{width: 210rem;}
    .main-sticky__txt h4{font-size: 24rem;}
    
    .button-line{width: 172rem;  height: 56rem;}
    .button-line span{font-size: 14rem; padding-left: 25rem;}
    .button-line i{right: 23rem;}

    .main-sticky-figure__link{text-align: right;}
    .main-sticky__figure .link-button{border-color: transparent; opacity: 1; background-color: transparent; left: inherit; top: inherit; right: 0; bottom: 0; transform: none;}

}

@media all and (max-width:860px){
    .main-sticky__item:nth-of-type(odd) .main-sticky__link{padding-left: 70rem;}
    .main-sticky__item:nth-of-type(odd) .main-sticky__txt--wrap{padding-left: 70rem;}
    .main-sticky__item:nth-of-type(odd) .line{right: inherit;left: -70rem;}
    .main-sticky__item:nth-of-type(odd) .round{right: inherit; left: -76rem; top: 9rem; width: 12rem; height: 12rem;}
    .main-sticky__item:nth-of-type(even) .main-sticky__txt{padding-left: 70rem;}
    .main-sticky__item:nth-of-type(even) .line{left: -70rem;}
    .main-sticky__item:nth-of-type(even) .round{left: -74rem; top: 10rem;}
    .main-sticky__item:nth-of-type(even) .main-sticky__link{padding-left: 70rem;}

	.main-sticky__conts h2{font-size: 40rem;}
    .main-sticky__conts{padding: 68rem calc(44 / var(--width-base) * 100vw) 0 calc(64 / var(--width-base) * 100vw);}
    .main-sticky-figure__link{right: 48rem; bottom: 55rem;}
    .main-sticky{flex-direction: column;}
    /* .main-sticky .main-sticky__image{height: 44vh; width: 100%; z-index: 10;} */
    .main-sticky__conts{width: 100%;}
    .main-sticky .main-sticky__image{border-bottom: 8rem solid var(--c-02); border-right: 0;}
    .main-sticky__figure{width: 50%;}
    .main-sticky__image .button-line{margin-top: 14rem;}
    .main-sticky .main-sticky__image{display: none;}
    .main-product{padding-bottom: 64rem;}
  
}

@media (max-width: 540px){
    .main-sticky__item:nth-of-type(1){padding-top: 40rem;}
    .main-sticky .main-sticky__image{display: none;}
    .main-sticky__item:nth-of-type(odd) .main-sticky__link,
    .main-sticky__item:nth-of-type(odd) .main-sticky__txt--wrap,
    .main-sticky__item:nth-of-type(even) .main-sticky__txt,
    .main-sticky__item:nth-of-type(even) .main-sticky__link{padding-left: 30rem;}
    .main-sticky__point .line{width: 25rem;}
    .main-sticky__item + .main-sticky__item{padding-top: 40rem;}
    .main-sticky__item:nth-of-type(odd) .line{left: -30rem;}
    .main-sticky__item:nth-of-type(even) .round{left: -34rem; top: 7rem;}
    .main-sticky__item:nth-of-type(even) .line{left: -29rem;}
    .main-sticky__item:nth-of-type(odd) .round{left: -36rem; top: 7rem; width: 10rem; height: 10rem; border:2px solid var(--c-02);}
    .main-sticky__item:nth-of-type(odd) .main-sticky__point span::before{left: -10rem;}
    .main-sticky-figure__link{right: 25rem; bottom: 32rem;}
    .button-line{width: 132rem;  height: 42rem; border:2rem solid #fff}
    .button-line span{font-size: 13rem; padding-left: 16rem;}
    .button-line i{width: 17rem; height: 12rem; right: 13rem;}
    .main-sticky__conts h2{font-size: 32rem;}
    .main-sticky__txt h4{font-size: 20rem; margin-top: 10rem;}
    .main-sticky__figure{width: 100%;}
    .main-sticky__point span{padding: 4rem 13rem;}
}

.main-slide{/* padding: 157rem 0 132rem; */ background-color:#f8f8f8; position: relative;}
.main-slide h3{font-weight: 400; margin-bottom: 60rem;}
.main-slide h3 b{color: var(--c-02);}
.main-slide a{width: 100%;}
.main-slide__image{position: relative;}
.main-slide__image::before{content: ""; display: block; padding-bottom:57.28%;}
.main-slide__image img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-position: 50% 50%; object-fit: cover;}
.main-slide__image .link-button{position: absolute; right: 30rem; bottom: -35rem; z-index: 2; opacity: 0; transform: translateY(14rem);} 
.main-slide__text{margin-top: 38rem;}
.main-slide__text *{transition: all .3s;}
.main-slide__text span{display: inline-flex; align-items: center; justify-content: center; padding: 8rem 12rem; box-sizing: border-box; font-size: 15rem; border:1px solid #ddd; border-radius: 30rem; color: #a4a4a4;}
.main-slide__text strong{display: block; font-size: 20rem; margin-top: 14rem;}
.main-slide .swiper-slide{background-color: transparent;}

.colum-slider-controls {position: absolute; right: 0; top: -153rem; display: flex; align-items: center; flex-direction: row; gap: 10rem;}
.colum-slider__btn{width: 78rem; height: 78rem; border-radius: 100%; opacity: 1; border:3rem solid #e9e9e9;display: flex; align-items: center; justify-content: center; transition: all .3s;}
.colum-slider__btn svg{width: 12rem; height: 20rem;}
.colum-slider__btn path{stroke: #e9e9e9; stroke-width: 3rem; }
.colum-slider__btn:hover{background-color: var(--c-02); border-color: var(--c-02); opacity: 1;}
.main-slide .button-next.swiper-button-disabled, 
.main-slide .button-prev.swiper-button-disabled{opacity: 1;}

.main-slide__image .no_image{width: 100%;background: #ffffff url(../img/sub/temporarily.jpg) no-repeat 50% 50%;background-size: cover; font-size: 0;height: 100%;display: block;position: absolute;top: 0;}

@media (hover: hover){
    .main-slide a:hover .link-button{transform: none; opacity: 1; visibility: visible;}
    .main-slide a:hover strong{color: var(--c-02);}
    .main-slide a:hover span{border-color: var(--c-02); color: var(--c-02);}    
}

@media (max-width:1680px){

}
@media all and (max-width:1480px){
    /* .main-slide{padding: 132rem 0 } */
    .colum-slider-controls{top: -133rem;}
}

@media all and (max-width:1023px){
    .main-slide{padding: 100rem 0;}
    .colum-slider__btn{width: 60rem; height: 60rem;}
    .colum-slider-controls{top:0rem;}

    .fp-scrollable.fp-responsive .fp-is-overflow.fp-section:not(.fp-auto-height):not([data-percentage]),
     .fp-scrollable .fp-section:not(.fp-auto-height):not([data-percentage]), 
     .fp-scrollable .fp-slide:not(.fp-auto-height):not([data-percentage]){min-height: auto !important;}

}

@media all and (max-width:860px){
    .main-slide{padding: 85rem 0;}
}

@media (max-width: 540px){
    .main-slide{padding: 54rem 0;}
    .main-slide h3{margin-bottom: 40rem;}
    .main-slide .wrap{margin-right: 0;}
    .colum-slider-controls{gap: 5rem; right: 20rem;}
    .colum-slider__btn{width: 45rem; height: 45rem; border:2rem solid #e9e9e9;}
    .colum-slider__btn svg {width: 8rem; height: 12rem;}
    .colum-slider__btn path{stroke-width: 2rem;}
	.main-slide__text strong{font-size: 18rem;}
    .main-slide__text{margin-top:20rem}
    .main-slide__text span{font-size: 14rem; padding: 6rem 8rem;}

  
}