body{
    font-size: 0px;
    padding: 0px;
    margin: 0px;
    font-family: 'appleM', sans-serif;
}
p{
    margin: 0px;
}

#productBanner{
    width: 100%;
    margin-top: 80px;
}

#grey{
    background-color: #7c858c;
    width: 100%;
}
#greyFlex{
    display: flex;
    justify-content: center;
    align-items: center;

}
#greyFlex p{
    width: 25vw;
    /* height: 9vh; */
    padding: 3vh 0;
    font-size: 3.5vw;
    text-align: center;
    font-weight: 600;
    color: #ffffff;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    opacity: 0.5;
    text-align: center;
}

#blueTitle{
    background-color: #001b70;
    width: 100%;
    /* height: 10vh; */
}
#blueWrap{
    text-align: center;
    padding: 3vh 0;
    position: relative;
}
#blueTxt{
    font-size: 4vw;
    font-weight: 600;
    color: #ffffff;
}
#blueTxtEng{
    margin-top: 10px;
    font-size: 3vw;
    font-weight: 500;
    color: #ffffff;
}



    .p-6{
     /* 버튼을 오른쪽 끝에 고정 (Absolute Positioning) */
            position: absolute;
            right: 10px; /* 오른쪽 여백 */
            
            /* 버튼을 #blueTitle 내부에서 수직 중앙 정렬 */
            top: 50%;
            transform: translateY(-50%);
            padding: 0; 
    }

      /* 2. 버튼 기본 스타일 정의 (변경 없음) */
        /* -------------------------------------- */
        .styled-button {
            /* 레이아웃 및 크기 */
            padding: 1vh 3vw; 
            font-size: 3vw; 
            font-weight: 600; 
            border-radius: 0.5rem; 
            cursor: pointer;

            /* 색상 및 테두리 (요청 조건) */
            color: #ffffff; 
            background-color: transparent; 
            border: 2px solid #ffffff; 

            /* 그림자 및 애니메이션 (UX 개선) */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
            transition: all 300ms ease; 
        }

        /* 3. 호버 (마우스 오버) 스타일 정의 */
        .styled-button:hover {
            /* 마우스 오버 시 배경을 흰색으로 변경 */
            background-color: #ffffff; 
            /* 마우스 오버 시 글씨를 001b70 색상으로 변경 */
            color: #001b70;
            
            /* 그림자 강화 및 약간의 확대 효과 */
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 
            transform: scale(1.05); 
        }
        
        /* 4. 포커스 스타일 (접근성 및 키보드 사용) */
        .styled-button:focus {
            outline: none;
            box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5); 
        }


#selImg{
    position: relative;
}

#mainImgWrap{
    display: flex;
    justify-content: center;
}
#mainImg{
    width: 100%;
}
#iconLeft{
    position: absolute;
    top: 50%;
    left: 1%;
    color: #ffffff;
}
#iconRight{
    position: absolute;
    top: 50%;
    right: 1%;
    color: #ffffff;

}
.realIcon{
    /* width: 50px;
    height: 50px; */
    font-size: 50px;
}


#imgFlex{
    background-color: #7c858c;
    display: flex;
    justify-content: center;
    padding: 0;
    /* width: 100vw; */
    margin: 0 auto;
}
#imgFlex li img{
    margin: 1vw 0.2vw;
    width: 14vw;
    /* width: 16.6vw; */
    opacity: 0.5;
    background-color: #ffffff;
}
#imgFlex li:first-child img{
    opacity: 1;
}

#mainTxtWrap{
    display: flex;
    justify-content: center;
    margin: 5vh auto 10vh;
}
#mainTxt{

    width: 80vw;
    font-size: 3.5vw;
    line-height: 7vw;
    font-weight: 500;
    color: #737373;
}



#features{
    background-color: #efedee;
    padding-bottom: 5vh;
}
#iconTitle{
    padding-top: 10vh;
}
.iconLine{
    display: flex;
    justify-content: space-around;
    width: 80vw;
    margin: 0 auto;
}

.icons{
    width: 30vw;
    margin:0 5vw;
    /* margin: 50px 50px 20px; */
}
.iconTxt{
    width: 40vw;
    font-size: 3vw;
    /* margin: 0 50px 0; */
    text-align: center;
    margin: 2vh auto 3vh;
    color: #6e6d6d;
}

/* #tableWrap{
    display: flex;
    justify-content: center;
    font-size: 18px;
} */

.title{
    font-size: 5vw;
    color: #001b70;

    margin-bottom: 5vh;
    /* margin-bottom: 5vh;
    padding-bottom: 1vw; */
    font-weight: bold;
    text-align: center;
}
/* #tableTitle{
    font-size: ;
} */

#tableMaster{
    margin: 10vh auto;
}
#table{
    font-size: 18px;
    margin: 0 auto;

}

/* // style="margin: 2vh auto; width: 1108px; */


.specWrap{
    margin: 0 auto;
    width: 80vw;
} 
.specTxt{
    font-size: 3vw;
    /* padding-left: 10px; */
    padding: 1vw 0 1vw 2vw ;
}

#price{
    font-size: 2.5vw;
    margin-top: 3vh;
    text-align: center;
}

.bigImgWrap{
    display: flex;
    justify-content: center;
    margin: 10vh auto;

    flex-direction: column;
    align-items: center;

}
.bigImg{
    max-height: 90vh;
    max-width: 90vw;
}

[data-scroll] {
    opacity: 0;
    will-change: transgorm, scale, opacity;
    transform: translateY(6rem) scale(0.93);
    transition: all 1.5s cubic-bezier(0.165,0.84,0.44,1);
  }
  [data-scroll="in"] {
    opacity: 1;
    transform : translateY(0) scale(1);
  }
  [data-scroll="out"] {
    opacity: 0;
  }