@charset "UTF-8";

.main-slide {position:relative;width:100%;overflow:hidden;}
.main-slide .frame {position:relative;}
.main-slide .ttl {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#fff;text-align:center;z-index:5;text-shadow:0 1px 2px rgb(0 0 0/40%);}
.main-slide .ttl span {display:block;font-size:2.5rem;line-height:3rem;font-weight:400;}
.main-slide .ttl strong {display:block;font-size:6rem;line-height:7rem;font-weight:600;}
.main-slide .slide {position:relative;width:100%;height:100vh;overflow:hidden;}
.main-slide .slide .swiper {position:absolute;width:100%;height:100%;overflow:visible;}
.main-slide .slide .swiper-slide {position:relative;width:100%;height:100%;}
.main-slide .slide .cover {position:absolute;width:100%;height:100%;}
.main-slide .swiper-pagination {width:auto;left:1.5%;bottom:3%;}
.main-slide .swiper-pagination-bullet {background:transparent;font-size:2rem;line-height:3rem;width:2rem;height:3rem;}
.main-slide .swiper-pagination-bullet {position:relative;padding:0 3px;margin:0 3px!important;font-weight:600;color:#fff;}
.main-slide .swiper-pagination-bullet::before {position:absolute;top:0;left:50%;display:block;content:'ㆍ';}
.main-slide .swiper-pagination-bullet::before {display:none;transform:translateX(-50%);line-height:0;}
.main-slide .swiper-pagination-bullet-active {background:transparent;}
.main-slide .swiper-pagination-bullet-active::before {display:block;}
.main-slide .scroll {position:absolute;bottom:3%;right:1.5%;z-index:5;}
.main-slide .scroll a {display:block;}
@media screen and (max-width:768px) {
    .main-slide .ttl {width:90%;}
    .main-slide .ttl span {font-size:2rem;line-height:2.5rem;}
    .main-slide .ttl strong {font-size:5rem;line-height:6rem;}
    .main-slide .slide {height:90vh;min-height:600px;}
}

.main-product {padding:10rem 0;}
.main-product .frame {width:90%;padding:0 1rem;margin:auto;box-sizing:border-box;}
.main-product .ttl {text-align:center;margin-bottom:5rem;}
.main-product .ttl strong {display:block;font-size:4rem;line-height:5rem;font-weight:600;color:var(--color-point);}
.main-product .ttl span {display:block;font-size:2rem;line-height:3rem;font-weight:600;margin-top:1.5rem;}
.main-product .product {display:flex;flex-wrap:wrap;gap:0 5%;background-color:#f8f8f8;padding:5rem;box-sizing:border-box;}
.main-product .product .lnb {width:30%;}
.main-product .product .nav {width:100%;}
.main-product .product .nav li {position:relative;}
.main-product .product .nav li a {display:inline-block;font-size:1.6rem;line-height:2.6rem;padding:1rem 1rem 1rem 2rem;box-sizing:border-box;}
.main-product .product .nav li a {font-family:'S-CoreDream-3Light';font-weight:600;color:#999;}
.main-product .product .nav li::before {position:absolute;width:3px;height:100%;display:block;content:"";background-color:#dddddd;}
.main-product .product .nav li.active a {color:var(--color-point);}
.main-product .product .nav li.active::before {background-color:var(--color-point);}
.main-product .product .tit {margin-top:5rem;}
.main-product .product .tit h2 {font-size:3rem;line-height:4rem;font-weight:600;color:var(--color-point);}
.main-product .product .tit a {font-size:1.5rem;line-height:2.5rem;font-weight:600;margin-top:2.5rem;display:inline-block;color:#222;}
.main-product .product .cont {width:65%;}
.main-product .product .thumb {position:relative;width:100%;padding-bottom:56.25%;}
.main-product .product .thumb .item {position:absolute;width:100%;height:100%;transform:translateY(10%);opacity:0;z-index:1;}
.main-product .product .thumb .item.on {transform:translateY(0);opacity:1;z-index:5;}
.main-product .product .thumb .item a {position:absolute;width:100%;height:100%;display:block;overflow:hidden;z-index:1;opacity:0;}
.main-product .product .thumb .item a.on {opacity:1;z-index:5;}
.main-product .product .thumb .item .cover {width:100%;height:100%;transition:transform .5s;}
.main-product .product .thumb .item .plus {position:absolute;bottom:3%;right:3%;width:5rem;height:5rem;border-radius:50%;z-index:5;}
.main-product .product .thumb .item .plus {background-color:var(--color-point);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;}
.main-product .product .thumb .item .plus i {color:#fff;font-size:2rem;}
.main-product .product .list {margin-top:5rem;}
.main-product .product .list .item {display:none;flex-wrap:wrap;justify-content:center;gap:2rem;}
.main-product .product .list .item.on {display:flex;}
.main-product .product .list .item a {font-size:1.5rem;line-height:2.5rem;font-family:'S-CoreDream-3Light';font-weight:400;}
.main-product .product .list .item a {display:block;text-align:center;padding:1.5rem 2rem;color:#222;}
.main-product .product .list .item a {background-color:transparent;border:1px solid #dddddd;box-sizing:border-box;}
.main-product .product .list .item a.active {background-color:var(--color-point);color:#fff;}
@media (hover: hover) {
    .main-product .product .nav li a:hover {color:#bbbbbb;}
    .main-product .product .nav li.active a:hover {color:var(--color-point);}
    .main-product .product .tit a:hover {color:#999;}
    .main-product .product .thumb .item a:hover .cover {transform:scale(1.05);}
    .main-product .product .list .item a:hover {background-color:#e8e8e8;}
    .main-product .product .list .item a.active:hover {background-color:var(--color-point);color:#fff;}
}
@media screen and (max-width:768px) {
    .main-product .frame {width:100%;}
    .main-product .ttl strong {font-size:4.5rem;line-height:5.5rem;}
    .main-product .ttl span {font-size:2.5rem;line-height:3.5rem;}
    .main-product .product {display:block;padding:5rem 2rem;}
    .main-product .product .lnb {width:100%;}
    .main-product .product .nav li a {font-size:1.8rem;line-height:2.8rem;}
    .main-product .product .tit h2 {font-size:3.5rem;line-height:4.5rem;}
    .main-product .product .tit a {font-size:1.8rem;line-height:2.8rem;}
    .main-product .product .cont {width:100%;margin-top:5rem;}
    .main-product .product .thumb {padding-bottom:56.25%;}
    .main-product .product .thumb .item {transform:translateY(15%);}
    .main-product .product .list .item {gap:1.5rem;}
    .main-product .product .list .item a {width:100%;}
}
.main-product .product .nav li a {transition:color .3s;}
.main-product .product .tit a {transition:color .3s;}
.main-product .product .thumb .item {transition:transform .8s, opacity .8s;}
.main-product .product .thumb .item.on {transition:transform 1s, opacity 1s;}
.main-product .product .thumb .item a {transition:opacity .5s;}
.main-product .product .list .item a {transition:background-color .5s, color .3s;}

.main-intro {position:relative;width:100%;overflow:hidden;}
.main-intro .banner {position:relative;padding:10rem 0;}
.main-intro .banner::before {position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;}
.main-intro .banner::before {display:block;content:"";background-color:rgb(34, 34, 34, .7);}
.main-intro .banner .ttl {position:relative;text-align:center;z-index:5;}
.main-intro .banner .ttl {width:100%;max-width:1000px;margin:auto;padding:0 1rem;box-sizing:border-box;}
.main-intro .banner .ttl h1 {position:relative;;padding-bottom:3rem;margin-bottom:5rem;color:#fff;}
.main-intro .banner .ttl h1::before {position:absolute;width:5rem;height:1px;bottom:0;left:50%;display:block;content:"";z-index:1;}
.main-intro .banner .ttl h1::before {transform:translateX(-50%);background-color:#fff;}
.main-intro .banner .ttl strong {display:block;font-size:4rem;line-height:5rem;font-weight:600;}
.main-intro .banner .ttl span {display:block;font-size:2rem;line-height:3rem;font-weight:600;margin-top:1.5rem;}
.main-intro .banner .icon {position:relative;max-width:1000px;margin:auto;z-index:5;}
.main-intro .banner .icon .into {width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-around;}
.main-intro .banner .icon .into a {color:#fff;text-align:center;}
.main-intro .banner .icon .into a i {display:block;font-size:3.5rem;line-height:4.5rem;}
.main-intro .banner .icon .into a span {font-size:1.8rem;line-height:2.8rem;margin-top:1rem;display:block;}
.main-intro .banner .cover {position:absolute;top:0;left:0;width:100%;height:100%;background-attachment:fixed;}
.main-intro .intro {display:flex;flex-wrap:wrap;padding-top:10rem;}
.main-intro .intro .img {position:relative;width:70%;padding-bottom:calc(56.25% / 10 * 7);}
.main-intro .intro .img .cover {position:absolute;width:100%;height:100%;}
.main-intro .intro .txt {position:relative;width:30%;}
.main-intro .intro .txt .into {color:#fff;transform:translate(-5%, 20%);}
.main-intro .intro .txt .into h2 {font-size:3rem;line-height:5rem;font-weight:600;}
.main-intro .intro .txt .into p {font-size:1.5rem;line-height:2.5rem;color:rgb(255, 255, 255, .8);margin:3rem 0;font-weight:400;}
.main-intro .intro .txt .into a {font-size:1.4rem;line-height:2.4rem;font-weight:400;color:#fff;transition:opacity .3s;}
.main-intro .intro .txt .logo {position:absolute;bottom:3%;right:3%;opacity:.8;}
@media (hover: hover) {
    .main-intro .intro .txt .into a:hover {opacity:.7;}
}
@media screen and (max-width:1600px) {
    .main-intro .intro .img {width:65%;padding-bottom:calc(56.25% / 10 * 6.5);}
    .main-intro .intro .txt {width:35%;}
}
@media screen and (max-width:1300px) {
    .main-intro .intro {display:block;padding:10rem 1rem;box-sizing:border-box;}
    .main-intro .intro .img {width:100%;height:calc(100vw / 16 * 9);min-height:350px;padding-bottom:0;}
    .main-intro .intro .txt {width:98%;margin:auto;}
    .main-intro .intro .txt .into {transform:translate(0, 0);margin-top:3rem;}
    .main-intro .intro .txt .into h2 br,
    .main-intro .intro .txt .into p br {display:none;}
    .main-intro .intro .txt .logo {display:none;}
}
@media screen and (max-width:768px) {
    .main-intro .banner .cover {background-attachment:unset;}
    .main-intro .intro .txt .into p {font-size:1.7rem;line-height:2.7rem;}
    .main-intro .intro .txt .into a {font-size:1.6rem;line-height:2.6rem;}
}

/* animation */
.main-slide .frame .ttl {top:55%;opacity:0;transition:opacity .5s, top .5s;}
.main-slide.movmt .frame .ttl {top:50%;opacity:1;transition:opacity .8s, top .8s;}

.main-product .ttl .into h1 {transform:translateY(20%);opacity:0;transition:opacity .5s, transform .5s;}
.main-product .ttl.movmt .into h1 {transform:translateY(0);opacity:1;transition:opacity .8s, transform .8s;}
.main-product .product .lnb {transform:translateX(-10%);opacity:0;transition:opacity .5s, transform .5s;}
.main-product .product .cont {transform:translateX(5%);opacity:0;transition:opacity .5s, transform .5s;}
.main-product .product.movmt .lnb {transform:translateX(0);opacity:1;transition:opacity .8s, transform .8s;}
.main-product .product.movmt .cont {transform:translateX(0);opacity:1;transition:opacity .8s, transform .8s;}

.main-intro .banner .ttl .into {transform:translateY(20%);opacity:0;transition:opacity .5s, transform .5s;}
.main-intro .banner .icon .into {transform:translateY(20%);opacity:0;transition:opacity .5s, transform .5s;}
.main-intro .banner .ttl.movmt .into {transform:translateY(0);opacity:1;transition:opacity .8s, transform .8s;}
.main-intro .banner .icon.movmt .into {transform:translateY(0);opacity:1;transition:opacity .8s, transform .8s;}

.main-intro .intro .img {transform:translateX(-5%);opacity:0;transition:opacity .5s, transform .5s;}
.main-intro .intro .txt {transform:translateX(5%);opacity:0;transition:opacity .5s, transform .5s;}
.main-intro .intro.movmt .img {transform:translateY(0);opacity:1;transition:opacity .8s, transform .8s;}
.main-intro .intro.movmt .txt {transform:translateY(0);opacity:1;transition:opacity .8s, transform .8s;}