@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Forum&display=swap');
    :root {
        --font1:  "Outfit", sans-serif;
        --font2:  "Forum", serif;
        --color1: #BEA05B;
        --color2: #444;
        --color3: #676767;
        --color4: #112337;
        --color5: #C02B0A;
        --color6: #444444;
        --color7: #131313 ;
        --color8: #cccccc;
      
        }

    *{margin: 0;padding: 0;box-sizing: border-box;  font-weight: normal; font-family: var(--font1);}
    .w{width: 1200px;margin: 0 auto;}
    .fsb{display: flex;justify-content: space-between;}
    .fsa{display: flex;justify-content: space-around;}
    .fcc{display: flex;justify-content:center; align-items: center;}
    .e1{text-align: center;}
    a:focus, 
    button:focus,
    textarea:focus, 
    input:focus{ outline:none;}
    button{cursor:pointer; background: none; border: none;}

    /* common  */
    h2 {
        font-size: 42px; 
        color: var(--color2); 
        font-weight: 500;
    }
    p {
        font-size: 16px; 
        color: var(--color3); 
        font-weight: 300; 
        line-height: 24px;
    }
    li { 
        position: relative;
        padding-left: 35px;
        margin-bottom: 10px;
        list-style: none;
        font-size: 16px; 
        color: var(--color3); 
        font-weight: 300; 
    }
    li::before {
        content: "✔";
        position: absolute;
        left: 0;
        color: var(--color1); 
        font-weight: bold;
        border-radius: 50%;
        width: 12px;
        height: 12px;
        border: 2px solid var(--color1);
        text-align: center;
        font-size: 10px;
        justify-content: center;
        display: flex;
        align-items: center;
        top: -1px;
    }
    .h22 {
         color: var(--color1);
    }
    .ko1 {
        color: var(--color5);
        font-size: 14px;
    }
    .ok1 {
        color: green;
    }
    /* button common 01 */
      .za1 {
            display: inline-flex;
            align-items: center;
            background-color:#bea05b;
            color: white;
            padding: 10px 30px;
            text-decoration: none;
            border-radius: 25px;
            font-weight: 600;
            transition: background-color 0.3s ease;
            text-shadow: none;
            display: flex;
            align-items: center;
            justify-content: center;
            width: fit-content;
            text-transform: uppercase;
            font-size: 14px;
            margin: 20px 0;
            transition: transform 0.3s ease;
            border: none;
            cursor: pointer;
            
        }

        .za1:hover {
            transform: translateY(-2px);

        }
        .zs1 {
            margin-right: 10px;
        }
        .zd2{
            width: 27px; 
            height: 27px; 
            display: flex; 
            align-items: center; 
            background: #CCB57F; 
            border-radius: 30px; 
            justify-content: center;
            margin-left: 5px;}
        .zi1{
            width: 18px; 
            display: flex; 
            align-items: center;}



    /* Header */

        #i1 { 
            width: 100px; 
            display: flex; 
            align-items: center;
         }
        #n1 { 
            display: flex; 
            align-items: center; 
            margin-right: 30px; }
        #u1 { 
            display: flex; 
            align-items: center;
         }

        #hd {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10; 
            transition: background-color 0.3s ease-in-out;
        }
        #d2 {
              transition: all 0.3s ease;
        }
      

        #d0, #d1, #d2, #d3 { 
            display: flex; 
            align-items: center; 
        }
        #d1 { padding: 10px 70px; }
        .a1, .a3 {
            text-decoration: none;
            margin: 0 15px;
            text-transform: uppercase;
            font-weight: 600;
            font-size: 14px;
            color: #ffffff;
            opacity: 0.75;
            position: relative;
        }

        .a1::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #ffffff;
            transition: width 0.5s ease-in-out;
        }
        .a1:hover::after { 
            width: 100%;
        }
        .a1:hover { 
            opacity: 1;
        }
        .a3 { 
            padding: 7px 20px; 
            border-radius: 20px; 
            opacity: 1; 
            transition: opacity 0.2s ease-in-out;
        }
        .a3:hover { 
            opacity: 0.75;
        }

        .i2, .i3 {
            width: 20px;
            margin: 0 10px;
            position: relative;
        }
        #i4 {
            width: 35px;
        }
        #d4 {
            display: none;
        }


        .i3{
            opacity: 0.75;
        }

        .i3:hover{
            opacity: 1;
        }

        .i2:hover {
            animation: iconUp 0.2s forwards, iconFadeIn 0.2s 0.1s forwards;
        }
        #hd.scrolled {
            background-color: var(--color7);
        }


        @keyframes iconUp {
            0% { transform: translateY(0); opacity: 1; }
            100% { transform: translateY(-20px); opacity: 0; } 
        }

        @keyframes iconFadeIn {
            0% { transform: translateY(20px); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }


         /* footer  */

        #ft {
            background-color: var(--color7);
        }
        .d101 {
            width: 20%;
            flex-direction: column;
            display: flex;
        }
        .p100 {
            color: var(--color8); 
            padding: 10px 0;
        }
        #i102 {
            margin-bottom: 20px;
            width: 150px;

        }
        .hhh100 {
            color: var(--color1);
            font-family: var(--font2);
            font-size: 24px;
            text-transform: uppercase;
            margin-bottom: 20px;
        } 
        .hhh101 {
            margin: 20px 0; 
        }
        .i100 {
            width: 20px;
            height: 20px;
            margin-right: 15px;
        }
        .a100 {
            margin-bottom: 10px;
            color: var(--color8); 
            text-decoration: none;

        }
        .a100:hover {
            color: #676767;
        }
        #d103 {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        .s100 {
            color: var(--color8); 
            display: flex;
            align-items: center;
            text-decoration: none;
        }
        .s101 {
            padding-bottom: 15px;
        }
        .i103 {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }
        #d100 {
            padding: 80px 0;
        }
        .a101 {
            color: var(--color3);
            font-weight: 300;
            text-decoration: none;
        }
        #d105 {
            text-align: center;
        }
        #topBtn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 999;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            display: none;
            transition: opacity 0.3s ease;
            background-color: rgba(68, 68, 68, 0.7);
            padding: 10px;
            }
     
        #i104 {
            width: 25px;
            height: 25px;
        }

        #p101 {
            font-size: 13px;
            padding: 20px 0;
            border-top: 1px solid var(--color3);
        }


        /* responsive  */
        @media screen and (max-width: 1240px) {
        .w {
             width: 96%;
             margin: 0 auto;
         }
         /* header  */
         #d2 , #n1 {
            flex-direction: column;
         }
         #d1 {
            position: relative;
            padding: 20px 20px;
         }
         #d2 {
            position: absolute;
            width: 300px;
            top: 105px;
            background-color: var(--color2);
            padding: 10px 0;
            right:15px;
         }
        
         #d4 {
            display: block;
         }
         #n1 {
            margin-right: 0px;
         }
         .a1 , .a2 , #d3 {
            margin: 10px 0;
         }
         #d5 {
            display: none;
            transition: all 0.3s ease;
         }
         
         
        }

        @media screen and (max-width: 992px) {
            /* footer  */
            #d100 {
                flex-wrap: wrap;
            }
            .d101 {
                width: 43%;
                margin-bottom: 20px;
            }
        }

        @media screen and (max-width: 600px) {
            /* header  */
          #d2 {
            width: 100%;
            right: 0px;
          }

          /* footer  */
          .d101 {
            width: 100%;
          }
          #d100 {text-align: center; padding: 40px 0;}
          #d103 {align-items: center;}
          .p100 {
            padding: 10px 10%;
          }
          #d106 {
            margin-top: 20px;
          }
          #topBtn {
                padding: 5px;
            }
          #i104 {
            width: 22px;
            height: 22px;
        }
         #topBtn {
            right: 10px;
         }
         .x2s3 {
           flex-direction: column;
        }
        .s101 {
            align-items: center;
        }

          
          
        }