@import url("https://unpkg.com/pretendard@1.3.9/dist/web/static/pretendard.css");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    text-decoration: none;
    list-style: none;
    display: block;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

:root {
    font-size: 100%;
    line-height: 1.6;
    --blk: #000;
    --wht: #FFFFFF;
    --font-shadow: 0 2px 3px rgba(0, 0, 0, .5);
}

h1 {
    color: #EFA300;
    text-align: center;
    font-size: 5rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: -1.28;
}

h2 {
     color: #FFF;
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -0.64;
}

p {
    color: #FFF;
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -0.64;
}



/* ------------헤더끝 */

.sect1 {
    background-image: url(images/main-bg.jpg);
    max-width: 100%;
    height: 100vh;
    object-fit: cover;
    overflow: hidden;
    background-position: center;

}

.banner-img {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap-reverse;
    justify-content: center;
    margin-top: 5rem;
    padding: 2rem;


}

.sect1 img {
    display: flex;
    max-width: 100%;
    height: 100%;
    align-items: flex-end;
    padding: 2rem;

}

/* 
----------메인배너끝 */

.sect2 {
    background: linear-gradient(180deg, #000 13.82%, #EFA300 30.11%, #FFF 41.95%, #fff);
    max-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.sect2 .karaguchi{
    padding: 2rem;
    max-width: 100%;
}

.pro1-1:hover {
    transform-origin: center center;
    transform: scale(1.05);
    transition: transform 1s ease-in-out;
}

.pro1-1 {
    position: static;

    z-index: 500;
    top: 0%;
}

.product-bg1 {
    position: absolute;
    top: 33%;
    z-index: -0;
    max-width: 100%;
    min-width: 60%;

}

.pro1-1box {
    position: relative;
    align-items: center;
    z-index: 500;
}

.mid-txt {

    display: flex;
    z-index: 5;
    position: absolute;
    top: 45%;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.mid-txt p {
    color: #1b1b1b;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;

}

.mid-tl,
.mid-tr {
    text-align: center;
    padding: 2rem;
    box-sizing: border-box;
    width: 18rem;
    height: 11rem;
    border-radius: 2rem;
    background: linear-gradient(180deg, rgba(239, 163, 0, 0.50) 0%, rgba(255, 238, 0, 0.50) 100%);
    box-shadow: -3px -3px 4px 0px rgba(0, 0, 0, 0.14) inset, 3px 2px 4px 0px rgba(255, 255, 255, 0.60) inset, 10px 14px 26.3px 0px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(6.449999809265137px);
}

.Xbox {
    height: 25rem;
}

.Xbox1 {
    height: 40rem;
}

.section2-txt {
    margin: 5rem auto;
    text-align: center;
    padding: 2rem;
}


.feature4 {
    display: flex;
    flex-wrap: wrap;
    margin: .8rem;
    padding: .5rem;
    justify-content: space-evenly
}

.feature4 h2 {
    color: #1b1b1b;
    text-align: center;
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -0.64px;
    margin-bottom: 20px;
}

.feature4 p {
    color: #1b1b1b;
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.64px;
}

.feature4-1,
.feature4-2,
.feature4-3,
.feature4-4 {
    display: flex;
    flex-direction: column;
    align-content: center;
    margin: 0 2rem;
}

.feature4-1 img,
.feature4-2 img,
.feature4-3 img,
.feature4-4 img {
    width: 20rem;
    margin-bottom: 2rem;

}

.read-more {
    text-align: right;
    font-size: 1.5rem;
    padding: 1rem;
    width: 100%;
    height: 150%;
}
.read-morebk{
    text-align: right;
    font-size: 1.5rem;
    padding: 2rem;
    width: 100%;
    color: #fff;
    background-color: #000;

}
.read-morebk2{
    text-align: right;
    font-size: 1.5rem;
    padding: 2rem;
    width: 100%;
    color: #fff;
    background-color:#1b1b1b;

}
.taste-graph-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 2rem; /* 좌우 여백 추가 */
}

.taste-graph-container img {
    max-width: 100%; /* 컨테이너 너비에 맞춰 이미지 크기 조절 */
    height: auto; /* 이미지 비율 유지 */
    padding: 0; /* sect2 img의 padding을 무시 */
}
/* 
-----sect2 */
/* 
sect3------ */


.media {
    background-color: #000;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    margin: auto;
    position: relative;
    /* display: block; */
    justify-content: center;
    height: 100%;
    overflow: hidden;
}

.media h1,
.sect7 h1 {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: -1.28px;
    margin-top: 5%;
}

p {
    color: #FFF;
    font-size: 48px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: -0.96px;
}

em {
    text-decoration: none;
    color: #FFF;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 49px;
    letter-spacing: -0.64px;
}

.media {
    top: 30px;
    height: 100%;
    padding-bottom: 10rem;
}

.youtube1 {
    margin-top: 5%;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 비율 */
    height: 0;
    overflow: hidden;
}

.youtube1 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sect4 {
    background: linear-gradient(180deg, #000 13.82%, #EFA300 30.11%, #FFF 41.95%, #fff);
    background-size: cover;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 100px;
}

.sec2-top {
    text-align: center;
    margin-top:100px;

}

.namacan {
    width: 535px;
    margin: 0 auto;

}

.sec2-top h1 {
    color: #EFA300;
    font-size: 64px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.sec2-top h2 {
    color: #FFF;
    font-size: 48px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;

}

.sec2-top p {
    color: #FFF;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;

}

.product-bg2 {
    width: 100%;
    bottom: 10%;
    left: 0px;
    position: absolute;
}

.sec2-mid {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.pro2-1 {
    z-index: 2;
    position: absolute;
    animation: bounce-ball 2s linear infinite;
}

@keyframes bounce-ball {
    0% {
        top: 0;
    }

    35% {
        top: 30px;
        animation-timing-function: ease-in-out
    }

    100% {
        top: 0px;
        animation-timing-function: ease-in-out
    }
}


.mid2-txt {
    max-width: 1340px;
    display: flex;
    flex-wrap: wrap;
    z-index: 5;
    justify-content: space-between
}
.mid2-txt h2 {
    color: #fff;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
}
.mid2-txt p {
    color: #1b1b1b;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}

.mid-t1,
.mid-t2,
.mid-t3,
.mid-t4,
.mid-t5 {
    text-align: center;
    padding: 32px;
    box-sizing: border-box;
    width: 250px;
    height: 165px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(239, 163, 0, 0.50) 0%, rgba(255, 238, 0, 0.50) 100%);
    box-shadow: -3px -3px 4px 0px rgba(0, 0, 0, 0.14) inset, 3px 2px 4px 0px rgba(255, 255, 255, 0.60) inset, 10px 14px 26.3px 0px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(6.449999809265137px);
}
.Xbox2 {
    height: 52rem;
}
/* 섹션5시작 */
.sect5 {
    background-color: #fff;
    background-position: center;
    background-size: 100% 100%;
    margin: auto;
    position: relative;
    display: flex;
    align-items: center;
    height: 546px;
    overflow: hidden;
    justify-content: center;
    flex-wrap: wrap;
}

.sec5-txt-box h1 {
    font-size: 34px;
    color: #1b1b1b;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: -0.96px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-align: left;
    margin-bottom: 20px;
}

.sec5-txt-box p {
    color: #1b1b1b;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -0.64px;
    text-align: left;
}

.sec5-txt-box {
    display: flex;
    flex-direction: column;
}


.sec5-img-box {
    max-width: 1400px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    flex:1
}
.sec5-img-box img{
    width: 44%;
}
/* 섹션5끝 */

.sect6 {
    height: 100vh;
    background: url(images/product-bg3.png) no-repeat center;
    background-size: 2400px 640px;
    background-position-Y: 1400px;
    position: relative;
    height: 1900px;
    display: flex;
    flex-direction: column;
}

.s6-pro {
    display: flex;
    width: 1079px;
    margin: 100px auto;
    justify-content: space-around;
    flex-wrap: wrap
}

.sect6 h1 {
    color: #1b1b1b;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-top: 300px;
    margin-bottom: 0px;
}

.sect6 h2 {
    color: #1b1b1b;
    text-align: center;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 49px;
    margin-bottom: 20px;
}

.sect6 p {
    color: #1b1b1b;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
}

.battle,
.can,
.draft,
.nama-can {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: flex-end
}
/* 
.nama-can {
    width: 11%;
} */

/* 섹션6끝 생맥주캔*/

/* 섹션7시작 뉴스 */
.sect7 {
    background-color: #1b1b1b;
    background-position: center;
    background-size: 100% 100%;
    margin: auto;
    position: relative;
    display: block;
    align-items: center;
    height: 1146px;
    overflow: hidden;
}

.sect h1 {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: -1.28px;
    margin-top: 5%;
}

.sect7 h2 {
    color: #fff;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 20px;
}

.sect7 p {
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
}

.news-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 200px;
}

.news-l {
    /* width: 1200px; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.news-l img {
    width: 30%;
    margin: 30px;
}

.nl-txt {
    display: block;
    width: 593px;
    margin: 30px;
}

.news-r {
    /* width: 1200px; */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.news-r img {
    width: 30%;
    margin-right: 40px;
    margin: 30px;
}

.nr-txt {
    display: block;
    width: 593px;
    margin: 30px;
}