@charset "utf-8";

/*
* vw 단위 사용법
* 80px => calc(80 * var(--vw));
* 1920px 기준
*/

.fw {
    --font-kr: 'Noto Sans KR', sans-serif;
    --font-proxima: 'ProximaNova', sans-serif;
    --font-itc: 'ITCGaramondStd', serif;
    --fw-ink: #151415;
    --fw-card: #21282f;
    --fw-cardText: #bfcace;
}

.fw ul,
.fw li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 키비주얼 */
.fw__kv {
    position: relative;
}
.fw__kvTitle {
    position: absolute;
    left: calc(119 * var(--vw));
    top: calc(478 * var(--vw));
    transform: translateY(-50%);
    font-family: var(--font-itc);
    font-size: calc(60 * var(--vw));
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: calc(-0.6 * var(--vw));
    color: #fff;
}
.fw__kvCopy {
    position: absolute;
    left: calc(1481 * var(--vw));
    top: calc(494 * var(--vw));
    width: calc(305 * var(--vw));
    transform: translateY(-50%);
    font-family: var(--font-itc);
    font-size: calc(28.737 * var(--vw));
    line-height: 1.2;
    letter-spacing: calc(-0.287 * var(--vw));
    text-align: center;
    color: #fff;
}
.fw__kv--bottom .fw__kvTitle {
    top: calc(607 * var(--vw));
}
.fw__kv--bottom .fw__kvCopy {
    top: calc(609 * var(--vw));
}

/* 인트로 */
.fw__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(60 * var(--vw)) 0 calc(160 * var(--vw));
    text-align: center;
    color: var(--fw-ink);
}
.fw__introTitle {
    font-family: var(--font-itc);
    font-size: calc(84 * var(--vw));
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: calc(-0.84 * var(--vw));
}
.fw__introEn {
    margin-top: calc(14 * var(--vw));
    font-family: var(--font-itc);
    font-size: calc(44 * var(--vw));
    line-height: 1.2;
    letter-spacing: calc(-0.44 * var(--vw));
}
.fw__introDesc {
    margin-top: calc(20 * var(--vw));
    font-family: var(--font-kr);
    font-size: calc(24 * var(--vw));
    font-weight: 400;
    line-height: calc(38 * var(--vw));
    letter-spacing: calc(-1.2 * var(--vw));
}

/* 영상 + 화보 1 */
.fw__scene {
    position: relative;
    height: calc(2150 * var(--vw));
}
.fw__sceneBg {
    position: absolute;
    top: calc(695 * var(--vw));
    object-fit: cover;
}
.fw__video {
    position: absolute;
    left: calc(55 * var(--vw));
    top: 0;
    width: calc(1810 * var(--vw));
}
.fw__pair {
    position: absolute;
    left: calc(303 * var(--vw));
    top: calc(1000 * var(--vw));
    display: flex;
    justify-content: space-between;
    width: calc(1314 * var(--vw));
}
.fw__pair img {
    width: calc(647 * var(--vw));
}

/* 화보 2 */
.fw__lookbook {
    position: relative;
    height: calc(2222 * var(--vw));
    overflow: hidden;
}
.fw__lookbookBg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fw__lookbookTitle,
.fw__lookbookCopy {
    position: absolute;
    font-family: var(--font-itc);
    font-size: calc(24 * var(--vw));
    line-height: 1.1;
    letter-spacing: calc(-0.24 * var(--vw));
    text-align: center;
    color: #2e3134;
    white-space: nowrap;
}
.fw__lookbookTitle {
    left: calc(55 * var(--vw));
    top: calc(996 * var(--vw));
}
.fw__lookbookCopy {
    left: calc(1610 * var(--vw));
    top: calc(203 * var(--vw));
}
.fw__lookbookCut {
    position: absolute;
}
.fw__lookbookCut--01 {
    left: calc(55 * var(--vw));
    top: calc(250 * var(--vw));
    width: calc(490 * var(--vw))!important;
}
.fw__lookbookCut--02 {
    left: calc(630 * var(--vw));
    top: calc(160 * var(--vw));
    width: calc(660 * var(--vw))!important;
}
.fw__lookbookCut--03 {
    left: calc(55 * var(--vw));
    top: calc(1220 * var(--vw));
    width: calc(905 * var(--vw))!important;
}
.fw__lookbookCut--04 {
    left: calc(960 * var(--vw));
    top: calc(1220 * var(--vw));
    width: calc(905 * var(--vw))!important;
}
.fw__lookbookCut--05 {
    left: calc(1375 * var(--vw));
    top: calc(250 * var(--vw));
    width: calc(490 * var(--vw))!important;
}

/* 테크놀로지 */
.fw__tech {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(160 * var(--vw)) calc(225 * var(--vw));
    background: #f5f5f5;
    text-align: center;
}
.fw__techTitle {
    font-family: var(--font-itc);
    font-size: calc(60 * var(--vw));
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: calc(-0.6 * var(--vw));
    color: #000;
}
.fw__techDesc {
    margin: calc(26 * var(--vw)) 0 calc(80 * var(--vw));
    font-family: var(--font-kr);
    font-size: calc(24 * var(--vw));
    font-weight: 400;
    line-height: calc(38 * var(--vw));
    letter-spacing: calc(-1.2 * var(--vw));
    color: #000;
}
.fw__techDesc b {
    font-weight: 700;
}
.fw__pointList {
    display: flex;
    gap: calc(20 * var(--vw));
    margin-top: calc(80 * var(--vw));
}
.fw__point {
    width: calc(360 * var(--vw));
    text-align: left;
}
.fw__pointImg {
    width: calc(360 * var(--vw));
    height: calc(360 * var(--vw));
    object-fit: cover;
}
.fw__pointBody {
    height: calc(201 * var(--vw));
    padding: calc(20 * var(--vw)) calc(30 * var(--vw)) 0;
    background: var(--fw-card);
    color: var(--fw-cardText);
}
.fw__pointTitle {
    display: block;
    font-family: var(--font-kr);
    font-size: calc(28 * var(--vw));
    font-weight: 900;
    line-height: calc(44 * var(--vw));
    letter-spacing: calc(-1.4 * var(--vw));
}
.fw__pointTitle--en {
    font-family: var(--font-proxima);
    font-size: calc(30 * var(--vw));
    font-weight: 700;
    letter-spacing: 0;
}
.fw__pointDesc {
    margin-top: calc(10 * var(--vw));
    font-family: var(--font-kr);
    font-size: calc(20 * var(--vw));
    font-weight: 400;
    line-height: calc(30 * var(--vw));
    letter-spacing: calc(-1 * var(--vw));
}
.fw__pointDesc em {
    font-family: var(--font-proxima);
    font-size: calc(22 * var(--vw));
    font-style: normal;
}

/* 섹션 공통 타이틀 */
.fw__sectionTitle {
    display: block;
    font-family: var(--font-itc);
    font-size: calc(60 * var(--vw));
    font-weight: 400;
    line-height: calc(68 * var(--vw));
    letter-spacing: calc(-0.6 * var(--vw));
    text-align: center;
    color: var(--fw-ink);
}

/* 컬러 */
.fw__color {
    padding: calc(140 * var(--vw)) 0;
}
.fw__colorList {
    display: flex;
    justify-content: center;
    margin-top: calc(20 * var(--vw));
}
.fw__colorItem {
    width: calc(240 * var(--vw));
    text-align: center;
}
.fw__colorItem img {
    width: calc(240 * var(--vw));
    height: calc(240 * var(--vw));
    border-radius: calc(16 * var(--vw));
    object-fit: cover;
}
.fw__colorName {
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--vw));
    margin-top: calc(12 * var(--vw));
    font-family: var(--font-proxima);
    font-size: calc(20 * var(--vw));
    font-weight: 700;
    line-height: calc(30.4 * var(--vw));
    color: var(--fw-ink);
    white-space: nowrap;
}
.fw__chip {
    width: calc(16 * var(--vw));
    height: calc(16 * var(--vw));
    border-radius: 50%;
    flex-shrink: 0;
}
.fw__chip--ashBlue { background: #aec8cd; }
.fw__chip--black { background: #151415; }
.fw__chip--darkBlue { background: #7d879b; }
.fw__chip--charcoal { background: #808080; }
.fw__chip--butterYellow { background: #e3d58a; }

/* 기능 아이콘 */
.fw__function {
    padding-bottom: calc(150 * var(--vw));
}
.fw__funcList {
    display: flex;
    justify-content: center;
    gap: calc(20 * var(--vw));
    margin-top: calc(22 * var(--vw))!important;
}
.fw__funcItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * var(--vw));
    width: calc(80 * var(--vw));
    text-align: center;
    color: #404040;
}
.fw__funcIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(80 * var(--vw));
    height: calc(80 * var(--vw));
    border-radius: calc(13.333 * var(--vw));
    background: linear-gradient(180deg, #efefef 9.1667%, #ced8de 115%);
}
.fw__funcIcon img {
    width: calc(64 * var(--vw));
    height: calc(64 * var(--vw));
}
.fw__funcKr {
    font-family: var(--font-kr);
    font-size: calc(16 * var(--vw));
    font-weight: 700;
    letter-spacing: calc(-0.8 * var(--vw));
}
.fw__funcEn {
    width: max-content;
    margin-top: calc(-15 * var(--vw));
    font-family: var(--font-proxima);
    font-size: calc(14 * var(--vw));
    font-weight: 700;
}

/* 하단 로고 */
.fw__logo {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: calc(370 * var(--vw));
    padding-top: calc(160 * var(--vw));
    background: #fff;
}
.fw__logo img {
    width: calc(102 * var(--vw));
    height: calc(51 * var(--vw));
    object-fit: contain;
}