@charset "utf-8";

.doto-about {
    --doto-navy: #102540;
    --doto-blue: #246fe5;
    --doto-sky: #eaf2ff;
    --doto-ink: #182230;
    --doto-gray: #647184;
    --doto-line: #dfe5ec;
    --doto-bg: #f5f7fa;
    color: var(--doto-ink);
    background: #fff;
    font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    word-break: keep-all;
    overflow: hidden;
}

.font333 { color:#333 !important; }
.doto-about *,
.doto-about *::before,
.doto-about *::after { box-sizing: border-box; }
.doto-about :where(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; }
.doto-about :where(ul, ol) { list-style: none; }
.doto-about a { color: inherit; text-decoration: none; }
.doto-about strong { font-weight: 700; }
.doto-container { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.doto-container h1, .doto-container h2 { color:#fff; }
.doto-section { padding: 120px 0; }

.doto-hero {
    min-height: 680px;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(8, 28, 53, .96) 0%, rgba(13, 42, 77, .86) 20%, rgba(12, 40, 73, .42) 50%),
        url("/data/skin/beauty/images/service/about_doto.jpg") center / cover no-repeat;
    display: flex;
    align-items: center;
}

#company-title strong, #intro-title strong {letter-spacing: -0.01em; font-size: 38px; line-height: 44px; }

.doto-hero__inner { padding-block: 90px; }
.doto-eyebrow, .doto-kicker { color: var(--doto-blue); font-size: 18px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; }
.doto-hero .doto-eyebrow { color: #8db9ff; margin-bottom: 24px; }
.doto-hero h1 { max-width: 900px; font-size: clamp(38px, 5vw, 68px); line-height: 1.22; letter-spacing: -.045em; font-weight: 300; }
.doto-hero h1 strong { display: inline-block; }
.doto-hero__text { margin-top: 30px; color: rgba(255,255,255,.78); font-size: 20px; line-height: 1.75; }
.doto-scroll { display: inline-flex; align-items: center; gap: 20px; margin-top: 48px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.48); font-size: 14px;}
.doto-scroll span { font-size: 18px; }
.doto-scroll, .doto-scroll span { color: #fff !important; }

.doto-heading { margin-bottom: 58px; }
.doto-heading .doto-kicker { margin-bottom: 18px; }
.doto-heading h2, .doto-audience h2, .doto-strength h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.3; letter-spacing: -.045em; font-weight: 500; }
.doto-heading > p:last-child { margin-top: 18px; color: var(--doto-gray); font-size: 18px; }
.doto-heading--center { text-align: center; }
.doto-heading--light { color: #fff; }
.doto-heading--light .doto-kicker { color: #8db9ff; }

.doto-intro__layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 8%; padding-top: 50px; border-top: 1px solid var(--doto-line); }
.doto-intro__lead { font-size: 23px; line-height: 1.65; font-weight: 500; }
.doto-intro__body { color: var(--doto-gray); font-size: 17px; }
.doto-intro__layout p + p, .doto-story__content p + p { margin-top: 22px; }
.doto-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 80px; border-block: 1px solid var(--doto-line); }
.doto-fact { padding: 38px 30px; text-align: center; }
.doto-fact + .doto-fact { border-left: 1px solid var(--doto-line); }
.doto-fact strong { display: block; color: var(--doto-blue); font-size: clamp(30px, 4vw, 48px); line-height: 1.2; letter-spacing: -.03em; }
.doto-fact span { display: block; margin-top: 10px; color: var(--doto-gray); }
.doto-story { display: grid; grid-template-columns: 1fr 1fr; min-height: 610px; margin-top: 100px; background: var(--doto-bg); }
.doto-story__visual { min-height: 440px; background: linear-gradient(145deg, rgba(22,67,120,.16), rgba(18,42,70,.05)), url("/data/skin/beauty/images/service/sect2.jpg") center / cover no-repeat; }
.doto-story__content { padding: 70px 64px; align-self: center; }
.doto-story__content .doto-kicker { margin-bottom: 14px; }
.doto-story__content h3 { margin-bottom: 30px; font-size: clamp(28px, 3vw, 40px); line-height: 1.35; letter-spacing: -.035em; }
.doto-story__content p:not(.doto-kicker) { color: var(--doto-gray); }

.doto-video { padding: 110px 0 120px; background: var(--doto-navy); }
.doto-video__frame { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 30px 60px rgba(0,0,0,.22); }
.doto-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.doto-services { background: var(--doto-bg); }
.doto-service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.doto-service-card { position: relative; min-height: 310px; padding: 48px; background: #fff; border: 1px solid transparent; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.doto-service-card:hover { transform: translateY(-5px); border-color: #cfe0fa; box-shadow: 0 18px 38px rgba(23,54,89,.08); }
.doto-service-card__number { display: block; margin-bottom: 17px; color: var(--doto-blue); font-weight: 700; font-size: 20px; letter-spacing: .1em; }
.doto-service-card h3 { margin-bottom: 18px; font-size: 25px; line-height: 1.35; letter-spacing: -.03em; }
.doto-service-card p { color: var(--doto-gray); }
.doto-service-card--wide { grid-column: 1 / -1; min-height: auto; padding-right: 30%; background: var(--doto-navy); color: #fff; }
.doto-service-card--wide p { color: rgba(255,255,255,.68); }
.doto-service-card--wide .doto-service-card__number { margin-bottom: 28px; color: #8db9ff; }

.doto-audience__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.doto-audience article { padding: 54px; border-top: 3px solid var(--doto-blue); background: var(--doto-bg); }
.doto-audience .doto-kicker { margin-bottom: 12px; }
.doto-audience h2 { margin-bottom: 38px; font-size: 38px; }
.doto-check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.doto-check-list li { position: relative; padding: 14px 0 14px 22px; border-bottom: 1px solid var(--doto-line); color: #465465; }
.doto-check-list li::before { content: ""; position: absolute; left: 2px; top: 25px; width: 6px; height: 6px; border-radius: 50%; background: var(--doto-blue); }

.doto-strength { color: #fff; background: var(--doto-navy); }
.doto-strength .doto-kicker { color: #8db9ff; margin-bottom: 18px; }
.doto-strength__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8%; }
.doto-strength__grid > div:last-child > p:not(.doto-strength__lead) { color: rgba(255,255,255,.65); font-size: 17px; }
.doto-strength__lead { margin-bottom: 26px; font-size: 24px; line-height: 1.4; color:#fff; }
.doto-process { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 52px; border-block: 1px solid rgba(255,255,255,.16); }
.doto-process li { position: relative; padding: 27px 10px; text-align: center; font-size: 17px; color:#fff; }
.doto-process li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 30px; background: rgba(255,255,255,.15); transform: translateY(-50%); }
.doto-process span { display: block; color: #8db9ff; font-size: 16px; font-weight: 500; }

.doto-value { padding: 130px 0; text-align: center; background: linear-gradient(135deg, #eaf2ff, #f7faff); }
.doto-value .doto-kicker, .doto-summary .doto-kicker { margin-bottom: 22px; }
.doto-value h2 { font-size: clamp(32px, 4.5vw, 58px); line-height: 1.35; letter-spacing: -.045em; font-weight: 400; }
.doto-value > .doto-container > p:last-child { max-width: 800px; margin: 32px auto 0; color: var(--doto-gray); font-size: 18px; }
.doto-summary { padding: 130px 0; text-align: center;  }
.doto-summary .doto-kicker, .doto-summary .doto-kicker { margin-bottom: 22px; }
.doto-summary h2 { font-size: clamp(32px, 4.5vw, 58px); line-height: 1.35; letter-spacing: -.045em; font-weight: 400; }
.doto-summary > .doto-container > p:last-child { max-width: 800px; margin: 32px auto 0; color: var(--doto-gray); font-size: 18px; }
.doto-summary h2 strong {font-size: 32px !important;}
.doto-value h2 strong {font-size: 32px !important;}



#value-title, #intro-title, #services-title { color: #333 !important;}


@media (max-width: 1024px) {
    #layout_body { min-width: 0 !important; width: 100% !important; }
    .main-contents { min-width: 0 !important; width: 100% !important; }
    .doto-about { width: 100%; min-width: 0; }
    .doto-section { padding: 90px 0; }
    .doto-story__content { padding: 48px 42px; }
    .doto-audience__grid { gap: 30px; }
    .doto-audience article { padding: 40px 34px; }
    .doto-check-list { grid-template-columns: 1fr; }
    p.doto-kicker {letter-spacing: 0em;}
    .doto-summary h2 strong {font-size: 32px !important;}
    .doto-value h2 strong {font-size: 32px !important;}
}

@media (max-width: 767px) {
    .doto-about { font-size: 15px; word-break: keep-all; overflow-wrap: break-word; }
    .doto-container { width: min(100% - 36px, 1200px); }
    .doto-section { padding: 72px 0; }
    .doto-hero { min-height: 460px; background-position: 60% center; }
    .doto-hero__inner { padding-block: 70px; }
    .doto-hero h1 { font-size: 38px; line-height: 46px;}
    .doto-hero__text { font-size: 16px; }
    .doto-scroll { margin-top: 38px; }
    .doto-heading { margin-bottom: 40px; }
    .doto-heading h2, .doto-audience h2, .doto-strength h2 { font-size: 32px; }
    .doto-heading > p:last-child { font-size: 16px; }
    .doto-intro__layout, .doto-story, .doto-audience__grid, .doto-strength__grid { grid-template-columns: 1fr; }
    .doto-intro__layout { gap: 30px; padding-top: 35px; }
    .doto-intro__lead { font-size: 20px; }
    .doto-facts { margin-top: 52px; }
    .doto-fact { padding: 28px 8px; }
    .doto-fact span { font-size: 13px; }
    .doto-story { margin-top: 65px; }
    .doto-story__visual { min-height: 330px; }
    .doto-story__content { padding: 42px 28px; }
    .doto-video { padding: 72px 0; }
    .doto-service-grid { grid-template-columns: 1fr; }
    .doto-service-card, .doto-service-card--wide { grid-column: auto; min-height: 0; padding: 34px 28px; }
    .doto-service-card__number { margin-bottom: 30px; }
    .doto-service-card h3 { font-size: 22px; }
    .doto-audience article { padding: 36px 26px; }
    .doto-strength__grid { gap: 00px; }
    .doto-process { grid-template-columns: repeat(5, minmax(82px, 1fr)); overflow-x: auto; }
    .doto-value { padding: 85px 0; }
    .doto-summary { padding: 70px 0; }
    .doto-summary > .doto-container > p:last-child { font-size: 19px; }
    p.doto-kicker {letter-spacing: 0em;}
    .doto-summary h2 strong {font-size: 32px !important;}
    .doto-value h2 strong {font-size: 32px !important;}
}

@media (max-width: 480px) {
    .doto-hero h1 { font-size: 33px; }
    .doto-facts { grid-template-columns: 1fr; }
    .doto-fact + .doto-fact { border-left: 0; border-top: 1px solid var(--doto-line); }
    .doto-video__frame { width: calc(100% + 36px); margin-left: -18px; }
    p.doto-kicker {letter-spacing: 0em;}
    .doto-summary h2 strong {font-size: 32px !important;}
    .doto-value h2 strong {font-size: 32px !important;}
}

@media (prefers-reduced-motion: reduce) {
    .doto-about *, .doto-about *::before, .doto-about *::after { scroll-behavior: auto !important; transition: none !important; }
}