@charset "utf-8";

/* 
 * main CSS Document
 * KOWEB
 */

/* header */
#header{position: absolute; left: 0; width: 100%; top: 0; z-index: 999;}
#header h1 a .w_ver{display: none;}
body.fp-viewing-1Page #header  h1 a .origin{display: none;}
body.fp-viewing-1Page #header  h1 a .w_ver{display: block;}
body.fp-viewing-1Page #header nav .gnb > li > a{color: #fff;}
body.fp-viewing-1Page #header .pc_burger span{background-color: #fff;}

 /* 비주얼 */
.main-visual{position:relative; height:800rem; overflow:hidden;}
.main-visual__list li{position:relative; width:100%; height:800rem; background:url(../images/main/visual_bg.jpg) no-repeat 50% 50%; background-size:cover;}
.main-visual__list li.swiper-slide-active .line i{width: 100%;}
.main-visual__list .inner{height:100%; position:relative;}
.main-visual__list .box{display:flex; justify-content:center; align-items:center; max-width:1400rem; height:100%; margin:0 auto;}
.main-visual__list .box img{max-width:100%;}
.main-visual__title--wrap{position: absolute; width: 100%; left: 0; bottom: 242rem;}
.main-visual__title--wrap .area_button{margin-top: 45rem;}
.main-visual__title--wrap .area_button .btn{border-color: rgba(255,255,255,0.32);}
.main-visual__title *{color: #fff;}
.main-visual__title h2{font-size: 72rem; line-height: 1.44; text-transform: uppercase; font-weight: 300;}
.main-visual__title h2 b{font-weight: 800;}
.main-visual__title span{font-size: 25rem; font-weight: 300; margin-bottom: 14rem; display: block;   text-indent: 6rem;}
.visual-control{}
.visual-control .inner{display:flex; align-items: center; position: relative;}
.visual-control__line{display:none; width: 84.54%; height: 4rem; background-color: rgba(255,255,255,0.25);  position: relative;}
.visual-control__line #bar{position: absolute; width: 0; height: 4rem; background-color: var(--color-point); display: block; left: 0; top: 0; z-index: 1;}
.visual-control__line #bar.on{width: 100%;transition: all 4s ease 0s}
.visual-control__page{position:absolute; right:80rem; top:50%; z-index:50; min-width:66rem; transform:translateY(-50%);}
.visual-control__page .swiper-pagination{position: relative;}
.visual-control__page span{font-size: 18rem; font-weight: 700; color: #fff;}
.visual-control__page .total{opacity:0.4;}
.visual-control__page .dot{opacity:0.4; width: 3rem; height: 3rem; background-color: #fff; border-radius: 10rem; margin:0 15rem ;}
.visual-control__nav{position: absolute; right:80rem; top:50%; z-index:50; transform:translateY(-50%);}
.visual-control__nav [class^='swiper-button']{position: relative !important;  left: 0!important; right: 0!important; top: 0!important; border-radius: 100%; width: 62rem; height: 62rem; border:2px solid rgba(255,255,255); display: flex; align-items: center; justify-content: center; user-select: none;}
.visual-control__nav [class^='swiper-button'] img{width: 18rem;}
.visual-control__nav [class^='swiper-button']::after{display: none;}
.visual-control__nav .swiper-button-prev{margin-top: 0;}
.visual-control__nav .swiper-button-next{margin-top: 110rem;}
.visual-control__nav .swiper-button-prev img{transform: rotate(180deg);}
.visual-product__name{position:absolute; right:260rem; bottom:130rem; z-index:50; background:rgba(0,0,0,0.5); padding:30rem 20rem; border-radius:10rem; color:#fff;}
.visual-product__name p{font-size:15rem; font-weight:300;}
	/* active */
.main-visual .box{opacity:0; transform:scale(1.2); transition:0.8s cubic-bezier(0.1, 0.92, 0.24, 1.04) 0s; transition-property:opacity, transform;}
.main-visual .visual-product__name{opacity:0; transform:translateX(50rem); transition:0.5s ease 0s; transition-property:opacity, transform;}
.main-visual.active .box{opacity:1; transform:scale(1);}
.main-visual.active .visual-product__name{opacity:1; transform:translateX(0); transition-delay:0.3s;}

.info-banner{height:calc(100% - 800rem); background-color:#090e1a;}
.info-list{display:grid; grid-template-columns:repeat(4, 1fr); height:100%;}
.info-list li{display:flex; flex-direction:column; justify-content:center; min-height:160rem; padding-left:50rem; border-right:1rem solid rgba(255,255,255,0.1); color:#fff;}
.info-list li:last-child{border-right-width:0;}
.info-list h2{line-height:1.2; font-size:25rem; font-weight:600; word-break:keep-all;}
.info-list p{opacity:0.7; font-size:18rem; font-weight:300; letter-spacing:-0.5rem;}
.info-list [data-infoList] div{padding:10rem 50rem 10rem 0;}
.info-list [data-infoList]{background-repeat:no-repeat; background-position:100% 50%;}
.info-list [data-infoList="01"]{background-image:url(../images/main/info_link01.png);}
.info-list [data-infoList="02"]{background-image:url(../images/main/info_link02.png);}
.info-list [data-infoList="03"]{background-image:url(../images/main/info_link03.png);}
.info-list [data-infoList="04"]{background-image:url(../images/main/info_link04.png);}

@media screen and (min-width:1921px){
	.main-visual__list .box img{width:100%;}
}
@media screen and (max-width:1820px){
	.visual-product__name{right:100rem;}
}
@media screen and (max-width:1400px){
	.visual-control__nav,
	.visual-control__page{right:40rem;}
}
@media screen and (max-width:1024px){
	.main-visual,
	.main-visual__list li{height:auto;}
	.visual-product__name{display:none;}
	.visual-control__nav [class^='swiper-button']{width: 48rem; height: 48rem;}
	.visual-control__page{min-width:48rem;}
	.visual-control__page span{font-size:16rem;}

	.info-banner{height:auto;}
	.info-list{grid-template-columns:repeat(2, 1fr);}
	.info-list h2{font-size:20rem;}
	.info-list p{font-size:16rem;}
	.info-list li{padding-left:30rem; border-top:1rem solid rgba(255,255,255,0.1);}
	.info-list li:nth-of-type(1),
	.info-list li:nth-of-type(2){border-top-width:0;}
}
@media(min-width:861px){
  .main-visual img{ background: url('/images/main/visual-pc-text.png') no-repeat 50% / contain; }
}
@media screen and (max-width:860px){
  .main-visual .box{padding:0;}
	.main-visual__list li{background-image:url(../images/main/visual_bg_mob.jpg);}
  .main-visual img{ background: url('/images/main/visual-mob-text.png') no-repeat 50% / contain; }
}
@media screen and (max-width:540px){
	.visual-control__page{display:none;}
	.visual-control__nav [class^='swiper-button']{width:40rem; height:40rem;}
	.visual-control__nav .swiper-button-next{margin-top:5rem;}
	.visual-control__nav,
	.visual-control__page{right:10rem;}
	.visual-control__nav{top:60%;}

	.info-list{grid-template-columns:repeat(1, 1fr);}
	.info-list li{min-height:110rem; padding-left:20rem;}
	.info-list li:nth-of-type(2){border-top-width:1rem;}
}
@media screen and (max-width:420px){
	.info-list [data-infoList]{background-size:200rem 128rem;}
}

#section01{position: relative; overflow: hidden;}
#section01 .inner{position: relative; padding-top: 90rem; z-index: 1;}
#section01 .bg{position: absolute; --n:6; --d:30s; display:grid;grid-template-columns:8rem;grid-template-rows:8rem;place-content: center;width: 602rem; height: 602rem; border:1px dashed #e5e5e5;  border-radius: 100%; background-color: #fff; right: -90rem; top:50%; transform: translateY(-50%); }
#section01 .bg i{ display: block; width: 8rem; height: 8rem; border-radius: 20rem; background-color: var(--color-point); grid-area:1/1;text-align: center;animation: spin var(--d) linear infinite; transform:rotate(0) translate(301rem) rotate(0);}
#section01 .bg i:nth-child(1){animation-delay:calc(-0*var(--d)/var(--n))}
#section01 .bg i:nth-child(2){animation-delay:calc(-1*var(--d)/var(--n)); background-color: transparent;}
#section01 .bg i:nth-child(3){animation-delay:calc(-2*var(--d)/var(--n));}
#section01 .bg i:nth-child(4){animation-delay:calc(-3*var(--d)/var(--n)); background-color: transparent;}
#section01 .bg i:nth-child(5){animation-delay:calc(-4*var(--d)/var(--n));}
#section01 .bg i:nth-child(6){animation-delay:calc(-5*var(--d)/var(--n)); background-color: transparent;}
#section01 .bg i:nth-child(7) {animation-delay:calc(-6*var(--d)/var(--n)); background-color: transparent;}
#section01 .bg i:nth-child(8) {animation-delay:calc(-7*var(--d)/var(--n)); background-color: transparent;}
#section01 .bg i:nth-child(9) {animation-delay:calc(-8*var(--d)/var(--n)); background-color: transparent;}

@keyframes spin {
    100% {
      transform:rotate(1turn) translate(301rem) rotate(-1turn);
    }
}

.main-product__title{position: absolute; width: 40%; left: 0; top: 50%; transform: translateY(-50%); z-index: 23;}
.main-product__title .area_button{margin-top:54rem ;}
.main-product__title p{line-height: 1.7;}
.main-product__tab{margin-bottom: 22rem; margin-top: 58rem;}
.main-product__tab span{font-size: 22rem; font-weight: 700; color: #d0d0d0; position: relative; cursor: pointer;}
.main-product__tab span.on{color: var(--color-point);}
.main-product__tab span.on::before{content: ""; width: 8rem; height: 8rem; border-radius: 20rem; background-color: var(--color-point); position: absolute; left: 50%; transform: translateX(-50%); top: -13rem;}
.main-product__tab span + span{margin-left: 22rem;}

.main-product__slide{display: none; align-items: center; justify-content: right; position: relative; top: 0; z-index: 20;}
.main-product__slide.on{display: flex;}
/* .main-product__main .slick-slide > div,
.main-product__main .slick-slide > div span{width:680rem; height:680rem;}
.main-product__main .slick-slide > div span,
.main-product__main .slick-slide > div img{display:block; height:100%;} */

.slide_btn > span{width: 62rem; opacity: 0.4; cursor:pointer; transition: opacity .3s; position: absolute; top: 50%; transform: translateY(-50%); height: 62rem; border-radius: 100%; box-sizing: border-box; border:1px solid #2ab0e3; background-color: transparent; display: flex; align-items: center; justify-content: center;}
.slide_btn > span:hover{opacity: 1;}
.slide_btn > span.next{right: -31rem;}
.slide_btn > span.prev img{transform: rotate(-180deg);}
.slide_btn > span.prev{left: -31rem;}
.slide_btn img{width: 18rem;}

.main-product__main{width: 684rem; height: 684rem; border-radius: 100%; background-color: #f7f7f7; position: relative;}
.main-product__main  .main-product__main--list{max-width: 100%;  position: relative;  top: 112rem; }
.main-product__main .main-product__main--list img{margin: 0 auto; max-width: 35%;object-fit: cover}
.main-product__thumb{max-width: 210rem; margin-left: 114rem;}
.main-product__thumb .slick-list{padding: 0;}
.main-product__thumb .main-product__thumb--list{}
.main-product__thumb .main-product__thumb--list img{max-width: 80rem;}
.main-product__thumb .main-product__thumb--item{text-align: center; margin: 18rem 0;}
.main-product__thumb .round{width: 210rem; height: 210rem; background-color: #f7f7f7; border-radius: 100%; display: flex; align-items: center; justify-content: center;}
.main-product__thumb .main-product__thumb--item p{margin-top: 13rem;}

#section02{position: relative; overflow: hidden;}
.main-best__title{text-align: center; position: relative; top:-54rem;}
.section .main-best__title h3{font-size: 120rem; margin-top: 16rem;}
.main-best__title h3 span{color: var(--color-point2);}
.main-best__title p{font-size: 22rem; margin-top: 41rem; }
.main-best__top span{font-size: 22rem; color:var(--color-bol);}
.main-best__top span b{font-size: 40rem; font-weight: 700; }
.main-best__top span + span{padding-left: 70rem; position: relative;}
.main-best__top span + span::before{content: ""; width: 3px; height: 20rem; background-color: #ddd; transform: rotate(30deg); position: absolute; left: 30rem; top: 3rem;}

.main-best__round{width: 1400rem; height: 1400rem; border-radius: 100%; --n:8; --d:100s; display:grid; grid-template-columns:8rem; grid-template-rows:8rem;place-content: center; box-sizing: border-box; border:1px dashed #e5e5e5;  position: absolute; left: 50%; transform: translateX(-50%); bottom: 188rem;}
.main-best__round [class^="pot_"]{/* position: absolute; */ display: block; width: 8rem; height: 8rem; border-radius: 20rem; 
    background-color: var(--color-point); grid-area:1/1;text-align: center; animation: spin2 var(--d) linear infinite;
     transform:rotate(0) translate(700rem) rotate(0) scale(1); }
.main-best__round .pot_01{animation-delay:calc(-0*var(--d)/var(--n));}
.main-best__round .pot_02{animation-delay:calc(-1*var(--d)/var(--n));}
.main-best__round .pot_03{animation-delay:calc(-2*var(--d)/var(--n));}
.main-best__round .pot_04{animation-delay:calc(-3*var(--d)/var(--n));}
.main-best__round .pot_05{animation-delay:calc(-4*var(--d)/var(--n));}
.main-best__round .pot_06{animation-delay:calc(-5*var(--d)/var(--n));}
.main-best__round .pot_07{animation-delay:calc(-6*var(--d)/var(--n));}
.main-best__round .pot_08{animation-delay:calc(-7*var(--d)/var(--n));}

.main-best__item{position: absolute; display: block;  text-align: center; z-index: 10; transition: all .3s;}
.main-best__item *{transition: all .3s;}
.main-best__item > i{width: 113rem; height: 113rem; margin: 0 auto; background-color: #fff; display:flex; align-items: center; justify-content: center; border-radius: 100%; box-shadow: 4px 6px 29px 0px rgba(102, 102, 102, 0.13); transition: all .3s;}
.main-best__item p{font-size: 17rem; margin-top: 12rem;}
.main-best__item svg{fill: #1c1b27;}
.main-best__item.i01{left: 60rem; bottom: 248rem;}
.main-best__item.i01 svg{width: 33rem;}
.main-best__item.i02{bottom:-76rem; left: 50%; transform: translateX(-50%);}
.main-best__item.i03{right: 60rem; bottom: 248rem;}
.main-best__item.i02 svg{width: 40rem;}
.main-best__item.i03 svg{width: 40rem;}

@keyframes spin2 {
    100% {
      transform:rotate(1turn) translate(700rem) rotate(-1turn) scale(2);
    }
}

.section h3{font-size: 68rem;font-family: var(--lang-point);line-height: 1;color: #1c1b27; letter-spacing: 2.2rem;}
.main-title{position: relative;display: flex;align-items: flex-end;justify-content: space-between;}
.main-title .more_link{width: 146rem; height: 45rem; border-radius: 50rem; border:1px solid rgba(28,27,39,0.14); display: flex; align-items: center; justify-content: center;}
.main-title .more_link span{font-size: 16rem; opacity: 0.42;}
 
#section03{background-color: #f6f6f6;}
#section03 .main-title{margin-bottom: 50rem;}
#section03 .inner{position: relative; top: 6%;}
.main-install__list{display: grid; gap: 30rem; grid-template-columns: repeat(5, 1fr);}
.main-install__item{border-radius: 10px; position: relative;  overflow: hidden; background-repeat: no-repeat; height: 243rem; background-position: 50% 50%; background-size: cover; object-fit: cover;}
.main-install__item a{display: block; width: 100%; height: 100%;}
.main-install__item .hover{position: absolute; opacity: 0; visibility: hidden; transition: all .3s; z-index: 10; left: 0; top: 0; background-color: rgba(22,28,45,0.3); display: flex; width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center;}
.main-install__item:hover .hover{opacity: 1; visibility: visible; }
.main-install__tit--wrap{}
.main-install__tit--wrap img{width: 18rem; display: block; margin: 0 auto;}
.main-install__tit{font-weight:700; color: #fff;  margin-bottom: 17rem;}

.main-logo__list--wrapper{margin: 0 auto;position: relative; bottom: 0; transform: translate3d(0,0,0);position: relative;overflow: hidden; white-space: nowrap;}
.main-logo__list {top: 0;height: 100%;  width: auto;display: flex; white-space: nowrap; transform: translate3d(0, 0, 0);  }
.main-logo__list > li{box-sizing: border-box; padding: 0 32rem;}
.main-logo__list.up{animation: moveSlideshow 15s linear infinite; padding:30rem 0 10rem ; left: 0;}
.main-logo__list.down{animation: moveSlideshow2 80s linear infinite;  padding: 10rem 0 30rem; right: 0;}

@keyframes moveSlideshow {
    100% { 
      transform: translateX(-30%);  
    }
  }
  @keyframes moveSlideshow2 {
    0%{
        transform: translateX(-100%);
      }
      100%{
        transform: translateX(100%);
      }
  }
@media (hover: hover) {
    .main-best__item.i01:hover{transform: translateX(-20rem);}
    .main-best__item.i03:hover{transform: translateX(5rem);}
    .main-best__item:hover i{transform: scale(1.12); box-shadow: 4px 6px 29px 0px rgba(12, 164, 223, 0.25);}
    .main-best__item:hover i > svg{fill: #2ab0e3; transform: scale(1.1);}
    .main-best__item:hover p{ font-weight: 600; color: var(--color-point2); font-size: 22rem;  transform: translateY(13rem);}

}



 @media (min-width:2000px){}
 @media all and (max-width:1820px){
    .main-product__title{width: 30%;}
 }
 @media all and (max-width:1640px){
    .main-product__main{width: 534rem; height: 534rem;}
    .main-logo__list{display: block;}
    .main-logo__list > li{display: inline-block; padding: 0; width: 320rem;}
    .main-logo__list > li img{width: 100%;} 
 }
 @media all and (max-width:1440px){
    .section h3{font-size: 62rem;}
    #section01 .bg{width: 530rem; height: 530rem;}
    #section01 .bg i{transform: rotate(0) translate(265rem) rotate(0);}
    @keyframes spin {
        100% {
          transform:rotate(1turn) translate(265rem) rotate(-1turn);
        }
    }
    .main-product__thumb .round{width: 180rem; height: 180rem;}
    .main-product__thumb .main-product__thumb--list img{max-width: 62rem;}
    .main-best__title{top: -74rem;}
    .main-best__round{bottom: 20%;}
    .section .main-best__title h3{font-size: 90rem;}
    .main-install__list{grid-template-columns: repeat(4, 1fr);}
    .main-logo__list > li img{}
    .main-install__item:nth-child(n + 8){display: none;}
 }

 @media all and (min-width:1025px){
    /* 풀페이지 엑티브 */
    #section01 .outer > *,
    #section02 .inner > div:nth-child(1),
    #section03 .inner > *,
    #section02 .main-best__item{transform: translateY(20rem); opacity: 0; transition: all .5s;}
    #section01 .outer > *:nth-child(2),#section03 .inner > *:nth-child(2){transition-delay: .3s;}
    #section01.fp-completely .outer > *,
    #section02.fp-completely .inner > div:nth-child(1),
    #section03.fp-completely .inner > *,#section02.fp-completely .main-best__item{transform: translateY(0); opacity: 1;}
    #section02 .main-best__item:nth-child(1){transition-delay: .2s;}
    #section02 .main-best__item:nth-child(2){transition-delay: .4s;}
    #section02 .main-best__item:nth-child(3){transition-delay: .6s;}
 }
 @media all and (max-width:1024px){
    .section h3{font-size: 54rem;}
    .main-install__list{grid-template-columns: repeat(3, 1fr);}

    .main-visual__title span{font-size: 18rem;}
    .main-visual__title h2{font-size: 48rem;}    
    .visual-control__line,.visual-control__line #bar{height: 2px;}
    .visual-control__line{width: 70%;}

    .main-product__tab span{font-size: 20rem;}
    .main-product__title{position: relative; width: 100%; transform: translateY(0); top: 0;}
    .main-product__slide{flex-direction: column;}
    .main-product__thumb{max-width: 100%; width: 100%; margin-left: 0; margin-top: 100rem;}
    .main-product__thumb .round{margin: 0 auto;}
    .main-product__title .area_button{margin-top: 24rem;}
    #section01 .bg{transform: translateY(0) translateX(-50%); top: inherit; bottom: 8%; right: inherit; left: 50%;}

    #section02,   #section03{padding:100rem 0}
    .section .main-best__title h3{font-size: 78rem;}
    .main-best__round{width: 100%; height: 100%; transform: none; border:none; left: 0;  bottom: 0;}
    .main-best__round [class^="pot_"]{transform:rotate(0) translate(400rem) rotate(0) scale(1); display: none;}
    .main-best__top span{font-size: 20rem;}
    .main-best__top span b{font-size: 30rem;}
    .main-best__title p{font-size: 20rem;}
    .main-best__list{position: relative; display: flex; bottom: 0; margin-top: 40rem; width: 100%; justify-content: center;} 
    .main-best__item{position: relative; width: 20%; }
    .main-best__item > i{height: 150rem; width: 100%; border-radius: 10rem;}
    .main-best__item + .main-best__item{margin-left: 50rem;}
    .main-best__item.i01{left: inherit; bottom: inherit;}
    .main-best__item.i02{bottom:inherit; left: inherit; transform: none;}
    .main-best__item.i03{right: inherit; bottom: inherit}
    .main-best__item.i01 svg{width: 42rem;}
    .main-best__item.i02 svg{width: 56rem;}
    .main-best__item.i03 svg{width: 55rem;}
    @keyframes spin2 {
        100% {
          transform:rotate(1turn) translate(400rem) rotate(-1turn);
        }
    }
    .main-best__title{top: 0;}
    .main-best__round{display: block; position: relative;}
   
    .main-logo__list{display: block; }
    .main-logo__list > li{display: inline-block; padding: 0; width: 200rem;}
    .main-logo__list > li img{width: 100%;} 
}
 
 @media all and (max-width:860px){
   
    .section h3{font-size: 43rem;}
    .main-product__thumb .round{width: 130rem; height: 130rem;}
    .main-product__thumb .main-product__thumb--list img{max-width: 42rem;}
    .main-product__thumb .main-product__thumb--item p{font-size: 15rem;}
    .main-product__main{width: 500rem; height: 500rem;}
    .section .main-best__title h3{font-size: 68rem;}
    .main-best__top span{font-size: 18rem}
    .main-best__top span b{font-size: 24rem;}
    .main-best__top span + span{padding-left: 40rem;}
    .main-best__top span + span::before{left: 16rem; width: 2px;}
    .main-best__title p{font-size: 18rem; margin-top: 30rem;}
    .section .main-best__title h3{margin-top: 28rem;}
    .main-best__item{width: 30%;}
    .main-best__item + .main-best__item{margin-left: 28rem;}
    .main-best__item > i{width: 160rem; height: 160rem; border-radius: 100%;}
    .main-best__item.i01 svg{width: 34rem;}
    .main-best__item.i02 svg{width: 44rem;}
    .main-best__item.i03 svg{width: 44rem;}
    .main-title .more_link {width: 126rem; height: 38rem;}
    .main-title .more_link span{font-size: 15rem; }
    .main-install__item{height: 190rem;}
    .main-best__title p{font-size: 16rem}

    .main-install__list{gap: 24rem;}
   }
 @media all and (max-width:540px){
    .section h3{letter-spacing: 1rem; font-size: 34rem;}
    .section .main-best__title h3{font-size: 42rem;}
    .visual-control{bottom: 60rem;}
    #section01 .inner{padding-top: 44rem;}

    .main-visual__title span{font-size: 16rem; margin-bottom: 5rem; text-indent: 1rem;}
    .main-visual__title h2{font-size: 32rem;}

    .main-best__item > i{width: 100%; height: 64rem; box-shadow: none;}
    .main-best__item + .main-best__item{margin-left: 4rem;}
    .main-best__item.i01 svg{width: 30rem;}
    .main-best__item.i02 svg{width: 38rem;}
    .main-best__item.i03 svg{width: 38rem;}
    .main-best__item p{font-size: 15rem; margin-top: 4rem; color: var(--color-basic);}
    .main-best__item{width: 100%; border-radius: 8rem; padding: 14rem; box-sizing: border-box; box-shadow: 1px 1px 14px 0px rgba(102, 102, 102, 0.13);}
    .main-best__top {display: flex; flex-wrap: wrap; justify-content: center;}
    .main-best__top span:nth-child(1){width: 100%;}
    .main-best__top span{text-align: center;}
    .main-best__top span:nth-child(n + 2){padding-left: 0; padding-top: 2rem;}
    .main-best__top span:nth-child(2)::before{display: none;}
    .main-best__top span:nth-child(2) + span{padding-left: 32rem;}
    .main-best__top span:nth-child(2) + span::before{left:13rem;  top: 18rem; height: 8rem; width: 8rem; transform: rotate(45deg);}
    #section02,  #section02 .fp-tableCell{overflow: inherit;}

    .main-product__main{width: 300rem; height: 300rem;}
    .slide_btn > span{width: 38rem; height: 38rem;}
    .slide_btn > span.prev{left: -22rem;}
    .slide_btn > span.next{right: -22rem;}
    .slide_btn img{width: 11rem;}

    .main-product__tab{margin-bottom: 10rem; margin-top: 42rem;}
    .main-product__tab span{font-size: 18rem;}
    .main-product__slide{margin-top:32rem}
    .main-product__thumb .round{width: 92rem; height: 92rem;}
    .main-product__main .main-product__main--list{top: 54rem;}
    .main-product__thumb{margin-top: 50rem;}
    .main-product__thumb .main-product__thumb--list img{max-width: 32rem;}
    .main-product__thumb .main-product__thumb--item p{font-size: 13rem;}

    #section02, #section03{padding: 54rem 0;}
    #section03 .main-title{margin-bottom: 20rem;}
    .main-install__item{height: 120rem;}
    .main-install__list{gap: 12rem; grid-template-columns:repeat(2, 1fr)}
    .main-title .more_link{width: 106rem; height: 30rem;}
    .main-title .more_link span{font-size: 13rem; }
    .main-visual__title--wrap .area_button{margin-top: 28rem;}
    .visual-control__page span{font-size: 16rem;}
    .visual-control__page .dot{margin: 0 10rem;}
    .main-logo__list > li{width: 110rem;}
    .main-logo__list.up{padding:20rem 0 10rem; animation: moveSlideshow 10s linear infinite; }
    .main-logo__list.down{padding:10rem 0 20rem; animation: moveSlideshow2 50s linear infinite;}

}
 @media all and (max-width:480px){}
 @media all and (max-width:360px){}