@charset "UTF-8";
/* Hidden */
.hidden {position: absolute; top: -9999px; left: -9999px;}
.board-tab {display: none;}

.pc-br {display: block;}

.grand-area {display: flex; justify-content: center; align-items: center; flex-direction: column; width:1360px; height:791px; padding:60px 0; margin:0 auto; border-radius:24px; background:url(../images/grand-bg.jpg) center center / cover no-repeat;}
.grand-area .grand-tit {width: 100%; display: block; text-align: center; color:#fff; font-size:40px; font-weight: 700; line-height: 56px;}
.grand-area .grand-txt {margin-top: 28px; text-align: center; color: #fff; font-size: 18px; font-weight:300; line-height: 28px;}
.grand-area .grand-txt strong {font-weight: 700;}


.product-info {display: flex; justify-content: space-between; align-items: stretch; gap:32px; width:753px; padding:34px 40px 40px; margin-top: 75px; border-radius:24px; border: 1px solid #ecedef; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(1.5px);}
.product-img {flex:0 0 250px; display: flex; justify-content: center; align-items: center;}


.product-img img {width:80%; height: auto; max-height:80%; object-fit:contain;}

.product-details {flex:1; color: #fff;}
.product-details .tit {display: block;font-size: 24px; font-weight: 600; line-height:normal}
.product-details .product-specs {margin-top: 26px;}
.product-details .product-specs li {display: flex; justify-content: space-between; align-items: center;}
.product-details .product-specs li ~ li {margin-top: 16px;}
.product-details .product-specs li strong {width:125px; font-size: 16px; font-weight: 600; line-height: normal;}
.product-details .product-specs li p { flex:1; text-align: left; font-size: 16px; font-weight: 300; line-height: normal;}

.product-details .tag {padding-top: 24px; margin-top: 24px; border-top: 1px solid #ecedef;}
.product-details .tag ul {display: flex; gap: 8px; flex-wrap: wrap;}
.product-details .tag li { flex: 0 0 auto; padding:3px 6px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 1.5; border: 1px solid #FFF; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(1px);}
.product-details .tag li strong {font-size: 13px; font-weight: 600; line-height: 1.5;}


    @media (max-width: 1360px) {

        .grand-area {width: 100%; height:auto; padding:40px 0;}

    }

    @media (max-width: 1024px) {

        .pc-br {display:none;}

        .grand-area .grand-tit {padding:0 40px; font-size: 36px;}
        .grand-area .grand-txt {padding:0 40px;}

    }

    @media (max-width: 900px) {
        .product-info {width:calc(70% - 80px); flex-direction: column; justify-content: center; align-items: center; padding:40px; gap: 70px;}
        .product-details .tit {text-align: center;}
        .product-details .product-specs li p {text-align: right;}
        .product-img {flex: 1 1 auto; width: 55%;}
        .product-img img {width: 100%; max-height:100%;}
        
    }

    @media (max-width: 768px) {

        .grand-area .grand-tit {font-size: 32px;}
        .grand-area .grand-txt {font-size: 16px;}

        .product-info {width:calc(100% - 80px); padding:40px; gap: 70px;}
        .product-img {flex: 1 1 auto; width: 55%;}
        .product-img img {width: 100%; max-height:100%;}

    }

    @media (max-width: 500px) {

        .grand-area {padding: 40px 0 30px;}

        .grand-area .grand-tit {padding:0 20px;}
        .grand-area .grand-txt {padding:0 20px;}
        .product-info {width:calc(100% - 40px); padding:40px 30px 30px} 
        .product-details .product-specs li strong {width: 100px;}

    }



.brand-info-wrap h3 {margin-top: 140px; margin-bottom: 42px; text-align: center; font-size: 34px; font-weight: 500; color: #333; font-family:'Dream Medium';}
.brand-info-wrap h3 strong {color: #0080FB; font-weight: 700;}

.four {width:1135px; margin:0 auto;}
.four ul {display:flex; gap:20px; height:400px}
.four li {position:relative; flex:1; height:100%; padding:40px; border-radius: 24px; transition: all .8s cubic-bezier(.25,.8,.25,1); overflow: hidden; background-size:cover; background-position:center; }
.four li:before {display: block; content:""; position: absolute; inset: 0; pointer-events: none;  background: linear-gradient( to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));}




@media (max-width: 1024px){
.four {width:100%}
.four ul {flex-direction: column; height:auto; gap: 60px;}
.four li {flex:0 0 100% !important; aspect-ratio: 15/10; transition: none !important}
.four li .hover-txt {position: absolute; left:0; top:0; display: block !important; opacity: 1 !important; transform: translateX(0) !important;}
.four li .hover-txt i {display:none;}
.four li .hover-txt strong {padding:40px; font-size: 22px; line-height: 1.4; font-family:'Dream Medium'; font-weight: 500;}
.four li .hover-txt p {font-size: 18px; padding:0 40px; margin-top: 0; line-height: 30px;}
.four li .not-hover-txt {display: none !important;}
}



@media (max-width: 560px){
.four li {aspect-ratio: 4/3;}
.four li .hover-txt strong {padding:30px; line-height: 1.4;}
.four li .hover-txt p {font-size: 16px; padding:0 30px; line-height: 26px;}

}





    /* @media (max-width: 1024px) {

            .four {width: 100%;}
            .four ul {overflow-x: auto; scroll-snap-type: x proximity;}
            .four ul li {flex:0 0 400px !important; scroll-snap-align: start; transition: none !important}
            .four li .hover-txt {display: block !important; opacity: 1 !important; transform: translateX(0) !important;}
            .four li .not-hover-txt {display: none !important;}

    }

    @media (max-width: 1024px) {

        .four ul {height:380px}

    }

    @media (max-width: 768px) {

        .brand-info-wrap h3 {margin-top: 120px; font-size: 30px;}
        .four ul {height:350px}

    } */



.four li.active,
.four li:hover {flex:0 0 400px;}
.four li:not(.active),
.four li:hover ~ li {flex:0 0 225px;}
.four .item01 { background-image: url('../images/item01.png'); }
.four .item02 { background-image: url('../images/item02.png'); }
.four .item03 { background-image: url('../images/item03.png'); }
.four .item04 { background-image: url('../images/item04.png'); }


.hover-txt {line-height: 1.3; opacity: 0;}
.hover-txt strong {display: block; width: 100%; color: #fff; line-height:24px; font-size: 18px; padding-left: 30px; font-weight: 600; overflow: hidden; letter-spacing:-0.5px}
.hover-txt i {position: absolute; left:0; top:1px; display: inline-block; width:22px; height:22px; margin-right:8px; text-align: center; line-height:20px; font-size: 13px; font-weight: 600; color: #fff; border-radius: 2px; border: 1px solid #fff; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(1.5px);}
.hover-txt p {margin-top: 21px; font-size: 14px; font-weight: 500; line-height: 22px; color: #fff;}

.not-hover-txt {position: absolute; display: block; left:0; top:0; width:100%; padding:40px; opacity: 0; color: #fff;}
.not-hover-txt strong {display: block; width: 100%; color: #fff; line-height:26px; font-size: 18px; font-weight: 600; overflow: hidden;}

.four li.active .hover-txt {opacity: 1; transform: translateX(0); transition: all 0.3s 0.5s;}
.four li.active .not-hover-txt {opacity: 0; transform: translateX(24px); transition: all 0.1s;}

.four li:not(.active) .hover-txt {opacity: 0; transform: translateX(-24px); transition: all 0.1s;}
.four li:not(.active) .not-hover-txt {opacity: 1; transform: translateX(0); transition: all 0.3s 0.5s;}