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

    #productBanner{
        width: 100%;
    }

    #grey{
        background-color: #7c858c;
        width: 100%;
        height: 15vh;
    }
    #greyFlex{
        display: flex;
        justify-content: center;
        align-items: center;
    
    }
    #greyFlex p{
        width: 300px;
        height: 14vh;
        font-size: 35px;
        font-weight: 600;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        opacity: 0.5;
    }

    #blueTitle{
        background-color: #001b70;
        width: 100%;
        /* height: 10vh; */
    }

    #blueWrap{
        text-align: center;
        padding: 20px;
        position: relative; /* 버튼의 절대 위치 기준점 */
        width: 888px;
        margin: 0 auto;
    }
    #blueTxt{
        font-size: 35px;
        font-weight: 600;
        color: #ffffff;
    }
    #blueTxtEng{
        margin-top: 10px;
        font-size: 28px;
        font-weight: 500;
        color: #ffffff;
    }


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

      /* 2. 버튼 기본 스타일 정의 (변경 없음) */
        /* -------------------------------------- */
        .styled-button {
            /* 레이아웃 및 크기 */
            padding: 12px 32px; 
            font-size: 1.125rem; 
            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{
      
    } */

    #mainImgWrap{
        display: flex;
        justify-content: center;
          /* background: linear-gradient(to bottom, #f4f4f4, #f0f0f0,#efefef),
         linear-gradient(to bottom, #dadada, #d1d1d1, #d4d4d4);
        background-position: left top, right top;
        background-size: 50% 100%, 50% 100%;
        background-repeat: no-repeat; */
    }
    #mainImg{
        /* width: 100%; */
        /* max-width: 1200px;
        max-height: 750px;
        width: auto;
        height: auto; */
        width: 1200px;
        height: 500px;
        object-fit: contain;
    }
   
    #imgFlex{
        background-color: #7c858c;
        display: flex;
        justify-content: center;
        padding: 0;
        /* width: 1200px; */
        margin: 0 auto;
    }
    #imgFlex li{

    }
    #imgFlex li img{
        margin: 10px 2px;
        background-color: #ffffff;
        /* width: 16vw; */
        object-fit: fill;
        opacity: 0.5;
        transition: opacity 2s ease;
        object-position: center;
        width: 172px;

    }
    #imgFlex li:first-child img{ 
        opacity: 1;
    }

    #mainTxtWrap{
        display: flex;
        justify-content: center;
        margin: 100px auto;
    }
    #mainTxt{
    
        width: 1200px;
        font-size: 25px;
        line-height: 45px;
        font-weight: 500;
        color: #737373;
    }



    #features{
        margin-bottom: 100px;
        background-color: #efedee;
        padding-bottom: 100px;
    }
    #iconTitle{
        padding-top: 100px;
    }
    .iconLine{
        display: flex;
        justify-content: space-around;
        width: 1200px;
        margin: 0 auto;
    }
    .icons{
        width: 120px;
        margin: 50px 50px 20px;
    }
    .iconTxt{
        width: 220px;
        font-size: 18px;
        text-align: center;
        color: #6e6d6d;
    }


    .bigImgWrap{
        display: flex;
        justify-content: center;
        
        flex-direction: column;
        align-items: center;
        margin-bottom: 50px;
    }
    .bigImg{
        max-height: 80vh;
        max-width: 1200px;
        /* width: 590px;
        margin: 100px 10px 0; */
        margin-bottom: 10px;
    }
    /* #exImg{
        margin: 0 auto 100px;
        display: flex;
        justify-content: center;

    }
    #exImg img{
        width: 1200px;
    } */
    #plusImg{
        
        display: flex;
        justify-content: center;
        margin-bottom: 150px;
        
        flex-direction: column;
        align-items: center;
    }
    .plusTxt{
        font-size: 16px;
    }
    #realImg{
        /* display: grid;
        grid-template-columns: repeat(2, 590px); 
        grid-gap: 10px; 
        justify-content: center;  */
        margin-bottom: 150px;
        
        display: flex;
        justify-content: center;
        
        flex-direction: column;
        align-items: center;
    }
    #pageImg{
        
        /* display: grid;
        grid-template-columns: repeat(2, 590px); 
        grid-gap: 10px;
        justify-content: center; */
        
        margin-bottom: 100px;
        display: flex;
        justify-content: center;
        margin-bottom: 100px;
        
        flex-direction: column;
        align-items: center;
    }
    .pImg{
        width: 590px;
        margin: 10px 10px;
    }
    .confirmImg{
        width: 590px;
        height: 400px;
        margin: 10px 10px;
    }

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

    .title{
        font-size: 35px;
        color: #001b70;

        padding-bottom: 1vw;
        font-weight: bold;
        text-align: center;
    }
    /* #tableTitle{
        font-size: ;
    } */
    #table{
        font-size: 18px;
        margin: 100px auto;
    }
    .tg{
        margin: 0 auto;
    }

    .tg-baqh{	
        border-top: 1px solid #d0d2d3;
        color:#10181f ;
        padding: 5px 0 5px 15px;
        width: 490px;
        text-align: left;
        font-size: 20px;
        background: #efedee;
        font-weight: 500;
    }
    .tg-baqh3{	
        border-top: 1px solid #d0d2d3;
        color:#10181f ;
        padding: 5px 0 5px 15px;
        text-align: left;
        font-size: 20px;
        background: #efedee;
        font-weight: 500;
    }
    .tg-baqh2{	
        border-top: 1px solid #d0d2d3;
        color:#10181f ;
        padding: 5px 0 5px 15px;
        text-align: left;
        width: 320px;
        font-size: 20px;
        background: #efedee;
        font-weight: 500;
    }
    .tg-c3ow{
        width: 618px;
        border-top: 1px solid #d0d2d3;
        color: #7c858c;
        padding: 5px 0 5px 15px;
        text-align: left;
        font-size: 20px;
        font-weight: 300;
    }
    .tg-baqh4{	
        border-top: 1px solid #d0d2d3;
        border-bottom: 1px solid #7c858c;
        color:#10181f ;
        padding: 5px 0 5px 15px;
        text-align: left;
        width: 320px;
        font-size: 20px;
        background: #efedee;
        font-weight: 500;
    }
    .tg-c3ow4{
        width: 618px;
        border-top: 1px solid #d0d2d3;
        border-bottom: 1px solid #7c858c;
        color: #7c858c;
        padding: 5px 0 5px 15px;
        text-align: left;
        font-size: 20px;
    }
    .tg-baqh5{	
        border-top: 1px solid #7c858c;
        color:#10181f ;
        padding: 5px 0 5px 15px;
        text-align: left;
        width: 320px;
        font-size: 20px;
        background: #efedee;
        font-weight: 500;
    }
    .tg-c3ow5{
        width: 618px;
        border-top: 1px solid #7c858c;
        color: #7c858c;
        padding: 5px 0 5px 15px;
        text-align: left;
        font-size: 20px;
    }
/* // style="margin: 2vh auto; width: 1108px; */
    #price{
        font-size: 18px;
        margin-top: 20px;
        text-align: center;
        margin-bottom: 100px;
    }

    [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;
      }