/* to embed a font */
@import url('./font.css');

:root {
    --yellow: #F7FF13;
    --black: #000000;
    --white: #FFFFFF;

    --gray100: #F5F5F5;
    --gray200: #E5E5E5;
    --gray300: #DBDBDB;
    --gray400: #CCCCCC;
    --gray500: #A4A4A4;
    --gray600: #747474;
    --gray700: #444444;
    --gray800: #1B1B1B;
    --gray900: #121212;
}

/* header */
header {width: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(12px);}
header .header-wrap {width: 100%; max-width: 192rem; height: 7vw; padding: 0 6rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
header .header-wrap > a > img {height: 2.2vw;}
header .header-wrap > ul {display: flex; align-items: center; justify-content: flex-end; column-gap: 2.4rem;}
header .header-wrap > ul > li {position: relative;}
header .header-wrap > ul > li > a {padding: .6rem 0; font-size: clamp(1.2rem, 1.4vw, 2.6rem); font-weight: 600; color: var(--white);}
header .header-wrap > ul > li > ul {top: calc(1.4vw + .6rem + .8vw); display: none; flex-flow: column; row-gap: 1.2vw; padding: 1.6vw 1.2vw; background-color: var(--gray800); position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
header .header-wrap > ul > li > ul > li > a {font-size: clamp(1.1rem, 1.2vw, 2.4rem); font-weight: 600; color: var(--gray600); white-space: nowrap;}

header .header-wrap > ul > li:hover > a {border-bottom: 1px solid var(--white);}
header .header-wrap > ul > li:hover > ul, header > ul > li > ul > li:hover {display: flex;}
header .header-wrap > ul > li > ul > li > a:hover {color: var(--white);}

header .mobile-menu-wrap {display: none;}

@media screen and (max-width: 768px) {
    header .header-wrap {height: 6rem; padding: 0 2rem;}
    header .header-wrap > a > img {height: 2.4rem;}
    header .header-wrap > ul {display: none;}

    header .mobile-menu-wrap {display: block;}
    header .mobile-menu-wrap .toggle {display: none;}
    header .mobile-menu-wrap .icon {width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer;}
    header .mobile-menu-wrap .icon::before {display: none;}
    header .mobile-menu-wrap .icon > span {width: 1.8rem; height: .15rem; background-color: var(--white); display: block; transition: background-color .2s ease-out; position: relative;}
    header .mobile-menu-wrap .icon > span::before,
    header .mobile-menu-wrap .icon > span::after {content: ''; background-color: var(--white); display: block; width: 100%; height: 100%; position: absolute; transition: all .2s ease-out;}
    header .mobile-menu-wrap .icon > span::before {top: -.7rem;}
    header .mobile-menu-wrap .icon > span::after {bottom: -.7rem;}

    header .mobile-menu-wrap .toggle:checked ~ .icon > span {background-color: transparent;}
    header .mobile-menu-wrap .toggle:checked ~ .icon > span::before {transform: rotate(45deg); top: 0;}
    header .mobile-menu-wrap .toggle:checked ~ .icon > span::after {transform: rotate(-45deg); top: 0;}
    
    header .mobile-menu-wrap .mobile-menu {display: none;}
    header .mobile-menu-wrap .toggle:checked ~ .mobile-menu {display: flex; flex-flow: column; row-gap: 2.6rem; align-items: center; justify-content: center; width: 100vw; height: calc(100vh - 6rem); padding-bottom: 4rem; position: fixed; top: 6rem; left: 0; background: rgba(0, 0, 0, 0.72);}
    header .mobile-menu-wrap .toggle:checked ~ .mobile-menu > li {display: flex; flex-flow: column; row-gap: 2.4rem; align-items: center;}
    header .mobile-menu-wrap .toggle:checked ~ .mobile-menu > li > a {font-size: 3.2rem; font-weight: 600; padding-bottom: .6rem; display: flex; align-items: center; justify-content: center; column-gap: .8rem;}
    header .mobile-menu-wrap .toggle:checked ~ .mobile-menu > li > a > i {width: 2.4rem; height: 2.4rem; background-image: url(../img/ico/ic-arrow-down-wh-24.svg);}
    header .mobile-menu-wrap .toggle:checked ~ .mobile-menu > li > ul {display: none;}
    
    header .mobile-menu-wrap .toggle:checked ~ .mobile-menu > li.active > a {border-bottom: 1px solid var(--white);}
    header .mobile-menu-wrap .toggle:checked ~ .mobile-menu > li.active > a > i {background-image: url(../img/ico/ic-arrow-up-wh-24.svg);}
    header .mobile-menu-wrap .toggle:checked ~ .mobile-menu > li.active > ul {display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 2.4rem;}
    header .mobile-menu-wrap .toggle:checked ~ .mobile-menu > li.active > ul > li > a {font-size: 1.6rem; font-weight: 600;}
}

/* footer */
footer {width: 100%; background-color: var(--gray900);}
footer .footer-wrap {width: 100%; max-width: 192rem; padding: 4rem 6rem 10rem; margin: 0 auto; display: flex; justify-content: space-between;}
footer .footer-wrap > ul {display: flex; column-gap: 4vw;}
footer .footer-wrap > ul > li {display: flex; flex-flow: column; row-gap: 1.4rem;}
footer .footer-wrap > ul > li > h6 {font-size: clamp(1.1rem, 1.2vw, 2.4rem); font-weight: 500; color: var(--gray600);}
footer .footer-wrap > ul > li > p {font-size: clamp(1.1rem, 1.2vw, 2.4rem); line-height: 1.6;}
footer .footer-wrap > ul > li > a {font-size: clamp(1.1rem, 1.2vw, 2.4rem); line-height: 1.6; text-decoration: underline;}
footer .footer-wrap > div {display: flex; flex-flow: column; row-gap: 1.6rem; align-items: end;}
footer .footer-wrap > div > a {font-size: clamp(1.1rem, 1.2vw, 2.4rem); font-weight: 500; text-decoration: underline;}
footer .footer-wrap > div > p {font-size: clamp(1.1rem, 1.2vw, 2.4rem);}

@media screen and (max-width: 768px) {
    footer .footer-wrap {padding: 4rem 2rem; flex-flow: column; row-gap: 4rem;}
    footer .footer-wrap > ul {grid-gap: 4rem 2.6rem; flex-wrap: wrap; }
    footer .footer-wrap > ul > li {row-gap: 1.6rem;}
    footer .footer-wrap > div {flex-flow: initial; align-items: center; justify-content: space-between;}
}

/* 메인 */
main {width: 100%; max-width: 192rem; margin: 7vw auto 0; padding: 6rem 6rem 14rem;}

@media screen and (max-width: 768px) {
    main {margin-top: 6rem; padding: 4rem 2rem 10rem;}
}

/* 플로팅 버튼 */
.floating-wrap {width: fit-content; height: fit-content; position: fixed; right: 3.2rem; bottom: 3.2rem; z-index: 999; transition: transform 400ms, opacity 150ms; transform: translateY(200%); opacity: 0;}
.floating-wrap.up {transform: translateY(0); opacity: 1;}

.floating-wrap .contact {width: 8.4vw; height: 8.4vw; max-width: 10rem; max-height: 10rem; padding: 0; border: 0; border-radius: 100%; display: flex; align-items: center; justify-content: center; position: relative;}
.floating-wrap .contact > i {position: absolute; z-index: 2;}
.floating-wrap .contact > div {width: 100%; height: 100%; border-radius: 100%; background-image: url(../img/index/btn-floating.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: relative; z-index: 1;}

@media screen and (max-width: 768px) {
    .floating-wrap {right: 2rem; bottom: 4rem;}
    .floating-wrap .contact {width: 7.2rem; height: 7.2rem;}
}

/* 메인 > 메인 배너 */
.main-intro {width: 100%; height: calc(100vh - 7vw); padding-bottom: 7rem; margin-top: -6rem; display: flex; align-items: center; justify-content: center; position: relative;}
.main-intro > p {font-size: clamp(4rem, 6.4vw, 12rem); text-align: center; font-weight: 500; color: var(--white); line-height: 1.2;}
.main-intro > p > br.desktop {display: block;}
.main-intro > p > br.mobile {display: none;}
.main-intro > img {z-index: 99; position: absolute;}
.main-intro > img:nth-child(1) {left: 24vw; padding-bottom: 22vw; width: 20vw; max-width: 32rem;}
.main-intro > img:nth-child(2) {right: 24vw; padding-top: 22vw; width: 18vw; max-width: 30rem;}

@media screen and (max-width: 768px) {
    .main-intro {height: calc(100vh - 6rem); padding-bottom: 16rem; margin-top: -4rem; justify-content: initial;}
    .main-intro > p {font-size: clamp(3rem, 10.6vw, 7rem); line-height: 1.2; text-align: left;}
    .main-intro > p > br.desktop {display: none;}
    .main-intro > p > br.mobile {display: block;}
    .main-intro > img:nth-child(1) {left: 48vw; padding-bottom: 30vh; width: 16rem;}
    .main-intro > img:nth-child(2) {left: 40vw; padding-top: 42vh; width: 14rem;}
}

/* 메인 > 서비스 */
.service-sort > li {display: flex; align-items: center; justify-content: space-between; padding-bottom: 2.4rem; border-bottom: 1px solid var(--white);}
.service-sort > li + li {margin-top: 3.2rem;}
.service-sort > li > div {display: flex; column-gap: .4rem;}
.service-sort > li > div:nth-child(2) {flex-flow: row-reverse;}
.service-sort > li > div > p {font-size: clamp(3rem, 5.6vw, 10.4rem); font-weight: 500;}

@media screen and (max-width: 768px) {
    .service-sort > li {padding-bottom: 1.6rem;}
    .service-sort > li + li {margin-top: 1.6rem;}
    .service-sort > li > div > p {font-size: 2.4rem;}
}

/* 메인 > 회사 사진 */
.company-img {width: 100vw; overflow: hidden; position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.company-img img {width: 100%;}

/* 메인 > 고객사 */
.client-banner-wrap {display: flex; align-items: center; width: 100vw; overflow: hidden; position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.client-banner {display: flex; align-items: center;}
.client-banner > li {display: block; margin-right: 3.2rem;}
.client-banner > li img {width: calc((100vw - 12rem) / 6);}

.client-banner.original {animation: rolling01 50s linear infinite;}
.client-banner.clone {animation: rolling02 50s linear infinite;}

@media screen and (max-width: 768px) {
    .client-banner > li {margin-right: 1.2rem;}
    .client-banner > li img {width: calc((100vw - 2.4rem) / 3);}
}

/* 메인 > 카페 */
.main-cafe {width: 100vw; margin: 14rem -6rem 0; padding: 14rem 6rem; background-color: var(--white); position: relative;}
.main-cafe .title > h2 {color: var(--black);}

.main-cafe .cafe-txt {display: flex; flex-flow: column; row-gap: 4rem; width: 46%;}
.main-cafe .cafe-txt .en {color: var(--black); word-break: keep-all; font-size: clamp(1.8rem, 2.4vw, 4.4rem); font-weight: 500; line-height: 1.2;}
.main-cafe .cafe-txt .ko {color: var(--black);  word-break: keep-all; font-size: clamp(1.4rem, 1.6vw, 3rem); line-height: 1.6;}

.main-cafe .cafe-img .toon01 {position: absolute; top: 6vw; right: 10vw; z-index: 4; width: 26vw;}
.main-cafe .cafe-img .toon02 {margin-left: 12vw; margin-top: 7vw; display: block; width: 20vw;}
.main-cafe .cafe-img .photo01 {position: absolute; top: calc(14rem + 6.4vw + 6rem); right: 6rem; z-index: 1; width: calc(54% - 12rem);}
.main-cafe .cafe-img .photo02 {margin-top: 1.8vw; display: block; position: relative; z-index: 2; width: 56vw;}

.cafe-banner-wrap {display: flex; align-items: center; width: 100vw; margin-top: 12rem; overflow: hidden; position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.cafe-banner {display: flex; align-items: center;}
.cafe-banner > * {padding-right: 4rem;}
.cafe-banner > p {color: var(--white); width: fit-content; font-size: clamp(3rem, 5.6vw, 10.4rem); white-space: nowrap;}
.cafe-banner > p > span {display: block; font-weight: 700;}
.cafe-banner > img {width: 18vw;}

.cafe-banner.original {animation: rolling01 40s linear infinite;}
.cafe-banner.clone {animation: rolling02 40s linear infinite;}

@media screen and (max-width: 768px) {
    .main-cafe {margin: 10rem -2rem 0; padding: 10rem 2rem;}
    
    .main-cafe .cafe-txt {row-gap: 2.4rem; width: 40%;}
    .main-cafe .cafe-txt .en {font-size: 1.6rem;}
    .main-cafe .cafe-txt .ko {font-size: 1.4rem;}
    
    .main-cafe .cafe-img .toon01 {top: 6rem; right: 2rem; width: 15.2rem; height: 15.2rem;}
    .main-cafe .cafe-img .toon02 {margin-left: 12rem; margin-top: -2rem; width: 12.4rem; height: 12.4rem;}
    .main-cafe .cafe-img .photo01 {top: calc(10rem + 4rem + 3.2rem); right: 2rem; width: calc(60% - 4rem);}
    .main-cafe .cafe-img .photo02 {max-width: 48rem; width: 100%; margin-top: 1rem;}
    
    .cafe-banner-wrap {margin-top: 6rem;}
    .cafe-banner > * {padding-right: 2rem;}
    .cafe-banner > p {font-size: 4.8rem;}
    .cafe-banner > img {width: 14rem;}
}

/* 메인 > 연락 */
.main-contact {width: 100vw; position: relative; margin-bottom: -14rem; padding: 14rem 6rem; background-image: url(../img/index/main-contact-bg.png); background-repeat: no-repeat; background-size: 60% auto; background-position: bottom right -6rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.main-contact > div {position: relative; max-width: 192rem; margin: 0 auto;}
.main-contact > div > button {width: 10vw; height: 10vw; max-width: 18.6rem; max-height: 18.6rem; border: 0; border-radius: 100%; background-color: var(--yellow); font-size: clamp(1.2rem, 1.4vw, 2.6rem); line-height: 1; font-weight: 600; text-align: left; color: var(--black); position: absolute; top: 1.2vw; right: 8rem;}
.main-contact > div > button > p {position: relative;}
.main-contact > div > button > p > i {position: absolute; right: 0; bottom: -.2rem;}

.contact-txt > p {width: 100%; font-size: clamp(4rem, 6.4vw, 12rem); font-weight: 500; width: 100%; border-bottom: 1px solid var(--white);}
.contact-txt > p:last-child {border-bottom: 0; text-align: right;}

@media screen and (max-width: 768px) {
    .main-contact {margin-bottom: -10rem; padding: 10rem 2rem; background-size: 100% auto; background-position: bottom right -2rem;}
    .main-contact > div {max-width: 100%;}
    .main-contact > div > button {width: 7.2rem; height: 7.2rem; font-size: 1.2rem; top: 0; right: .4rem;}
    .main-contact > div > button > p > i {width: 1.2rem; height: 1.2rem; bottom: -.1rem;}
    
    .contact-txt > p {font-size: clamp(3rem, 10.6vw, 7rem); border-bottom: 1px solid rgba(255,255,255,.12); padding: .6rem 0;}
}

/* Group DD */
.grouddd-summary {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2.4rem;}
.grouddd-summary > li {border-top: 1px solid rgba(255,255,255,0.5); padding: 2.4rem 0; display: flex; flex-flow: column; row-gap: 1.6rem;}
.grouddd-summary > li:nth-last-child(-n+2) {border-bottom: 1px solid rgba(255,255,255,0.5);}
.grouddd-summary > li > h4 {font-size: clamp(1.8rem, 2.4vw, 4.4rem); font-weight: 700;}
.grouddd-summary > li > p {font-size: clamp(1.4rem, 1.6vw, 3rem); font-weight: 500; line-height: 1.4;}

@media screen and (max-width: 768px) {
    .grouddd-summary {grid-template-columns: repeat(1, 1fr);}
    .grouddd-summary > li {padding: 2rem 0; row-gap: 1.2rem;}
    .grouddd-summary > li:nth-last-child(-n+2) {border-bottom: 0;}
    .grouddd-summary > li:last-child {border-bottom: 1px solid rgba(255,255,255,0.5);}
    .grouddd-summary > li > h4 {font-size: 2rem;}
    .grouddd-summary > li > p {font-size: 1.4rem;}
}

/* Group DD > History & Client */
.history-wrap {display: flex; flex-flow: column; row-gap: 4rem;}
.history-wrap > p {font-size: clamp(1.4rem, 1.6vw, 3rem); font-weight: 300; line-height: 2; word-break: keep-all;}
.history {display: flex; flex-flow: column; row-gap: .4rem;}
.history > div {display: flex; flex-flow: column; background-color: var(--gray800); padding: 2.4rem; cursor: pointer;}
.history > div > h4 {font-size: clamp(1.4rem, 1.6vw, 3rem); font-weight: 700; color: var(--gray600);}
.history > div > p {font-size: clamp(1.4rem, 1.6vw, 3rem); font-weight: 500; color: var(--gray600); line-height: 1.6; word-break: keep-all; max-height: 0; overflow: hidden;}
.history > div > span {font-size: clamp(1.2rem, 1.4vw, 2.6rem); font-weight: 300;}
.history > div.active > h4 {color: var(--white);}
.history > div.active > p {color: var(--white); margin-top: 1.6rem; max-height: fit-content;}

@media screen and (max-width: 768px) {
    .history-wrap > p {font-size: 1.4rem;}
    .history > div {padding: 2rem;}
    .history > div > h4 {font-size: 1.4rem;}
    .history > div > p {font-size: 1.4rem;}
    .history > div.active > p {margin-top: 1.2rem;}
}

.client-wrap {margin-top: 6rem; display: flex; flex-flow: column; row-gap: 4rem;}
.client-wrap > p {font-size: clamp(1.4rem, 1.6vw, 3rem); font-weight: 300; line-height: 2; word-break: keep-all;}
.client {display: flex; flex-wrap: wrap; grid-gap: 3.2rem;}
.client > li {width: calc((100% - 16rem) / 6); display: flex; align-items: center; justify-content: center;}
.client > li img {width: 100%;}

@media screen and (max-width: 768px) {
    .client-wrap {margin-top: 4rem;}
    .client-wrap > p {font-size: 1.4rem;}
    .client {grid-gap: 1.2rem .8rem;}
    .client > li {width: calc((100% - 3.6rem) / 4);}
}

/* Group DD > Team */
.team-wrap {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: .2rem;}
.team-wrap > div {background-color: var(--gray800); padding: 4vw; display: flex; flex-flow: column;}
.team-wrap > div > h4 {font-size: clamp(1.8rem, 2.4vw, 4.4rem); font-weight: 700; line-height: 1.2;}
.team-wrap > div > ul {display: flex; flex-flow: column; row-gap: 1.6vw; margin-top: 2vw;}
.team-wrap > div > ul > li {font-size: clamp(1.4rem, 1.6vw, 3rem); font-weight: 500;}

@media screen and (max-width: 768px) {
    .team-wrap {grid-template-columns: repeat(1, 1fr);}
    .team-wrap > div {padding: 2rem;}
    .team-wrap > div > h4 {font-size: 1.6rem;}
    .team-wrap > div > ul {row-gap: 1.2rem; margin-top: 1.2rem;}
    .team-wrap > div > ul > li {font-size: 1.4rem;}

}

/* DD factory */
.ddfactory-service-wrap {display: flex; flex-flow: column; row-gap: 4rem;}
.ddfactory-service-wrap > p {font-size: clamp(1.4rem, 1.6vw, 3rem); font-weight: 300; line-height: 2; word-break: keep-all;}

.ddfactory-service {display: flex; flex-flow: column;}
.ddfactory-service > li {border-top: 1px solid rgba(255,255,255,0.5); padding: 2.4rem 0; display: flex; justify-content: space-between;}
.ddfactory-service > li:last-child {border-bottom: 1px solid rgba(255,255,255,0.5);}
.ddfactory-service > li > h4 {font-size: clamp(1.8rem, 2.4vw, 4.4rem); font-weight: 700; line-height: 1.4;}
.ddfactory-service > li > ul {display: grid; grid-template-rows: repeat(3, 1fr); grid-auto-flow: column; grid-gap: 2rem;}
.ddfactory-service > li > ul > li {white-space: nowrap; width: 28vw; max-width: 46rem; font-size: clamp(1.4rem, 1.6vw, 3rem); font-weight: 500; display: flex; align-items: center; column-gap: .8rem;}
.ddfactory-service > li > ul > li::before {content: ''; width: .4rem; height: .4rem; display: block; background-color: var(--white);}

.ddfactory-service > li:nth-child(3) > ul {grid-template-rows: repeat(4, 1fr);}

@media screen and (max-width: 768px) {
    .ddfactory-service-wrap > p {font-size: 1.4rem;}
    
    .ddfactory-service > li {padding: 2rem 0; flex-flow: column; row-gap: 1.6rem;}
    .ddfactory-service > li > h4 {font-size: 1..6rem;}
    .ddfactory-service > li > h4 > br {display: none;}
    .ddfactory-service > li > ul {display: flex; flex-flow: column; grid-gap: 1.6rem;}
    .ddfactory-service > li > ul > li {font-size: 1.4rem; width: 100%; max-width: initial;}
}

/* stuido oDDinary */
.oddinary-contents {display: flex; flex-flow: column; row-gap: 2.4rem; align-items: center; justify-content: center;} 
.oddinary-contents > h4 {font-size: clamp(1.8rem, 2.4vw, 4.4rem); font-weight: 800; line-height: 1.4; text-align: center; line-height: 1.2;}
.oddinary-contents > div {margin-top: -2.4rem; position: relative; display: flex; align-items: end;}
.oddinary-contents > div > img:not(:first-child) {margin-left: -5.8vw; position: relative;}

.oddinary-contents > div .tvc {width: 20vw; z-index: 1;}
.oddinary-contents > div .youtube {width: 25.6vw; z-index: 2;}
.oddinary-contents > div .motion {width: 21vw; z-index: 3;}
.oddinary-contents > div .viral {width: 23.5vw; z-index: 1;}
.oddinary-contents > div .contents {width: 21vw; z-index: 2;}

.oddinary-mem-intro {display: flex; column-gap: 3rem;}
.oddinary-mem-intro + .oddinary-mem-intro {margin-top: 6rem;}
.oddinary-mem-intro .name {width: 16vw; display: flex; flex-flow: column;}
.oddinary-mem-intro .name > p {font-size: clamp(1.4rem, 1.6vw, 3rem); font-weight: 600; display: flex; flex-flow: column; row-gap: 1.6rem; margin-bottom: 1.6rem;}
.oddinary-mem-intro .name > p::after {content: ''; width: .8rem; height: .4rem; background-color: var(--white);}
.oddinary-mem-intro .name > h4 {font-size: clamp(1.8rem, 2.4vw, 4.4rem); font-weight: 700;}
.oddinary-mem-intro .name > h4 + h4 {margin-top: 1.2rem;}
.oddinary-mem-intro .history {width: calc(100% - 16vw - 3rem);}

.oddinary-portfolio-wrap {display: flex; flex-flow: column; row-gap: 6rem;}
.oddinary-portfolio-wrap .desc {display: flex; flex-flow: column; row-gap: 1.2rem; margin-bottom: 1.6rem;}
.oddinary-portfolio-wrap .desc > h4 {font-size: clamp(1.8rem, 2.4vw, 4.4rem); font-weight: 700;}
.oddinary-portfolio-wrap .desc > p {font-size: clamp(1.4rem, 1.6vw, 3rem); font-size: 500;}
.oddinary-portfolio-wrap img {width: 100%;}

@media screen and (max-width: 768px) {
    .oddinary-contents > h4 {font-size: 5.4vw;}
    .oddinary-contents > div {margin-top: 0; align-items: start; justify-content: center; width: 100%; height: 82vw;}
    .oddinary-contents > div > img:not(:first-child),
    .oddinary-contents > div > img {margin-left: 0; position: absolute;}
    
    .oddinary-contents > div .tvc {width: 34vw; top: 48vw; left: 0;}
    .oddinary-contents > div .youtube {width: 44vw; top: 16vw; left: 0;}
    .oddinary-contents > div .motion {width: 37vw;}
    .oddinary-contents > div .viral {width: 40vw; top: 16vw; right: 0;}
    .oddinary-contents > div .contents {width: 37vw; top: 45vw; right: 0;}
    
    .oddinary-mem-intro {flex-flow: column; row-gap: 4rem;}
    .oddinary-mem-intro + .oddinary-mem-intro {margin-top: 4rem;}
    .oddinary-mem-intro .name {width: 100%;}
    .oddinary-mem-intro .name > p {font-size: 1.4rem;}
    .oddinary-mem-intro .name > h4 {font-size: 2rem;}
    .oddinary-mem-intro .history {width: 100%;}
    
    .oddinary-portfolio-wrap {row-gap: 4rem;}
    .oddinary-portfolio-wrap .desc > h4 {font-size: 2rem;}
    .oddinary-portfolio-wrap .desc > p {font-size: 1.4rem;}
}

/* Stuido DD */
.studiodd-concept {display: grid; grid-template-columns: repeat(3, 1fr);}
.studiodd-concept > li {padding: 7.2rem 0; display: flex; flex-flow: column; row-gap: 1.8rem; align-items: center; background-repeat: no-repeat; background-size: cover; background-position: center;}
.studiodd-concept > li:nth-child(1) {background-image: url(../img/about/studiodd-img01.png);}
.studiodd-concept > li:nth-child(2) {background-image: url(../img/about/studiodd-img02.png);}
.studiodd-concept > li:nth-child(3) {background-image: url(../img/about/studiodd-img03.png);}
.studiodd-concept > li > h4 {font-size: clamp(1.8rem, 2.4vw, 4.4rem); text-align: center; font-weight: 700;}
.studiodd-concept > li > h5 {font-size: clamp(1.4rem, 1.6vw, 3rem); text-align: center; font-weight: 600; line-height: 1.6; margin-top: .4rem;}
.studiodd-concept > li > p {font-size: clamp(1.2rem, 1.4vw, 2.6rem); text-align: center; font-weight: 500; line-height: 1.8;}

.cafedd-photo {display: flex; flex-flow: column; row-gap: 14rem;}
.cafedd-photo > div {position: relative; display: flex;}
.cafedd-photo > div > p {font-size: clamp(4rem, 6.4vw, 12rem); line-height: 1.2; font-weight: 500; color: var(--white); position: absolute; right: 0; bottom: 4vw;}

.cafedd-photo .photo01 {width: 50vw;}
.cafedd-photo .photo02 {width: 66vw; margin-left: auto; margin-right: -6rem;}
.cafedd-photo .photo03 {width: 100%;}

.cafedd-photo .img01 {width: 20.8vw; position: absolute; right: 0; top: 14vw;}
.cafedd-photo .img02 {width: 40.5vw; position: absolute; left: 0; bottom: -4vw;}

.cafedd-video {width: 100%; height: 50vw; margin-top: 14rem;}

.cafedd-intro {display: flex; flex-flow: column; align-items: center; justify-content: center;}
.cafedd-intro > img {margin-bottom: 2rem;}
.cafedd-intro > h5 {font-size: clamp(1.8rem, 2.4vw, 4.4rem); line-height: 1.6; font-weight: 700;}
.cafedd-intro > p {font-size: clamp(1.4rem, 1.6vw, 3rem); line-height: 1.6; font-weight: 500; text-align: center;}
.cafedd-intro > p > br {display: none;}

.cafedd-rolling-wrap {margin: 6rem -6rem 0; width: 100vw; overflow: hidden; display: flex; align-items: center;}
.cafedd-rolling {display: flex; align-items: center;}
.cafedd-rolling > li {display: block; margin-right: 2rem;}
.cafedd-rolling > li img {width: 16vw;}
.cafedd-rolling > li img[src$=".png"] {margin-top: 2vw;}

.cafedd-rolling.original {animation: rolling01 50s linear infinite;}
.cafedd-rolling.clone {animation: rolling02 50s linear infinite;}

@media screen and (max-width: 768px) {
    .studiodd-concept {grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(3, 1fr);}
    .studiodd-concept > li {padding: 4rem 0;}
    .studiodd-concept > li:nth-child(1) {background-image: url(../img/about/studiodd-img01-mobile.png);}
    .studiodd-concept > li:nth-child(2) {background-image: url(../img/about/studiodd-img02-mobile.png);}
    .studiodd-concept > li:nth-child(3) {background-image: url(../img/about/studiodd-img03-mobile.png);}
    .studiodd-concept > li > h4 {font-size: 2rem;}
    .studiodd-concept > li > h5 {font-size: 1.4rem; margin-top: 1.2rem;}
    .studiodd-concept > li > p {font-size: 1.4rem;}
    
    .cafedd-photo {row-gap: 32vw;}
    .cafedd-photo > div {position: relative; display: flex;}
    .cafedd-photo > div > p {font-size: clamp(2.4rem, 8.5vw, 6rem); bottom: -24vw;}
    
    .cafedd-photo .photo01 {width: 66.7vw;}
    .cafedd-photo .photo02 {width: 84vw; margin-left: auto; margin-right: -2rem;}
    
    .cafedd-photo .img01 {width: 34.6vw; top: initial; bottom: -3.2vw;}
    .cafedd-photo .img02 {width: 54.6vw; bottom: -8vw;}

    .cafedd-video {height: 48vw; margin-top: 10rem;}
    
    .cafedd-intro {display: flex; flex-flow: column; align-items: center; justify-content: center;}
    .cafedd-intro > img {width: 6.6rem;}
    .cafedd-intro > h5 {font-size: 2rem;}
    .cafedd-intro > p {font-size: 1.4rem;}
    .cafedd-intro > p > br {display: block;}
        
    .cafedd-rolling-wrap {margin: 4rem -2rem 0;}
    .cafedd-rolling > li {margin-right: 1.2rem;}
    .cafedd-rolling > li img {width: 10rem;}
    .cafedd-rolling > li img[src$=".png"] {margin-top: 2rem;}
}

/* 프로젝트 */
.project-wrap {display: flex; flex-flow: column; row-gap: 10rem;}
.project-wrap .row {display: flex; column-gap: 2.4rem;}
.project-wrap .row > a {width: 100%; display: flex; flex-flow: column; row-gap: 2rem;}
.project-wrap .row > a > img {width: 100%;}
.project-wrap .row > a .desc {display: flex; flex-flow: column; row-gap: 1.2rem;}
.project-wrap .row > a .desc > h3 {font-size: clamp(1.6rem, 2vw, 3.8rem); font-weight: 500; line-height: 1.6; word-break: keep-all;}
.project-wrap .row > a .desc > span {font-size: clamp(1.2rem, 1.4vw, 2.6rem); font-weight: 500; color: var(--gray600);}

.project-wrap .row > a:nth-child(1):nth-last-child(1) {width: 60vw;}
.project-wrap .row:nth-child(5n+1) {justify-content: end;}
.project-wrap .row:nth-child(5n+2) > a:nth-child(2) {margin-top: 23vw;}
.project-wrap .row:nth-child(5n+3) {justify-content: center;}
.project-wrap .row:nth-child(5n+4) {flex-flow: row-reverse;}
.project-wrap .row:nth-child(5n+4) > a:nth-child(2) {margin-top: 23vw;}

@media screen and (max-width: 768px) {
    .project-wrap {row-gap: 3.2rem;}
    .project-wrap .row {flex-flow: column; row-gap: 2.4rem;}
    .project-wrap .row > a {row-gap: 1.6rem;}
    .project-wrap .row > a > img {width: 100vw; margin: 0 -2rem;}
    .project-wrap .row > a .desc > h3 {font-size: 1.6rem;}
    .project-wrap .row > a .desc > span {font-size: 1.2rem;}
    
    .project-wrap .row > a:nth-child(1):nth-last-child(1) {width: 100%;}
    .project-wrap .row:nth-child(5n+1) {justify-content: initial;}
    .project-wrap .row:nth-child(5n+2) > a:nth-child(2) {margin-top: 0;}
    .project-wrap .row:nth-child(5n+3) {justify-content: initial;}
    .project-wrap .row:nth-child(5n+4) {flex-flow: column;}
    .project-wrap .row:nth-child(5n+4) > a:nth-child(2) {margin-top: 0;}
}

/* 연락 */
.contact-wrap {padding-top: 10rem;}
.contact-wrap > h2 {font-size: clamp(4rem, 6.4vw, 12rem); font-weight: 500; line-height: 1.2;}
.contact-wrap > p {margin-top: 6rem; font-size: clamp(2.4rem, 3.2vw, 6rem); line-height: 1.2;}
.contact-wrap > span {display: block; margin-top: 3.2rem; font-size: clamp(1.4rem, 1.6vw, 3rem); line-height: 1.6;}

.contact-banner-wrap {display: flex; align-items: center; width: 100vw; margin-top: 12rem; overflow: hidden; position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.contact-banner {display: flex; align-items: center;}
.contact-banner > * {padding-right: 4rem;}
.contact-banner > a {width: fit-content; font-size: clamp(3rem, 5.6vw, 10.4rem); white-space: nowrap; cursor: pointer;}
.contact-banner > a > span {display: flex; align-items: center; column-gap: 3.2rem; font-weight: 700;}
.contact-banner > a > span > i {width: 5.2vw; height: 5.2vw;}
.contact-banner > img {width: 18vw;}

.contact-banner.original {animation: rolling01 40s linear infinite;}
.contact-banner.clone {animation: rolling02 40s linear infinite;} 

@media screen and (max-width: 768px) {
    .contact-wrap {padding-top: 2rem;}
    .contact-wrap > h2 {font-size: clamp(3rem, 10.6vw, 7rem);}
    .contact-wrap > p {font-size: 2rem;}
    .contact-wrap > span {margin-top: 2.4rem; font-size: 1.4rem;}
    
    .contact-banner-wrap {margin-top: 6rem;}
    .contact-banner > * {padding-right: 2rem;}
    .contact-banner > a {font-size: 4.8rem;}
    .contact-banner > a > span {column-gap: 2rem;}
    .contact-banner > a > span > i {width: 4rem; height: 4rem;}
    .contact-banner > img {width: 14rem;}
}

/* 연락 > 요청 */
.request-category {display: flex; flex-flow: column; row-gap: 4rem;}
.request-category > ul {display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 1vw;}
.request-category > ul > li {height: 4.8vw;}

.request-category input[type="checkbox"] + label {width: 100%; height: 100%; border: 1px solid var(--white); align-items: center; justify-content: center; transition: background-color .3s ease-in-out;}
.request-category input[type="checkbox"] + label::before {content: none;}
.request-category input[type="checkbox"] + label > p {font-weight: 700;}

.request-category input[type="checkbox"]:checked + label {background-color: var(--white);}
.request-category input[type="checkbox"]:checked + label > p {color: var(--black);}

.enter-info {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2.4vw 5.4rem;}
.enter-info > li {position: relative; display: flex; align-items: center; column-gap: 1rem; border-bottom: 1px solid var(--white); padding-bottom: 1.6rem;}
.enter-info > li > label {font-size: clamp(1.4rem, 1.6vw, 3rem); font-weight: 500; color: var(--white);}
.enter-info > li > input {height: 100%; border: 0; flex: 1;}
.enter-info > li .dropdown > button {border: 0; height: fit-content;}
.enter-info > li .dropdown .options {left: 0;}
.enter-info > li .dropdown .calendar {left: 0;}

.request-desc {display: flex; flex-flow: column; row-gap: 2vw;}
.request-desc .action {display: flex; justify-content: space-between;}

@media screen and (max-width: 768px) {
    .request-category {row-gap: 3.2rem;}
    .request-category > ul {grid-template-columns: repeat(2, 1fr); grid-gap: .8rem;}
    .request-category > ul > li {height: 4.6rem;}
    
    .enter-info {grid-template-columns: repeat(1, 1fr); grid-gap: 3.2rem;}
    .enter-info > li {padding-bottom: 1.2rem;}
    .enter-info > li > label {font-size: 1.4rem;}
    .enter-info > li .dropdown .options {top: 3rem!important;}
    .enter-info > li .dropdown .calendar {top: 3rem!important;}
    
    .request-desc {row-gap: 1.2rem;}
    .request-desc .action {flex-flow: column; row-gap: 2.4rem;}
    .request-desc .action > button {margin-left: auto;}
}


@keyframes rolling01 {
	0% {transform: translateX(0);}
	50% {transform: translateX(-100%);}
	50.01% {transform: translateX(100%);}
	100% {transform: translateX(0);}
}

@keyframes rolling02 {
	0% {transition: translateX(0);}
	100% {transform: translateX(-200%);}
}