﻿.i-slider-sec{
    margin-bottom:-1px;
    background: #000000;
background: linear-gradient(190deg, rgba(0, 0, 0, 1) 0%, rgba(48, 48, 48, 1) 50%);
}
.index-slider .slider-item {
    width: 100%;
    height: 40vw;
    position: relative;
    z-index:15;
    display: flex;
}
.index-slider .slider-item .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        overflow:hidden;
    }
        .index-slider .slider-item .bg img,
        .index-slider .slider-item .bg video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position:absolute;
            top:0;
            left:0;
                       -moz-transform: scale(1.1);
                -ms-transform: scale(1.1);
                -o-transform: scale(1.1);
                -webkit-transform: scale(1.1);
                transform: scale(1.1);
                z-index: 9;
                -moz-transition: all 7s ease-out;
                -o-transition: all 7s ease-out;
                -webkit-transition: all 7s ease-out;
                transition: all 7s ease-out;
            }
        .index-slider .owl-item.active .slider-item .bg img,
        .index-slider .owl-item.active .slider-item .bg video {
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            -webkit-transform: scale(1);
            transform: scale(1);
        }
.index-slider .slider-item .cap-con{
   position:relative;
   z-index:10;
   display:flex;
           align-items:flex-end;
}
.index-slider .slider-item .cap .head-con,
.index-slider .slider-item .cap .desc-con,
.index-slider .slider-item .cap .btn-con {
transform:translateY(30%);
            opacity:0;
            transition:all 1.1s;
            transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
             overflow:hidden;
    }
    .index-slider .owl-item.active .slider-item .cap .head-con,
    .index-slider .owl-item.active .slider-item .cap .desc-con,
    .index-slider .owl-item.active .slider-item .cap .btn-con {
        transform:translateY(0%);
            opacity:1;
    }
.index-slider .slider-item .cap .head-con {
            transition-delay:0.5s;
    }
.index-slider .slider-item .cap .desc-con {
                  transition-delay:0.7s;
    }
.index-slider .slider-item .cap .btn-con {
                  transition-delay:1.1s;
    }
.index-slider .slider-item.img-slide .cap-con {
              padding-right:246px;
    }
    .index-slider .slider-item.book-slide {
  }
    .index-slider .slider-item.book-slide .cap-con {
flex:1 0 0;
    }
    .index-slider .slider-item.book-slide .book {
flex:1 0 0;
position:relative
    }
        .index-slider .slider-item.book-slide .book img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transform: scale(0.8);
            transition: all 5s ease-out;
        }
.index-slider .owl-item.active .slider-item.book-slide .book img {
    transform: scale(1);
}
        .index-slider .slider-item .cap {
       padding:45px;
       margin-bottom:45px;
    }
.index-slider .slider-item .cap .head {
            font-size:36px;
            font-weight:700;
            color:#000;
    }
.index-slider .slider-item.dark-slide .cap .head,
.index-slider .slider-item.book-slide .cap .head {
            color:#fff;
    }
.index-slider .slider-item .cap .head span {
       display:block;
            font-weight:200;
    }
.index-slider .slider-item .cap .desc {
               margin:20px 0 45px 0;
               font-size:18px;
               font-weight:200;
               color:#000;
    }
.index-slider .slider-item.dark-slide .cap .desc,
.index-slider .slider-item.book-slide .cap .desc {
            color:#fff;
    }
.owl-carousel.index-slider .owl-stage-outer {
    z-index: 10;
}
.index-slider .owl-dots {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction:row-reverse;
    padding:20px 45px;
    z-index: 12;
}
    .index-slider .owl-dots .owl-dot {
        width:12px;
        margin: 0 5px;
        transition: all 0.3s;
    }
    .index-slider .owl-dots .owl-dot:first-child {
        margin-left:0;
    }
       .index-slider .owl-dots .owl-dot:last-child {
        margin-right:0;
    }
        .index-slider .owl-dots .owl-dot.active {
           width:36px;
        }
    .index-slider .owl-dots .owl-dot span{
        display:block;
                height: 12px;
        background-color: #fff;
        border-radius:500px;
    }
.i-about-sec{
background: #303030;
background: linear-gradient(180deg, rgba(48, 48, 48, 1) 9%, rgba(0, 0, 0, 1) 92%);
   height:300vh;
      overflow:hidden;
      margin-bottom:-1px
}

.i-about-sec .scroll-down{
   z-index:4;
  
   position:absolute;
   height:100vh;
   width:100%;
   left:0;
   top:0
}
.i-about-sec .scroll-down .scroll-con{
 width:100%;
 height:calc(100vh - 40vw);
    display:flex;
   align-items:flex-end;
   justify-content:center;
   position:relative;

}
.i-about-sec .scroll-down .scroll-con .ttl-con{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
       color:var(--main-c);
       padding-bottom:30px;
         -webkit-animation: bounce 2s infinite both;
  animation: bounce 2s infinite both;

}
.i-about-sec .scroll-down .scroll-con .ttl-con .ttl{
   font-size:14px;
   font-weight:100;
   letter-spacing:3px;

}

.i-about-sec .scroll-down .scroll-con .ttl-con .icon{
   font-size:24px;
   transform:rotate(90deg)
}

  @-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
  40%, 43% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
  }
  70% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -15px, 0);
  transform: translate3d(0, -15px, 0);
  }
  90% {
  -webkit-transform: translate3d(0,-4px,0);
  transform: translate3d(0,-4px,0);
  }
  }
  
  @keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
  40%, 43% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
  }
  70% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -15px, 0);
  transform: translate3d(0, -15px, 0);
  }
  90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0);
  }
  } 





.i-about-sec .sec-con{
   height:100vh;
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:center;
   text-align:center;
   position:relative;
} 
.i-about-sec .sec-con .logo-con{
  position:absolute;
  z-index:5;
  text-align:center;
  overflow:hidden;
}
.i-about-sec .sec-con .logo-con .circle{
  width:160px;
  height:160px;
  display:inline-block;
  background-color:var(--main-c);
  border-radius:50%;
      display: inline-flex;
    align-items: center;
    justify-content: center;
}
.i-about-sec .sec-con .logo-con .circle .logo{
  width:60px;
  position:relative;
  z-index:10;
}
.i-about-sec .sec-con .logo-con .circle .logo img{
  width:100%;
}
.i-about-sec .sec-con .slogan-con{
  position:relative;
  z-index:7;
  overflow:hidden;
  margin-bottom:90px;
}
.i-about-sec .sec-con .slogan-con .slogan{
      font-size:48px;
            font-weight:700;
            color:#000;
}
.i-about-sec .sec-con .slogan-con .slogan span{
            font-weight:200;
}
.i-about-sec .sec-con .desc-con{
      margin-top:90px;
  position:relative;
  z-index:7;
  overflow:hidden;
  max-width:580px;
}
.i-about-sec .sec-con .desc-con .desc{
      font-size:18px;
            font-weight:200;
            color:#000;
}
.i-about-sec .sec-con .btn-con{
  position:relative;
  z-index:7;
  overflow:hidden;
  margin-top:45px;
}
.i-stores-sec .img-row{
    background: #ffffff;
background: linear-gradient(2deg, rgba(255, 255, 255, 1) 0%, rgba(252, 196, 37, 1) 64%);
text-align:center;
height:100vh;
position:relative;
z-index:9
}
.i-stores-sec .img-row .img-con{
    width:50%;
    height:50vh;
    position:relative;
    overflow:hidden;
    display:inline-block;
    border-radius:150px;
}
.i-stores-sec .img-row .img-con img,
.i-stores-sec .img-row .img-con video{
    width:100vw;
    height:100vh;
    position:absolute;
   top:50%;
   left:50%;
   margin-top:-50vh;
   margin-left:-50vw;
   object-fit:cover;
}
.i-stores-sec .txt-row{
margin-top:-180px;
width:1180px;
position:relative;
z-index:10;
overflow:hidden;
}
.i-stores-sec .txt-row .bg{
    background: #ffffff;
background: linear-gradient(264deg, rgba(255, 255, 255, 1) 19%, rgba(252, 196, 37, 1) 92%);
width:100%;
height:100%;
top:0;
left:0;
position:absolute;
z-index:5
}
.i-stores-sec .txt-row .txt-con{
    padding:90px 0;
    position:relative;
    z-index:7
}
.i-stores-sec .txt-row .txt-con .head-con{
  margin-bottom:30px;
}
.i-stores-sec .txt-row .txt-con .head-con a{
outline:0;
}
.i-stores-sec .txt-row .txt-con .head-con .head{
  display:inline-block;
  color:#000;
  font-weight:700;
  margin:0;
  font-size:24px;
}
.i-stores-sec .txt-row .txt-con .desc-con{
  margin:45px 0;
}
.i-stores-sec .txt-row .txt-con .desc-con .desc {
    font-size: 18px;
    font-weight: 200;
    color: #000;
}
.i-events-sec{
    margin-top:180px;
background: #ffffff;
background: linear-gradient(186deg, rgba(255, 255, 255, 1) 23%, rgba(217, 217, 217, 1) 100%);
margin-bottom:-1px;
}
.i-events-sec .sec-head{
    margin-bottom:30px;
}
.i-events-sec .sec-head a{
   outline:0;
}
.i-events-sec .sec-head .head-con .head{
    display:inline-block;
    color:#000;
  font-weight:700;
  margin:0;
  font-size:24px;
}
.owl-carousel.event-slider .owl-stage{
    display:flex;
}
.owl-carousel.event-slider .owl-item {
    flex: 1 0 auto;
    display:flex;
}
.event-slider .slider-item{
    display:flex;
    width:100%;
}
.event-slider .slider-item .img-col{
    flex:1 0 0;
    max-width:50%;
    position:relative;
    aspect-ratio:3/2;
}
.event-slider .slider-item .img-col .bg{
     width:100%;
    height:100%;
    position:absolute;
   top:0%;
   left:0%;
   background-color:#fff;
   z-index:5;
   transform-origin:left;
}
.event-slider .slider-item .img-col img{
     width:100%;
    height:100%;
    position:absolute;
   top:0%;
   left:0%;
   object-fit:cover;
    z-index:4
}
.event-slider .slider-item .txt-col{
    flex:1 0 0;
    display:flex;
    align-items:flex-end;
}
.event-slider .slider-item .txt-col .txt-con{
    padding:45px 45px 45px 291px;
}
.event-slider .slider-item .txt-con .date-con{
    border-right:6px solid #000;
    padding-right:20px;
    display:inline-block;
}
.event-slider .slider-item .txt-con .date-con a{
     outline:0;
}

.event-slider .slider-item .txt-con .date-con .ttl{
    font-size:16px;
    font-weight:700;
    margin-bottom:5px;
    color:#000;
}
.event-slider .slider-item .txt-con .date-con .date{
    font-size:14px;
    font-weight:200;
    color:#000;
}
.event-slider .slider-item .txt-con .head-con{
    margin:45px 0;
}
.event-slider .slider-item .txt-con .head-con a{
     outline:0;
}
.event-slider .slider-item .txt-con .head{
     display:inline-block;
    color:#000;
  font-weight:700;
  margin:0;
  font-size:28px;
}
.event-slider .slider-item .txt-con .desc-con{
    margin:45px 0;
}
.event-slider .slider-item .txt-con .desc-con .desc{
    font-size: 18px;
    font-weight: 200;
    color: #000;
}
.event-slider .owl-nav{
    position:absolute;
    left:0;
    top:0;
    padding-left:291px;
    display:flex;
}
.event-slider .owl-nav .btn{
   display:inline-block;
   padding:5px;
   position:relative;
   z-index:5;
}
.event-slider .owl-nav .btn .icon{
   display:block;
   font-size:32px;
   color:#000000;
}
@media(max-width:1599px) {
    .event-slider .slider-item .txt-col .txt-con {
    padding: 45px;
}
    .event-slider .owl-nav {
    padding-left: 45px;
}
}
@media(max-width:1199px) {
    .index-slider .slider-item {
    height: 60vw;
}
    .index-slider .slider-item.img-slide .cap-con {
    padding-right: 0;
}
    .i-about-sec .scroll-down .scroll-con{
 height:calc(100vh - 60vw);

}
    .i-stores-sec .txt-row {
    width: calc(100% - 140px);
}
}
@media(max-width:991px) {
        .index-slider .slider-item {
    height: 100vw;
}
        .i-about-sec .scroll-down .scroll-con{
 height:calc(100vh - 100vw);

}
}
@media(max-width:767px) {
    .index-slider .slider-item {
        height: 133vw;
        flex-direction: column;
        justify-content: flex-end;
    }
        .index-slider .slider-item.book-slide .book {
            flex: initial;
            height: 66vw;
        }
        .index-slider .slider-item.book-slide .cap-con {
            flex: initial;
        }
        .index-slider .slider-item .cap {
            padding: 0 20px;
            margin-bottom: 45px;
        }
            .index-slider .slider-item .cap .head {
                font-size: 21px;
            }
            .index-slider .slider-item .cap .desc {
                margin: 5px 0 20px 0;
                font-size: 13px;
            }
    .index-slider .owl-dots {
        padding: 15px 20px;
    }
        .index-slider .owl-dots .owl-dot {
            width: 10px;
        }
            .index-slider .owl-dots .owl-dot.active {
                width: 30px;
            }
            .index-slider .owl-dots .owl-dot span {
                height: 10px;
            }

.i-about-sec .scroll-down .scroll-con{
 height:calc(100vh - 133vw);
 }

    .i-about-sec .scroll-down .scroll-con .ttl-con {
        padding-bottom: 45px;
    }
.i-about-sec .scroll-down .scroll-con .ttl-con .ttl{
   font-size:12px;
   font-weight:100;
   letter-spacing:2px;
}
.i-about-sec .scroll-down .scroll-con .ttl-con .icon{
   font-size:20px;
}

    .i-about-sec .sec-con .logo-con .circle {
        width: 90px;
        height: 90px;
    }
        .i-about-sec .sec-con .logo-con .circle .logo {
            width: 36px;
        }
    .i-about-sec .sec-con .slogan-con {
        margin-top: 45px;
        margin-bottom: 60px;
        padding: 0 20px;
    }
        .i-about-sec .sec-con .slogan-con .slogan {
            font-size: 32px;
        }
    .i-about-sec .sec-con .desc-con {
        margin-top: 60px;
        max-width: 100%;
        padding: 0 20px;
    }
        .i-about-sec .sec-con .desc-con .desc {
            font-size: 15px;
        }
    .i-about-sec .sec-con .btn-con {
        margin-top: 30px;
    }
    .i-stores-sec .txt-row {
        margin-top: -120px;
        width: calc(100% - 60px);
    }
        .i-stores-sec .txt-row .txt-con {
            padding: 60px 0;
        }
            .i-stores-sec .txt-row .txt-con .head-con {
                margin-bottom: 20px;
            }
                .i-stores-sec .txt-row .txt-con .head-con .head {
                    font-size: 19px;
                }
            .i-stores-sec .txt-row .txt-con .desc-con {
                margin: 30px 0;
            }
                .i-stores-sec .txt-row .txt-con .desc-con .desc {
                    font-size: 13px;
                }
    .i-events-sec {
        margin-top: 90px;
        padding-bottom: 71px;
    }
        .i-events-sec .sec-head {
            margin-bottom: 20px;
        }
            .i-events-sec .sec-head .head-con .head {
                font-size: 19px;
            }
    .event-slider .slider-item {
        flex-direction: column;
    }
        .event-slider .slider-item .img-col {
            flex: initial;
            max-width: 100%;
        }
        .event-slider .slider-item .txt-col {
            flex: initial;
        }
            .event-slider .slider-item .txt-col .txt-con {
                padding: 20px;
            }
        .event-slider .slider-item .txt-con .date-con {
            border-right: 5px solid #000;
            padding-right: 15px;
        }
            .event-slider .slider-item .txt-con .date-con .ttl {
                font-size: 13px;
                margin-bottom: 5px;
            }
            .event-slider .slider-item .txt-con .date-con .date {
                font-size: 11px;
            }
        .event-slider .slider-item .txt-con .head-con {
            margin: 30px 0;
        }
        .event-slider .slider-item .txt-con .head {
            font-size: 23px;
        }
        .event-slider .slider-item .txt-con .desc-con {
            margin: 30px 0;
        }
            .event-slider .slider-item .txt-con .desc-con .desc {
                font-size: 13px;
            }
    .event-slider .owl-nav {
        position: absolute;
        left: 0;
        top: -50px;
        padding-left: 20px;
    }
        .event-slider .owl-nav .btn {
            padding: 5px;
        }
            .event-slider .owl-nav .btn .icon {
                font-size: 28px;
            }
}