@charset "utf-8";

body { position: relative; background: #EFE1D8; overflow-y: scroll; }
body::before { content: ''; z-index: -1; position: fixed; width: 100%; height: 40px; left: 0; bottom: 0; background: url('../img/container_bg.png') bottom; }
body::after { content: ''; z-index: -1; position: fixed; aspect-ratio: 500/375; width: 100%; max-width: 1100px; left: 50%; top: 50%; transform: translate(-50%,-50%); background: url('../img/container_bg2.png') center/contain; }
    #container { min-height: 100vh; width: 100%; height: auto; max-width: 910px; margin:0 auto; padding: 0 20px; position: relative; color:white; }
    .outter-logo-wrap { z-index: 1; position: absolute; width: 100%; padding:20px; display: flex; justify-content: space-between; left: 0; top: 0; }
    .outter-logo-wrap img { width: auto; height:48px; }
    .outter-logo-wrap img:last-child { display: none; }
    .outter-title-wrap { position: absolute; width: 350px; z-index: 0; top:120px; left: 50%; transform: translate(-50%, -20%); opacity: 0; }
    .outter-title-wrap img { display: block; width: auto; height:30px; margin: 0 auto; }
    .outter-title-wrap img:last-child { width: 100%; height: auto; margin-top: 30px; }

    .card-wrap { position: relative; width: 100%; max-width: 580px; height: fit-content; aspect-ratio: 58/36; margin: 300px auto 0; opacity: 0; transform: translateY(20px); }
    .card-wrap > div { position: absolute; width: 100%; height:100%; left: 0; bottom: 0; }
    .card-wrap .card-back { background: url('../img/card_envelope_back.png?ver=251211') no-repeat center/cover; }
    .card-wrap .card-inner { width:90%; height:calc(100% - 32px); overflow: hidden; top: 25px; left:50%; bottom: auto; border-radius: 20px; box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.1); }
    .card-wrap .card-inner > div { height:100%; background: #020B43; }
    .card-wrap .card-front { pointer-events: none; background: url('../img/card_envelope_front.png?ver=251211') no-repeat center/contain; }
    .card-wrap .card-cover { pointer-events: none; }
    .card-wrap .card-cover .card-cover-inner { width: 100%; height: 100%; transform-style: preserve-3d; position: relative; transition: 0.5s ease-in; transform-origin: top; }
    .card-wrap .card-cover .card-cover-inner > div { width: 100%; height: 100%; position: absolute; top:0; left: 0; backface-visibility: hidden; }
    .card-wrap .card-cover .card-cover-inner .card-cover-inner-front { background: url('../img/card_envelope_cover.png?ver=251211') no-repeat center/contain; }
    .card-wrap .card-cover .card-cover-inner .card-cover-inner-back { transform: rotateY(180deg); background: url('../img/card_envelope_cover_back.png?ver=251211') no-repeat center/contain; }
    .card-wrap .card-cover:hover .card-cover-inner { transform: rotateX(180deg); }
    .card-seal { display: none; }
    /* .card-wrap .card-seal { width: 28%; aspect-ratio: 1/1; left:50%; bottom:50%; transform: translate(-50%, 50%); pointer-events: none; background: url('../img/card_seal.png') no-repeat center/contain; z-index: 5; } */

    .content-inner { width: 88%; max-width: 410px; display: grid; gap:40px; margin:40px auto 0; padding-bottom: 100px; }
    .sec-title:has(svg) { display: flex; align-items: center; gap:8px; margin-bottom: 14px; font-size: 29px; font-weight: 700; }
    .sec-title svg { flex-shrink: 0; width: 32px; height: 32px; }

    .content-top { position: relative; }

    .content-top-title { margin-top: 10px; gap:4px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
    .content-top-title h1 { font-size: min(36px, 8vw); font-weight: 700; }
    .content-top-title h2 { font-size: min(23px, 6vw); font-weight: 500; }
    .content-top-animation { position: relative; aspect-ratio: 124/48; width: 100%; }
    .content-top-animation .ab { position: absolute; inset: 0; }
    .content-top-animation .img-1 { display: flex; animation: scroll 10s linear infinite; }
    .content-top-animation .img-2 { animation: blink 2.1s linear infinite; opacity: 0; }
    .content-top-animation .img-3 { animation: blink 2.1s linear infinite; animation-delay: .7s; opacity: 0; }
    .content-top-animation .img-4 { animation: blink 2.1s linear infinite; animation-delay: 1.4s; opacity: 0; }
    
    @keyframes scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%);	}
    }
    
    @keyframes blink {
      0% { opacity: 0; }
      50% { opacity: 1; }
      100% { opacity: 0; }
    }

    .sec-01 { position: relative; border: 1px solid white; border-radius: 10px;}
    .sec-01 .sec-title { display: flex; align-items: center; justify-content: center; position: absolute; top:0; transform: translateY(-50%); left:5%; width: 90%; font-size: 20px; font-weight: 500; text-align: center; }
    .sec-01 .sec-title img { filter:saturate(0) brightness(10); margin:0 8px; }
    .sec-01 .sec-title::before { z-index: -1; content: ''; display: block; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 11, 67, 0.00) 0%, #020B43 10.35%, #020B43 90%, rgba(2, 11, 67, 0.00) 100%); }
    .sec-01 .sec-box { min-height: 100px; padding:16px 0; text-align: center; }
    
    .sec-02 { padding: 28px 0; color:var(--main-black); font-weight: 700; border-radius: 16px; border:1px solid white; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) -2.85%, rgba(242, 242, 242, 0.85) 115.67%); }
    .sec-02 .sec-title { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 27px; font-weight: 600; text-align: center; }
    .sec-02 .sec-title img { margin:0 8px; }
    .sec-02 .sec-box { position: relative; font-size: 19px; text-align: center; }
    .sec-02 .sec-box p { line-height: 1.4; }
    
    .sec-03 .sec-box { color:var(--main-black); border:1px solid white; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) -2.85%, rgba(242, 242, 242, 0.85) 115.67%); }
    .sec-03 .sec-box table { width: 100%; }
    .sec-03 .sec-box th { height: 35px; font-size: 16px; font-weight: 700; background: #CED0D6; border:1px solid #D7D8DF; }
    .sec-03 .sec-box th small { font-size: 14px; font-weight: 500; }
    .sec-03 .sec-box td { height: 35px; font-size: 14px; font-weight: 600; background: #D7D8DF; text-align: center; }
    .sec-03 .sec-box td small { font-size: 12px; font-weight: 500; }

    .sec-04 .sec-box p:nth-child(1) { font: 500 17px 'Noto Sans KR'; }
    .sec-04 .sec-box p:nth-child(2) { margin-top: 3px; font: 500 14px 'Noto Sans KR'; }
    .sec-04 .sec-box p:nth-child(3) { margin-top: 3px; font: 500 12px 'Noto Sans KR'; }

    .sec-05 .sec-title { position: relative; margin-bottom: 20px; align-items: start; }
    .sec-05 .sec-title a { position: absolute; left:66%; bottom:-4px; }
    .sec-05 .sec-title img { width: calc(100% - 40px); }
    .sec-05 ul { display: grid; grid-template-columns: repeat(3, 1fr); gap:6px; }
    .sec-05 li { border:1px solid white; border-bottom: 0; border-radius: 10px; background: #E4E6E8; position: relative; overflow: hidden; }
    .sec-05 li a { display: block; padding:8px 4px 74px; }
    .sec-05 .img-place { width: 100%; aspect-ratio: 113/74; position: absolute; left: 50%; bottom:0; transform: translateX(-50%); }
    .sec-05 .img-place img { position: absolute; width: 100%; left: 0; bottom:0; }
    .sec-05 h3 { padding-left:12px; font:600 10px 'Noto Sans KR'; position: relative; white-space: nowrap; }
    .sec-05 h3 img { position: absolute; left: 0; top:2px; }
    .sec-05 p { margin-top: 3px; margin-left:5px; font:500 9px 'Noto Sans KR'; }
    .sec-05 .more { position: absolute; padding: 4px 8px; right: 7px; bottom: 7px; background: white; border-radius: 50px; display: flex; align-items: center; gap:4px; }
    .ico-moving-1 { transform-box: fill-box; transform-origin: center; }
    .st1 {fill:none;stroke:#0473EA;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
    .sec-05 small { font-size: 7px; }

    @media screen and (max-width:768px){
      .outter-logo-wrap { display: none; }
      .card-wrap .card-inner { border-radius: 16px; }
    }
    @media screen and (max-width:500px){
      .sec-title:has(svg) { font-size: 26px; }
    }
    @media screen and (max-width:500px){
      /* !! 아이폰 스크롤 트리거 관련 오류 해결 height를 지정해 주시기 바랍니다 */
      #container { height: 1450px; }
    }
    @media screen and (max-width:450px){
      /* !! 아이폰 스크롤 트리거 관련 오류 해결 height를 지정해 주시기 바랍니다 */
      #container { height: 1425px; }
    }
    @media screen and (max-width:400px){
      /* !! 아이폰 스크롤 트리거 관련 오류 해결 height를 지정해 주시기 바랍니다 */
      #container { height: 1390px; }
    }