@charset "utf-8";
/* Info
 ========================================================================== */
/**
    * 1. Writer: Gyuri Son. (Weaverloft Corp.)
    * 2. Production Date: 2026-03
    * 3. Client: Neopharm
 */

.cont-wrap.introduce-sec { max-width: 100%; padding-inline: 0; padding-bottom: 160px; }
.cont-wrap.introduce-sec .path { max-width: 1520px; margin: 0 auto; padding-inline: clamp(16px, calc(60 / 1400 * 100vw), 60px); }
.cont-wrap.introduce-sec .back-btn-wrap { padding-inline: clamp(16px, calc(60 / 1400 * 100vw), 60px); }
.mo-br { display: none; }

.introduce-sec .inner { max-width: 1160px; margin: 0 auto; }
.introduce-sec .title-wrap { max-width: 1400px; margin: 0 auto; }
.introduce-sec .sec-desc { font-size: 28px; color: var(--font-color); line-height: 1.57; text-align: center; word-break: keep-all; }
.introduce-sec .sec-desc span { font-weight: 700; }
.introduce-sec .sec-title-wrap { display: flex; justify-content: center; position: relative; }
.introduce-sec .sec-title-wrap .title-bg { width: 200px; aspect-ratio: 200 / 80; z-index: 1; }
.introduce-sec .sec-title-wrap .sec-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; padding-top: 8px; font-size: 20px; font-weight: 700; color: var(--green-color); }
.introduce-sec .animate-item { opacity: 0; transform: translateY(50px); will-change: opacity, transform; }

.introduce-sec .intro-sec { display: flex; flex-direction: column; align-items: center; gap: 60px; position: relative; padding-top: 120px; }
.introduce-sec .intro-sec::before { content: ''; display: block; position: absolute; top: calc(50% + 62px); left: 50%; transform: translate(-50%, -50%); width: 927px; aspect-ratio: 927 / 247; background: url("/atp_gcontest/front/assets/images/sub/introduce/intro-deco.svg") no-repeat center / cover;}
.introduce-sec .intro-sec .intro-logo { width: 324px; height: auto; }
.introduce-sec .intro-sec .sec-desc span { position: relative; --line-width: 0%; text-decoration: none; }
.introduce-sec .intro-sec .sec-desc span::before { content: ''; display: block; position: absolute; bottom: 0; left: 0; z-index: -1; width: var(--line-width); height: 0.71em; min-height: 10px; background: rgba(220, 255, 79, 0.5); }

.introduce-sec .about-sec { position: relative; padding-top: 320px; }
.introduce-sec .about-sec::before { content: ''; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1; width: 100vw; height: 2178px; background: url("/atp_gcontest/front/assets/images/sub/introduce/about-sec-bg.svg") no-repeat top center / cover; }
.introduce-sec .about-sec::after { content: ''; display: block; position: absolute; z-index: -1; top: 491px; left: max(-51px, calc(50% - 1011px)); width: 313px; aspect-ratio: 313 / 266; background: url("/atp_gcontest/front/assets/images/sub/introduce/bg-deco.svg") no-repeat center / cover; }
.introduce-sec .about-sec .flower-img-wrap { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1920px; height: 100%; }
.introduce-sec .about-sec .flower-img-wrap img { position: absolute; z-index: 1; width: 35px; animation: flower-ani 3s ease-in-out infinite; }
.introduce-sec .about-sec .flower-img-wrap .flower1 { top: 106px; left: 38px; animation-delay: -0.2s; }
.introduce-sec .about-sec .flower-img-wrap .flower2 { top: 43px; left: 141px; animation-delay: -0.7s; }
.introduce-sec .about-sec .flower-img-wrap .flower3 { top: 119px; left: 205px; animation-delay: -1.2s; }
.introduce-sec .about-sec .flower-img-wrap .flower4 { top: 119px; right: 38px; animation-delay: -0.5s; }
.introduce-sec .about-sec .flower-img-wrap .flower5 { top: 43px; right: 141px; animation-delay: -1s; }
.introduce-sec .about-sec .flower-img-wrap .flower6 { top: 106px; right: 205px; animation-delay: -1.5s; }
.introduce-sec .about-sec .char-img-wrap { position: absolute; top: clamp(21.9px, max(2.14vw, 8.19vw - 116.1px), 195px); left: clamp(44px, 50.67vw - 665.9px, 694px); width: 346px; height: auto;}
.introduce-sec .about-sec .sketchbook-wrap { position: relative; width: 1160px; aspect-ratio: 1160 / 788; margin: 60px auto 0; background: url("/atp_gcontest/front/assets/images/sub/introduce/sketchbook.png") no-repeat top center / cover; }
.introduce-sec .about-sec .sketchbook-wrap .title-img { width: 406px; margin: 0 auto; padding-top: 160px; }
.introduce-sec .about-sec .sketchbook-wrap .sub-title { padding-top: 120px; font-size: 32px; color: var(--green-color); font-weight: 700; text-align: center; }
.introduce-sec .about-sec .sketchbook-wrap .sec-desc { padding: 32px 36px 160px; }
.introduce-sec .about-sec .sketchbook-wrap .crayon-img-wrap img { position: absolute; }
.introduce-sec .about-sec .sketchbook-wrap .crayon-img-wrap .crayon-1 { top: 344px; left: -88px; width: 124px; height: auto; animation: sub-crayon-ani 4s ease-in-out infinite; animation-delay: 0; }
.introduce-sec .about-sec .sketchbook-wrap .crayon-img-wrap .crayon-2 { top: 122px; right: -104px; width: 135px; height: auto; animation: sub-crayon-ani 4s ease-in-out infinite; animation-delay: -0.8s; }
.introduce-sec .about-sec .sketchbook-wrap .crayon-img-wrap .crayon-3 { bottom: 126px; left: -220px; width: 148px; height: auto; animation: sub-crayon-ani 4s ease-in-out infinite; animation-delay: -1.6s; }
.introduce-sec .about-sec .sketchbook-wrap .sketchbook-char-img-wrap { position: absolute; bottom: -88px; right: max(-137px, -7.14vw); width: 250px; }

@keyframes flower-ani {
    0%, 100% { transform: translateX(-5px) rotate(-12deg); }
    50% { transform: translateX(5px) rotate(12deg); }
}

@keyframes sub-crayon-ani {
    0%, 100% { transform: translateY(0) rotate(0) scale(1); }
    30% { transform: translateY(-15px) rotate(10deg) scale(1.03); }
    50% { transform: translateY(0) rotate(2deg) scale(0.95); }
    70% { transform: translateY(-5px) rotate(7deg) scale(1.02); }
}

.introduce-sec .mission-sec { position: relative; max-width: 1920px; margin: 160px auto 0; }
.introduce-sec .mission-sec::before { content: ''; display: block; position: absolute; z-index: -1; top: 181px; right: -114px; width: 423px; aspect-ratio: 423 / 263; background: url("/atp_gcontest/front/assets/images/sub/introduce/bg-deco2.svg") no-repeat center / contain; }
.introduce-sec .mission-sec::after { content: ''; display: block; position: absolute; z-index: 1; bottom: -137px; left: 50%; transform: translateX(-50%); width: 1720px; aspect-ratio: 1720 / 331; background: url("/atp_gcontest/front/assets/images/sub/introduce/sprout.svg") no-repeat center / cover; }
.introduce-sec .mission-sec .bee-img-wrapper { position: absolute; top: -29px; left: clamp(0px, 35.26vw - 494px, 183px); width: 242px; aspect-ratio: 242 / 142; animation: bee-ani 1s ease-in-out infinite alternate; }
.introduce-sec .mission-sec .butterfly-img-wrapper { position: absolute; bottom: 156px; right: clamp(18px, 50.29vw - 686.55px, 279px); z-index: 2; width: 60px; aspect-ratio: 60 / 65; animation: butterfly-ani 3s ease-in-out infinite; }
.introduce-sec .mission-sec .content-wrap { display: flex; align-items: center; justify-content: space-between; gap: 83px; margin-top: 80px; }
.introduce-sec .mission-sec .content-wrap .txt-wrap { flex: 1; }
.introduce-sec .mission-sec .content-wrap .sec-desc { color: #fff; text-align: left; }
.introduce-sec .mission-sec .content-wrap .sec-desc + .sec-desc { padding-top: 44px; }
.introduce-sec .mission-sec .content-wrap .img-wrap { position: relative; opacity: 0; transform: translateY(50px); will-change: opacity, transform; width: 400px; aspect-ratio: 1; overflow: hidden; border-radius: 20px; }
.introduce-sec .mission-sec .content-wrap .img-wrap img { position: absolute; top: -87px; left: -573px; width: 1650px; max-width: 1650px; transform: scale(0.83); transform-origin: center; }

@keyframes bee-ani {
    0% { transform: translateY(0); }
    100% { transform: translateY(10px); }
}

@keyframes butterfly-ani {
    0%, 100% { transform: translate(-3px, 0) rotate(-4deg); }
    50% { transform: translate(3px, -20px) rotate(4deg); }
}

@media screen and (min-width: 1921px) {
    .introduce-sec .about-sec .flower-img-wrap { width: 100vw; }
    .introduce-sec .about-sec .flower-img-wrap .flower1 { top: 5.52vw; left: 1.98vw; }
    .introduce-sec .about-sec .flower-img-wrap .flower2 { top: 2.24vw; left: 7.34vw; }
    .introduce-sec .about-sec .flower-img-wrap .flower3 { top: 6.19vw; left: 10.67vw;}
    .introduce-sec .about-sec .flower-img-wrap .flower4 { top: 6.19vw; right: 1.98vw; }
    .introduce-sec .about-sec .flower-img-wrap .flower5 { top: 2.24vw; right: 7.34vw; }
    .introduce-sec .about-sec .flower-img-wrap .flower6 { top: 5.52vw; right: 10.67vw; }
}

@media screen and (max-width: 1520px) {
    .introduce-sec .title-wrap { margin-inline: clamp(16px, calc(60 / 1400 * 100vw), 60px); }
}

@media screen and (max-width: 1400px) {
    .introduce-sec .about-sec .sketchbook-wrap .sketchbook-char-img-wrap { right: 6px; bottom: -12.22vw; }
    .introduce-sec .mission-sec .butterfly-img-wrapper { bottom: auto; right: auto; top: 0; left: clamp(111px, 30.83vw, 431px); }
}

@media screen and (max-width: 1280px) {
    .introduce-sec .inner { width: calc(100% - clamp(40px, 9.38vw, 120px)); }
    .introduce-sec .sec-desc { font-size: clamp(14px, 2.19vw, 28px); }

    .introduce-sec .intro-sec { gap: clamp(30px, 4.69vw, 60px); padding-top: clamp(30px, 9.38vw, 120px); }
    .introduce-sec .intro-sec .intro-logo { width: clamp(162px, 25.31vw, 324px); }

    .introduce-sec .about-sec { margin-top: 30px; padding-top: clamp(89px, 25vw, 320px); }
    .introduce-sec .about-sec .char-img-wrap { width: clamp(277px, 27.03vw, 346px); }
    .introduce-sec .about-sec .sketchbook-wrap { width: 100%; margin-top: clamp(20px, 4.69vw, 60px); }
    .introduce-sec .about-sec .sketchbook-wrap .sketchbook-char-img-wrap { width: clamp(85px, 19.53vw, 250px); }
    .introduce-sec .about-sec .sketchbook-wrap .title-img { width: clamp(172px, 31.72vw, 406px); padding-top: clamp(50px, 12.5vw, 160px); }
    .introduce-sec .about-sec .sketchbook-wrap .sub-title { padding-top: clamp(40px, 9.38vw, 120px); font-size: clamp(14px, 2.5vw, 32px); }
    .introduce-sec .about-sec .sketchbook-wrap .sec-desc { padding-top: clamp(16px, 2.5vw, 32px); padding-bottom: clamp(60px, 12.5vw, 160px); font-size: clamp(14px, 2.19vw, 28px); }
    .introduce-sec .about-sec .sketchbook-wrap .crayon-img-wrap .crayon-1 { top: clamp(136px, 37.78vw, 344px); left: -30px; width: clamp(62px, 9.69vw, 124px); }
    .introduce-sec .about-sec .sketchbook-wrap .crayon-img-wrap .crayon-2 { top: clamp(19px, 5.28vw, 122px); right: -40px; width: clamp(68px, 9.53vw, 122px); }

    .introduce-sec .mission-sec { margin-top: clamp(60px, 12.5vw, 160px); }
    .introduce-sec .mission-sec .inner { width: calc(100% - clamp(80px, 9.38vw, 120px)); }
    .introduce-sec .mission-sec .bee-img-wrapper { width: clamp(193px, 18.91vw, 242px); }
    .introduce-sec .mission-sec .butterfly-img-wrapper { width: clamp(19px, 4.69vw, 60px); }
    .introduce-sec .mission-sec .content-wrap { gap: clamp(66px, 6.48vw, 83px); margin-top: clamp(20px, 6.25vw, 80px); }
    .introduce-sec .mission-sec .content-wrap .sec-desc + .sec-desc { padding-top: clamp(22px, 3.44vw, 44px); }
}

@media screen and (max-width: 1024px) {
    .mo-br { display: block; }
    .cont-wrap.introduce-sec { padding-bottom: clamp(30px, 15.63vw, 160px); }
    .introduce-sec .sec-title-wrap .title-bg { width: clamp(110px, 19.53vw, 200px); }
    .introduce-sec .sec-title-wrap .sec-title { padding-top: 6px; font-size: clamp(12px, 1.95vw, 20px);}

    .introduce-sec .intro-sec::before { display: none; }

    .introduce-sec .about-sec::before { min-height: 2178px; height: 400vh; background: url("/atp_gcontest/front/assets/images/sub/introduce/about-sec-bg-mo.svg") no-repeat top center / 100% auto, linear-gradient(to bottom, transparent 0%, #70C04C 15%); }
    .introduce-sec .about-sec::after { top: 100%; width: clamp(123px, 30.57vw, 313px); }
    .introduce-sec .about-sec .char-img-wrap { display: none; }
    .introduce-sec .about-sec .flower-img-wrap { width: 100vw; }
    .introduce-sec .about-sec .flower-img-wrap img { width: clamp(6.55px, 1.82vw, 35px); }
    .introduce-sec .about-sec .flower-img-wrap .flower1 { top: 5.56vw; left: 1.94vw; }
    .introduce-sec .about-sec .flower-img-wrap .flower2 { top: 2.22vw; left: 7.22vw; }
    .introduce-sec .about-sec .flower-img-wrap .flower3 { top: 6.11vw; left: 10.56vw; }
    .introduce-sec .about-sec .flower-img-wrap .flower4 { top: 6.11vw; right: 1.94vw; }
    .introduce-sec .about-sec .flower-img-wrap .flower5 { top: 2.22vw; right: 7.22vw; }
    .introduce-sec .about-sec .flower-img-wrap .flower6 { top: 5.56vw; right: 10.56vw; }
    .introduce-sec .about-sec .sketchbook-wrap { background-image: url("/atp_gcontest/front/assets/images/sub/introduce/sketchbook-mo.png"); aspect-ratio: auto; }
    .introduce-sec .about-sec .sketchbook-wrap .sub-title { margin-top: clamp(20px, 4.69vw, 48px); margin-inline: clamp(20px, 7.52vw, 77px); padding-top: clamp(20px, 7.03vw, 72px); border-top: 1px solid rgba(105, 186, 95, 0.4); }
    .introduce-sec .about-sec .sketchbook-wrap .sketchbook-char-img-wrap { bottom: clamp(-103px, -11.94vw, -43px); }

    .introduce-sec .mission-sec::before { top: 100%; width: clamp(129px, 41.31vw, 423px); }
    .introduce-sec .mission-sec::after { display: none; }
    .introduce-sec .mission-sec .bee-img-wrapper { display: none; }
    .introduce-sec .mission-sec .content-wrap { flex-direction: column; gap: clamp(30px, 8.33vw, 66px); }
    .introduce-sec .mission-sec .content-wrap .sec-desc { text-align: center; }
    .introduce-sec .mission-sec .content-wrap .img-wrap { width: 100%; border-radius: 6px; aspect-ratio: 280 / 182; }
    .introduce-sec .mission-sec .content-wrap .img-wrap img { top: -20.33%; left: -79.29%; width: 258.93%; max-width: 258.93%; }

    @keyframes flower-ani {
        0%, 100% { transform: translateX(-2px) rotate(-6deg); }
        50% { transform: translateX(2px) rotate(6deg); }
    }
}

@media screen and (max-width: 360px) {
    .cont-wrap.introduce-sec { padding-bottom: 30px; }
    .introduce-sec .intro-sec { padding-top: 30px; }
    .introduce-sec .about-sec .sketchbook-wrap { aspect-ratio: 320 / 424; }
}

@media screen and (max-width: 359px) {
    .introduce-sec .br-359 { display: none; }
    .introduce-sec .about-sec .sketchbook-wrap .sketchbook-char-img-wrap { bottom: -55px; }
}