fix: 스타일정리
This commit is contained in:
이희원
parent
06b9bf7c52
commit
8ffba8e76a
270
src/index.html
270
src/index.html
|
|
@ -15,29 +15,29 @@
|
|||
<header class="gnb" id="gnb">
|
||||
<div class="gnb__inner">
|
||||
<a href="#intro" class="gnb__logo">
|
||||
<img src="images/logo.svg" alt="BODA LAB">
|
||||
<img class="gnb__logoImg" src="images/logo.svg" alt="BODA LAB">
|
||||
</a>
|
||||
<nav class="gnb__nav">
|
||||
<ul>
|
||||
<li class="is-active"><a href="#intro">HOME</a></li>
|
||||
<li><a href="#about">ABOUT</a></li>
|
||||
<li><a href="#project">PROJECTS</a></li>
|
||||
<li><a href="#contact">CONTACT</a></li>
|
||||
<ul class="gnb__navList">
|
||||
<li class="gnb__navItem is-active"><a class="gnb__navLink" href="#intro">HOME</a></li>
|
||||
<li class="gnb__navItem"><a class="gnb__navLink" href="#about">ABOUT</a></li>
|
||||
<li class="gnb__navItem"><a class="gnb__navLink" href="#project">PROJECTS</a></li>
|
||||
<li class="gnb__navItem"><a class="gnb__navLink" href="#contact">CONTACT</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="gnb__hamburger" aria-label="메뉴 열기" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span class="gnb__hamburgerLine"></span>
|
||||
<span class="gnb__hamburgerLine"></span>
|
||||
<span class="gnb__hamburgerLine"></span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- 모바일 메뉴 -->
|
||||
<nav class="gnb__mobile-nav">
|
||||
<ul>
|
||||
<li><a href="#intro">HOME</a></li>
|
||||
<li><a href="#about">ABOUT</a></li>
|
||||
<li><a href="#project">PROJECTS</a></li>
|
||||
<li><a href="#contact">CONTACT</a></li>
|
||||
<nav class="gnb__mobileNav">
|
||||
<ul class="gnb__mobileNavList">
|
||||
<li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#intro">HOME</a></li>
|
||||
<li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#about">ABOUT</a></li>
|
||||
<li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#project">PROJECTS</a></li>
|
||||
<li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#contact">CONTACT</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
@ -45,157 +45,157 @@
|
|||
<main>
|
||||
|
||||
<!-- 01. INTRO -->
|
||||
<section id="intro" class="section section--intro">
|
||||
<section id="intro" class="intro">
|
||||
<div class="intro__blobs" aria-hidden="true">
|
||||
<span class="blob blob--cyan"></span>
|
||||
<span class="blob blob--purple"></span>
|
||||
<span class="blob blob--blue"></span>
|
||||
<span class="blob blobCyan"></span>
|
||||
<span class="blob blobPurple"></span>
|
||||
<span class="blob blobBlue"></span>
|
||||
</div>
|
||||
<div class="intro__content">
|
||||
<p class="intro__sub">Creative Development Company</p>
|
||||
<h1 class="intro__title">THE BODA LAB</h1>
|
||||
</div>
|
||||
<a href="#about" class="scroll-down" aria-label="아래로 스크롤">
|
||||
<a href="#about" class="scrollDown" aria-label="아래로 스크롤">
|
||||
<img src="images/icon-scroll-down.svg" alt="">
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<!-- 02. ABOUT -->
|
||||
<section id="about" class="section section--about">
|
||||
<section id="about" class="about">
|
||||
<div class="about__inner">
|
||||
<div class="about__text">
|
||||
<h2 class="section-title">ABOUT US</h2>
|
||||
<h2 class="sectionTitle">ABOUT US</h2>
|
||||
<p class="about__desc">
|
||||
The BODA LAB은 디지털시대에 발맞춰 클라이언트의 비즈니스를 위한<br>
|
||||
다양한 기술적 노하우로 완성된 경험을 제공합니다.<br>
|
||||
우리의 활동은 웹, 앱, 모바일을 넘나들며 세상의 모든 비즈니스 활동에<br>
|
||||
The BODA LAB은 디지털시대에 발맞춰 클라이언트의 비즈니스를 위한<br class="breakLine">
|
||||
다양한 기술적 노하우로 완성된 경험을 제공합니다.<br class="breakLine">
|
||||
우리의 활동은 웹, 앱, 모바일을 넘나들며 세상의 모든 비즈니스 활동에<br class="breakLine">
|
||||
강한 영향력을 전달합니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="about__image">
|
||||
<img src="images/about-hand.jpg" alt="스케치하는 손">
|
||||
<img class="about__imageThumb" src="images/about-hand.jpg" alt="스케치하는 손">
|
||||
<p class="about__caption">Creative Development Company BODA.Lab</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 03. HISTORY -->
|
||||
<section id="history" class="section section--history">
|
||||
<section id="history" class="history">
|
||||
<div class="history__top">
|
||||
<h2 class="section-title section-title--dark">HISTORY</h2>
|
||||
<h2 class="sectionTitle sectionTitleDark">HISTORY</h2>
|
||||
<div class="history__timeline">
|
||||
<div class="history__year-group">
|
||||
<div class="history__yearGroup">
|
||||
<span class="history__year">2024</span>
|
||||
<div class="history__divider"></div>
|
||||
<ul class="history__list">
|
||||
<li><strong>12.01</strong><span>신한은행 슈퍼소울 운영 계약</span></li>
|
||||
<li><strong>09.01</strong><span>한화금융통합 서비스 구축 계약</span></li>
|
||||
<li><strong>05.30</strong><span>신한은행 슈퍼소울 구축 계약</span></li>
|
||||
<li><strong>05.01</strong><span>롯데 렌터카 오토리스 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">12.01</strong><span class="history__listText">신한은행 슈퍼소울 운영 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">09.01</strong><span class="history__listText">한화금융통합 서비스 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">05.30</strong><span class="history__listText">신한은행 슈퍼소울 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">05.01</strong><span class="history__listText">롯데 렌터카 오토리스 구축 계약</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="history__year-group">
|
||||
<div class="history__yearGroup">
|
||||
<span class="history__year">2023</span>
|
||||
<div class="history__divider"></div>
|
||||
<ul class="history__list">
|
||||
<li><strong>12.01</strong><span>신한은행 슈퍼소울 운영 계약</span></li>
|
||||
<li><strong>11.01</strong><span>한화금융 라이프 플러스 아카데미 구축 계약</span></li>
|
||||
<li><strong>10.01</strong><span>대교 차세대 구축 계약</span></li>
|
||||
<li><strong>09.01</strong><span>한화금융통합 서비스 구축 계약</span></li>
|
||||
<li><strong>05.30</strong><span>신한은행 슈퍼소울 구축 계약</span></li>
|
||||
<li><strong>05.01</strong><span>롯데 렌터카 오토리스 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">12.01</strong><span class="history__listText">신한은행 슈퍼소울 운영 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">11.01</strong><span class="history__listText">한화금융 라이프 플러스 아카데미 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">10.01</strong><span class="history__listText">대교 차세대 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">09.01</strong><span class="history__listText">한화금융통합 서비스 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">05.30</strong><span class="history__listText">신한은행 슈퍼소울 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">05.01</strong><span class="history__listText">롯데 렌터카 오토리스 구축 계약</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="history__year-group">
|
||||
<div class="history__yearGroup">
|
||||
<span class="history__year">2022</span>
|
||||
<div class="history__divider"></div>
|
||||
<ul class="history__list">
|
||||
<li><strong>11.01</strong><span>한화금융 서비스앱 플러스 리뉴얼 2차 계약</span></li>
|
||||
<li><strong>09.01</strong><span>한화금융 서비스앱 플러스 리뉴얼 1차 계약</span></li>
|
||||
<li><strong>08.01</strong><span>밀레 쇼핑몰 리뉴얼 구축 계약</span></li>
|
||||
<li><strong>07.01</strong><span>오뚜기 쇼핑몰 리뉴얼 구축 계약</span></li>
|
||||
<li><strong>05.01</strong><span>캐나다구스 코리아 쇼핑몰 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">11.01</strong><span class="history__listText">한화금융 서비스앱 플러스 리뉴얼 2차 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">09.01</strong><span class="history__listText">한화금융 서비스앱 플러스 리뉴얼 1차 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">08.01</strong><span class="history__listText">밀레 쇼핑몰 리뉴얼 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">07.01</strong><span class="history__listText">오뚜기 쇼핑몰 리뉴얼 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">05.01</strong><span class="history__listText">캐나다구스 코리아 쇼핑몰 구축 계약</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="history__year-group">
|
||||
<div class="history__yearGroup">
|
||||
<span class="history__year">2021</span>
|
||||
<div class="history__divider"></div>
|
||||
<ul class="history__list">
|
||||
<li><strong>11.22</strong><span>롯데 렌터카 차세대 구축 계약</span></li>
|
||||
<li><strong>11.01</strong><span>LSN MALL 구축 계약</span></li>
|
||||
<li><strong>7.29</strong><span>(주)보다랩 설립</span></li>
|
||||
<li><strong>5.15</strong><span>현대홈쇼핑 리뉴얼 구축 계약</span></li>
|
||||
<li><strong>01.11</strong><span>KONA I 헬스케어 구축 계약</span></li>
|
||||
<li><strong>01.11</strong><span>유아이팩토리 설립</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">11.22</strong><span class="history__listText">롯데 렌터카 차세대 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">11.01</strong><span class="history__listText">LSN MALL 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">7.29</strong><span class="history__listText">(주)보다랩 설립</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">5.15</strong><span class="history__listText">현대홈쇼핑 리뉴얼 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">01.11</strong><span class="history__listText">KONA I 헬스케어 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">01.11</strong><span class="history__listText">유아이팩토리 설립</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="history__bottom">
|
||||
<div class="history__images">
|
||||
<img class="history__img history__img--1" src="images/history-1.jpg" alt="">
|
||||
<img class="history__img history__img--2" src="images/history-2.jpg" alt="">
|
||||
<img class="history__img history__img--3" src="images/history-3.jpg" alt="">
|
||||
<img class="history__img history__img1" src="images/history-1.jpg" alt="">
|
||||
<img class="history__img history__img2" src="images/history-2.jpg" alt="">
|
||||
<img class="history__img history__img3" src="images/history-3.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 04. BODA INTRO -->
|
||||
<section id="boda-intro" class="section section--boda-intro">
|
||||
<div class="boda-intro__content">
|
||||
<h2 class="boda-intro__title">BODA Lab Co., Ltd.</h2>
|
||||
<p class="boda-intro__desc">
|
||||
accurately identifies customer needs to<br>
|
||||
achieve the best completeness and satisfaction.<br>
|
||||
We are working on a project with talented<br>
|
||||
<section id="boda-intro" class="bodaIntro">
|
||||
<div class="bodaIntro__content">
|
||||
<h2 class="bodaIntro__title">BODA Lab Co., Ltd.</h2>
|
||||
<p class="bodaIntro__desc">
|
||||
accurately identifies customer needs to<br class="breakLine">
|
||||
achieve the best completeness and satisfaction.<br class="breakLine">
|
||||
We are working on a project with talented<br class="breakLine">
|
||||
people with high technology.
|
||||
</p>
|
||||
<a href="#vision" class="scroll-down scroll-down--sm" aria-label="아래로 스크롤">
|
||||
<a href="#vision" class="scrollDown scrollDownSm" aria-label="아래로 스크롤">
|
||||
<img src="images/icon-scroll-down.svg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 05. VISION -->
|
||||
<section id="vision" class="section section--vision">
|
||||
<section id="vision" class="vision">
|
||||
<div class="vision__inner">
|
||||
<div class="vision__item">
|
||||
<div class="vision__text">
|
||||
<em class="vision__keyword">Perspective</em>
|
||||
<p>클라이언트의 고유한 가치를 발견하고<br>차별화된 디지털 경험을 설계합니다.</p>
|
||||
<p class="vision__textDesc">클라이언트의 고유한 가치를 발견하고<br class="breakLine">차별화된 디지털 경험을 설계합니다.</p>
|
||||
</div>
|
||||
<div class="vision__image">
|
||||
<img src="images/vision-1.jpg" alt="Uniqueness">
|
||||
<img class="vision__imageThumb" src="images/vision-1.jpg" alt="Uniqueness">
|
||||
</div>
|
||||
</div>
|
||||
<div class="vision__item vision__item--reverse">
|
||||
<div class="vision__item vision__itemReverse">
|
||||
<div class="vision__image">
|
||||
<img src="images/vision-2.jpg" alt="Expertise">
|
||||
<img class="vision__imageThumb" src="images/vision-2.jpg" alt="Expertise">
|
||||
</div>
|
||||
<div class="vision__text">
|
||||
<em class="vision__keyword">Expertise</em>
|
||||
<p>10년 이상의 기술 노하우를 기반으로<br>최적의 솔루션을 제공합니다.</p>
|
||||
<p class="vision__textDesc">10년 이상의 기술 노하우를 기반으로<br class="breakLine">최적의 솔루션을 제공합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vision__item">
|
||||
<div class="vision__text">
|
||||
<em class="vision__keyword">Satisfaction</em>
|
||||
<p>고객의 만족을 최우선 가치로 삼아<br>완성도 높은 결과물을 만듭니다.</p>
|
||||
<p class="vision__textDesc">고객의 만족을 최우선 가치로 삼아<br class="breakLine">완성도 높은 결과물을 만듭니다.</p>
|
||||
</div>
|
||||
<div class="vision__image">
|
||||
<img src="images/vision-3.jpg" alt="Satisfaction">
|
||||
<img class="vision__imageThumb" src="images/vision-3.jpg" alt="Satisfaction">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 06. PROJECT -->
|
||||
<section id="project" class="section section--project">
|
||||
<section id="project" class="project">
|
||||
<div class="project__inner">
|
||||
<h2 class="section-title project__heading">PROJECT</h2>
|
||||
<h2 class="sectionTitle project__heading">PROJECT</h2>
|
||||
<div class="project__grid">
|
||||
<article class="project__card">
|
||||
<div class="project__thumb"><img src="images/project-1.jpg" alt="신한유니버설앱 구축"></div>
|
||||
<div class="project__thumb"><img class="project__thumbImg" src="images/project-1.jpg" alt="신한유니버설앱 구축"></div>
|
||||
<div class="project__info">
|
||||
<div class="project__meta"><h3 class="project__name">신한유니버설앱 구축</h3><span class="project__date">2023.12</span></div>
|
||||
<p class="project__company">신한은행</p>
|
||||
|
|
@ -203,7 +203,7 @@
|
|||
</div>
|
||||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb"><img src="images/project-2.jpg" alt="SK그룹 공식앱 내부 모바일"></div>
|
||||
<div class="project__thumb"><img class="project__thumbImg" src="images/project-2.jpg" alt="SK그룹 공식앱 내부 모바일"></div>
|
||||
<div class="project__info">
|
||||
<div class="project__meta"><h3 class="project__name">SK그룹 공식앱 내부 모바일</h3><span class="project__date">2023.12</span></div>
|
||||
<p class="project__company">SK그룹</p>
|
||||
|
|
@ -211,7 +211,7 @@
|
|||
</div>
|
||||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb"><img src="images/project-3.jpg" alt="PNS네트웍스 디지털 플랫폼 구축"></div>
|
||||
<div class="project__thumb"><img class="project__thumbImg" src="images/project-3.jpg" alt="PNS네트웍스 디지털 플랫폼 구축"></div>
|
||||
<div class="project__info">
|
||||
<div class="project__meta"><h3 class="project__name">PNS네트웍스 디지털 플랫폼 구축</h3><span class="project__date">2023.04</span></div>
|
||||
<p class="project__company">PNS 네트웍스</p>
|
||||
|
|
@ -219,7 +219,7 @@
|
|||
</div>
|
||||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb"><img src="images/project-4.jpg" alt="롯데렌터카 차세대"></div>
|
||||
<div class="project__thumb"><img class="project__thumbImg" src="images/project-4.jpg" alt="롯데렌터카 차세대"></div>
|
||||
<div class="project__info">
|
||||
<div class="project__meta"><h3 class="project__name">롯데렌터카 차세대</h3><span class="project__date">2022.05</span></div>
|
||||
<p class="project__company">롯데</p>
|
||||
|
|
@ -227,7 +227,7 @@
|
|||
</div>
|
||||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb"><img src="images/project-5.jpg" alt="오뚜기 쇼핑몰 구축"></div>
|
||||
<div class="project__thumb"><img class="project__thumbImg" src="images/project-5.jpg" alt="오뚜기 쇼핑몰 구축"></div>
|
||||
<div class="project__info">
|
||||
<div class="project__meta"><h3 class="project__name">오뚜기 쇼핑몰 구축</h3><span class="project__date">2022.07</span></div>
|
||||
<p class="project__company">오뚜기</p>
|
||||
|
|
@ -235,7 +235,7 @@
|
|||
</div>
|
||||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb"><img src="images/project-6.jpg" alt="캐나다구스 구축"></div>
|
||||
<div class="project__thumb"><img class="project__thumbImg" src="images/project-6.jpg" alt="캐나다구스 구축"></div>
|
||||
<div class="project__info">
|
||||
<div class="project__meta"><h3 class="project__name">캐나다구스 구축</h3><span class="project__date">2022.05</span></div>
|
||||
<p class="project__company">캐나다구스 코리아</p>
|
||||
|
|
@ -243,7 +243,7 @@
|
|||
</div>
|
||||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb"><img src="images/project-7.jpg" alt="한옥홈페이지 서버 이관"></div>
|
||||
<div class="project__thumb"><img class="project__thumbImg" src="images/project-7.jpg" alt="한옥홈페이지 서버 이관"></div>
|
||||
<div class="project__info">
|
||||
<div class="project__meta"><h3 class="project__name">한옥홈페이지 서버 이관</h3><span class="project__date">2022.11</span></div>
|
||||
<p class="project__company">더한옥</p>
|
||||
|
|
@ -251,7 +251,7 @@
|
|||
</div>
|
||||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb"><img src="images/project-8.jpg" alt="그린카 차세대"></div>
|
||||
<div class="project__thumb"><img class="project__thumbImg" src="images/project-8.jpg" alt="그린카 차세대"></div>
|
||||
<div class="project__info">
|
||||
<div class="project__meta"><h3 class="project__name">그린카 차세대</h3><span class="project__date">2022.11</span></div>
|
||||
<p class="project__company">그린카</p>
|
||||
|
|
@ -259,7 +259,7 @@
|
|||
</div>
|
||||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb project__thumb--empty"></div>
|
||||
<div class="project__thumb project__thumbEmpty"></div>
|
||||
<div class="project__info">
|
||||
<div class="project__meta"><h3 class="project__name">프로스펙스 구축</h3><span class="project__date">2021.01</span></div>
|
||||
<p class="project__company">(주)LS네트웍스</p>
|
||||
|
|
@ -267,7 +267,7 @@
|
|||
</div>
|
||||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb project__thumb--empty"></div>
|
||||
<div class="project__thumb project__thumbEmpty"></div>
|
||||
<div class="project__info">
|
||||
<div class="project__meta"><h3 class="project__name">중소기업창업</h3><span class="project__date">2021.11</span></div>
|
||||
<p class="project__company">중소벤처기업부</p>
|
||||
|
|
@ -275,7 +275,7 @@
|
|||
</div>
|
||||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb project__thumb--empty"></div>
|
||||
<div class="project__thumb project__thumbEmpty"></div>
|
||||
<div class="project__info">
|
||||
<div class="project__meta"><h3 class="project__name">한화 GAsk 구축 프로젝트</h3><span class="project__date">2021.11</span></div>
|
||||
<p class="project__company">한화</p>
|
||||
|
|
@ -283,7 +283,7 @@
|
|||
</div>
|
||||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb project__thumb--empty"></div>
|
||||
<div class="project__thumb project__thumbEmpty"></div>
|
||||
<div class="project__info">
|
||||
<div class="project__meta"><h3 class="project__name">(주)국민은행_KB국민은행<br>리브 Reboot One 구축, 프론트개발</h3><span class="project__date">2021.10</span></div>
|
||||
<p class="project__company">국민은행</p>
|
||||
|
|
@ -291,7 +291,7 @@
|
|||
</div>
|
||||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb project__thumb--empty"></div>
|
||||
<div class="project__thumb project__thumbEmpty"></div>
|
||||
<div class="project__info">
|
||||
<div class="project__meta"><h3 class="project__name">코나아이 PC</h3><span class="project__date">2021.01</span></div>
|
||||
<p class="project__company">코나아이</p>
|
||||
|
|
@ -300,15 +300,15 @@
|
|||
</article>
|
||||
</div>
|
||||
<div class="project__more">
|
||||
<a href="#" class="btn-more">+ VIEW MORE</a>
|
||||
<a href="#" class="btnMore">+ VIEW MORE</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 07. EXPERTISE -->
|
||||
<section id="expertise" class="section section--expertise">
|
||||
<section id="expertise" class="expertise">
|
||||
<div class="expertise__inner">
|
||||
<h2 class="section-title">EXPERTISE</h2>
|
||||
<h2 class="sectionTitle">EXPERTISE</h2>
|
||||
<p class="expertise__desc">The BODA LAB은 서비스와 사용자를 고려하여 다양한 경험을 제공하며,<br>거쳐간 모든 곳에서 지속적인 성장이 이루어질 수 있도록 함께합니다.</p>
|
||||
<ul class="expertise__list">
|
||||
<li class="expertise__item">
|
||||
|
|
@ -336,28 +336,28 @@
|
|||
</section>
|
||||
|
||||
<!-- 08. CONTACT / FOOTER -->
|
||||
<section id="contact" class="section section--contact">
|
||||
<section id="contact" class="contact">
|
||||
<div class="contact__inner">
|
||||
<div class="contact__left">
|
||||
<h2 class="contact__greeting">Welcome!<br><span>BODA LAB</span></h2>
|
||||
<h2 class="contact__greeting">Welcome!<br><span class="contact__greetingBrand">BODA LAB</span></h2>
|
||||
<address class="contact__address">
|
||||
<p class="contact__label">Head Office</p>
|
||||
<dl class="contact__info-list">
|
||||
<div class="contact__info-item">
|
||||
<dt>Address</dt>
|
||||
<dd>서울특별시 금천구 가산디지털2로 169-16,<br>907호 (가산하우스디퍼스타)</dd>
|
||||
<dl class="contact__infoList">
|
||||
<div class="contact__infoItem">
|
||||
<dt class="contact__infoLabel">Address</dt>
|
||||
<dd class="contact__infoValue">서울특별시 금천구 가산디지털2로 169-16,<br>907호 (가산하우스디퍼스타)</dd>
|
||||
</div>
|
||||
<div class="contact__info-item">
|
||||
<dt>e-mail</dt>
|
||||
<dd><a href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a></dd>
|
||||
<div class="contact__infoItem">
|
||||
<dt class="contact__infoLabel">e-mail</dt>
|
||||
<dd class="contact__infoValue"><a class="contact__infoLink" href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a></dd>
|
||||
</div>
|
||||
<div class="contact__info-item">
|
||||
<dt>tel</dt>
|
||||
<dd>010-1234-5678</dd>
|
||||
<div class="contact__infoItem">
|
||||
<dt class="contact__infoLabel">tel</dt>
|
||||
<dd class="contact__infoValue">010-1234-5678</dd>
|
||||
</div>
|
||||
<div class="contact__info-item">
|
||||
<dt>fax</dt>
|
||||
<dd>010-1234-5678</dd>
|
||||
<div class="contact__infoItem">
|
||||
<dt class="contact__infoLabel">fax</dt>
|
||||
<dd class="contact__infoValue">010-1234-5678</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</address>
|
||||
|
|
@ -367,49 +367,49 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- 프로젝트 문의 -->
|
||||
<div class="contact-accordion">
|
||||
<div class="contact-accordion__item is-open" id="acc-project">
|
||||
<button class="contact-accordion__header" aria-expanded="true" aria-controls="acc-project-body">
|
||||
<div class="contactAccordion">
|
||||
<div class="contactAccordion__item is-open" id="acc-project">
|
||||
<button class="contactAccordion__header" aria-expanded="true" aria-controls="acc-project-body">
|
||||
<span>프로젝트 문의</span>
|
||||
<img class="contact-accordion__icon" src="images/icon-chevron.svg" alt="">
|
||||
<img class="contactAccordion__icon" src="images/icon-chevron.svg" alt="">
|
||||
</button>
|
||||
<div class="contact-accordion__body" id="acc-project-body">
|
||||
<form class="contact-form" onsubmit="return false;">
|
||||
<div class="contact-form__row">
|
||||
<input type="text" class="contact-form__input" placeholder="회사명">
|
||||
<input type="text" class="contact-form__input" placeholder="담당자 이름">
|
||||
<div class="contactAccordion__body" id="acc-project-body">
|
||||
<form class="contactForm" onsubmit="return false;">
|
||||
<div class="contactForm__row">
|
||||
<input type="text" class="contactForm__input" placeholder="회사명">
|
||||
<input type="text" class="contactForm__input" placeholder="담당자 이름">
|
||||
</div>
|
||||
<div class="contact-form__row">
|
||||
<input type="tel" class="contact-form__input" placeholder="연락처">
|
||||
<input type="email" class="contact-form__input" placeholder="이메일">
|
||||
<div class="contactForm__row">
|
||||
<input type="tel" class="contactForm__input" placeholder="연락처">
|
||||
<input type="email" class="contactForm__input" placeholder="이메일">
|
||||
</div>
|
||||
<textarea class="contact-form__textarea" placeholder="문의내용"></textarea>
|
||||
<div class="contact-form__agree">
|
||||
<label class="contact-form__checkbox">
|
||||
<input type="checkbox">
|
||||
<span class="contact-form__checkbox-box"></span>
|
||||
<textarea class="contactForm__textarea" placeholder="문의내용"></textarea>
|
||||
<div class="contactForm__agree">
|
||||
<label class="contactForm__checkbox">
|
||||
<input class="contactForm__checkboxInput" type="checkbox">
|
||||
<span class="contactForm__checkboxBox"></span>
|
||||
<span>개인정보보호정책에 동의합니다.</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="contact-form__submit">
|
||||
<button type="submit" class="btn-send">SEND</button>
|
||||
<div class="contactForm__submit">
|
||||
<button type="submit" class="btnSend">SEND</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 채용 -->
|
||||
<div class="contact-accordion__item" id="acc-career">
|
||||
<button class="contact-accordion__header" aria-expanded="false" aria-controls="acc-career-body">
|
||||
<div class="contactAccordion__item" id="acc-career">
|
||||
<button class="contactAccordion__header" aria-expanded="false" aria-controls="acc-career-body">
|
||||
<span>채용</span>
|
||||
<img class="contact-accordion__icon" src="images/icon-chevron.svg" alt="">
|
||||
<img class="contactAccordion__icon" src="images/icon-chevron.svg" alt="">
|
||||
</button>
|
||||
<div class="contact-accordion__body" id="acc-career-body" hidden>
|
||||
<div class="career-tags">
|
||||
<a href="#" class="career-tag">Planner & Consulting <svg viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||
<a href="#" class="career-tag">Designer <svg viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||
<a href="#" class="career-tag">Publisher <svg viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||
<a href="#" class="career-tag">Scripter <svg viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||
<div class="contactAccordion__body" id="acc-career-body" hidden>
|
||||
<div class="careerTags">
|
||||
<a href="#" class="careerTag">Planner & Consulting <svg class="careerTag__icon" viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||
<a href="#" class="careerTag">Designer <svg class="careerTag__icon" viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||
<a href="#" class="careerTag">Publisher <svg class="careerTag__icon" viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||
<a href="#" class="careerTag">Scripter <svg class="careerTag__icon" viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -419,8 +419,8 @@
|
|||
<div class="footer__inner">
|
||||
<p class="footer__brand">THE<br>BODA LAB</p>
|
||||
<p class="footer__contact">
|
||||
Mail <a href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a>
|
||||
Tel <a href="tel:010-1234-5678">010-1234-5678</a>
|
||||
Mail <a class="footer__contactLink" href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a>
|
||||
Tel <a class="footer__contactLink" href="tel:010-1234-5678">010-1234-5678</a>
|
||||
</p>
|
||||
<p class="footer__copy">© 2024 BODA LAB</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ $(function () {
|
|||
|
||||
const $gnb = $('#gnb');
|
||||
const $hamburger = $('.gnb__hamburger');
|
||||
const $mobileNav = $('.gnb__mobile-nav');
|
||||
const $mobileNav = $('.gnb__mobileNav');
|
||||
const $sections = $('section[id]');
|
||||
const $navLinks = $('.gnb__nav li');
|
||||
const $navLinks = $('.gnb__navItem');
|
||||
|
||||
// GNB 스크롤 배경
|
||||
$(window).on('scroll.gnb', { passive: true }, function () {
|
||||
|
|
@ -22,7 +22,7 @@ $(function () {
|
|||
});
|
||||
|
||||
// 모바일 메뉴 링크 클릭 시 닫기
|
||||
$('.gnb__mobile-nav a').on('click', function () {
|
||||
$('.gnb__mobileNavLink').on('click', function () {
|
||||
$hamburger.removeClass('is-open').attr('aria-expanded', false);
|
||||
$mobileNav.removeClass('is-open');
|
||||
});
|
||||
|
|
@ -45,8 +45,8 @@ $(function () {
|
|||
}
|
||||
|
||||
// Contact 아코디언
|
||||
$('.contact-accordion__header').on('click', function () {
|
||||
const $item = $(this).closest('.contact-accordion__item');
|
||||
$('.contactAccordion__header').on('click', function () {
|
||||
const $item = $(this).closest('.contactAccordion__item');
|
||||
const $body = $('#' + $(this).attr('aria-controls'));
|
||||
const isOpen = $item.hasClass('is-open');
|
||||
|
||||
|
|
|
|||
|
|
@ -36,26 +36,25 @@ a {
|
|||
|
||||
address { font-style: normal; }
|
||||
|
||||
// Common
|
||||
.section {
|
||||
section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
.sectionTitle {
|
||||
font-family: $font-sans;
|
||||
font-size: clamp(28px, 3vw, 40px);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
color: $color-white;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&--dark {
|
||||
.sectionTitleDark {
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-down {
|
||||
.scrollDown {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 50%;
|
||||
|
|
@ -69,12 +68,14 @@ address { font-style: normal; }
|
|||
|
||||
&:hover { opacity: 0.6; }
|
||||
|
||||
svg {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&--sm {
|
||||
.scrollDownSm {
|
||||
position: relative;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
|
|
@ -83,6 +84,7 @@ address { font-style: normal; }
|
|||
}
|
||||
|
||||
@include mo {
|
||||
.scrollDown {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
bottom: 24px;
|
||||
|
|
|
|||
|
|
@ -2,27 +2,17 @@
|
|||
@use '../base/mixin' as *;
|
||||
|
||||
// About
|
||||
.section--about {
|
||||
.about {
|
||||
height: 100vh;
|
||||
background: $color-bg;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
@include mo {
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.about__inner {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@include mo {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.about__text {
|
||||
|
|
@ -32,12 +22,6 @@
|
|||
width: 45%;
|
||||
padding: $gnb-height 48px 60px;
|
||||
gap: 80px;
|
||||
|
||||
@include mo {
|
||||
width: 100%;
|
||||
padding: calc(#{$gnb-height-mo} + 40px) 24px 40px;
|
||||
gap: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.about__desc {
|
||||
|
|
@ -46,31 +30,21 @@
|
|||
line-height: 1.8;
|
||||
color: $color-white;
|
||||
opacity: 0.9;
|
||||
|
||||
@include mo {
|
||||
br { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
.about__image {
|
||||
position: relative;
|
||||
width: 55%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
.about__imageThumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
@include mo {
|
||||
width: 100%;
|
||||
height: 56vw;
|
||||
min-height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
.about__caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
|
@ -84,47 +58,29 @@
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@include mo {
|
||||
font-size: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// History
|
||||
.section--history {
|
||||
.history {
|
||||
background: $color-bg;
|
||||
}
|
||||
|
||||
.history__top {
|
||||
background: $color-bg-light;
|
||||
padding: 80px 48px 60px;
|
||||
|
||||
@include mo {
|
||||
padding: 60px 24px 40px;
|
||||
}
|
||||
|
||||
.section-title--dark {
|
||||
.history__top .sectionTitleDark {
|
||||
margin-bottom: 48px;
|
||||
|
||||
@include mo {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history__timeline {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0 24px;
|
||||
|
||||
@include mo {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 40px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.history__year-group {
|
||||
.history__yearGroup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -150,136 +106,100 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
li {
|
||||
.history__listItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
strong {
|
||||
.history__listDate {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: $color-dark;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
span {
|
||||
.history__listText {
|
||||
font-size: clamp(12px, 1vw, 14px);
|
||||
font-weight: 300;
|
||||
color: $color-dark;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history__bottom {
|
||||
background: $color-bg;
|
||||
padding: 0 48px 80px;
|
||||
overflow: hidden;
|
||||
|
||||
@include mo {
|
||||
padding: 0 24px 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.history__images {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
margin-top: -80px;
|
||||
|
||||
@include mo {
|
||||
height: 260px;
|
||||
margin-top: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
.history__img {
|
||||
position: absolute;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&--1 {
|
||||
.history__img1 {
|
||||
width: 260px;
|
||||
height: 170px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
@include mo {
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
&--2 {
|
||||
.history__img2 {
|
||||
width: 370px;
|
||||
height: 400px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0;
|
||||
|
||||
@include mo {
|
||||
width: 180px;
|
||||
height: 200px;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&--3 {
|
||||
.history__img3 {
|
||||
width: 300px;
|
||||
height: 190px;
|
||||
right: 0;
|
||||
bottom: 40px;
|
||||
|
||||
@include mo {
|
||||
width: 130px;
|
||||
height: 90px;
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Boda Intro
|
||||
.section--boda-intro {
|
||||
.bodaIntro {
|
||||
height: 100vh;
|
||||
background: $color-bg;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
@include mo {
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
padding: 80px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.boda-intro__content {
|
||||
.bodaIntro__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.boda-intro__title {
|
||||
.bodaIntro__title {
|
||||
font-size: clamp(20px, 2vw, 28px);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.boda-intro__desc {
|
||||
.bodaIntro__desc {
|
||||
font-size: clamp(14px, 1.3vw, 18px);
|
||||
font-weight: 300;
|
||||
line-height: 1.8;
|
||||
color: rgba($color-white, 0.8);
|
||||
text-align: center;
|
||||
|
||||
@include mo {
|
||||
br { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
// Vision
|
||||
.section--vision {
|
||||
.vision {
|
||||
background: $color-bg;
|
||||
}
|
||||
|
||||
|
|
@ -293,18 +213,12 @@
|
|||
align-items: stretch;
|
||||
height: 33.333vh;
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
&--reverse {
|
||||
.vision__itemReverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
@include mo {
|
||||
flex-direction: column !important;
|
||||
height: auto;
|
||||
min-height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.vision__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -312,22 +226,6 @@
|
|||
width: 50%;
|
||||
padding: 40px 80px;
|
||||
gap: 20px;
|
||||
|
||||
p {
|
||||
font-size: clamp(13px, 1vw, 15px);
|
||||
font-weight: 300;
|
||||
line-height: 1.8;
|
||||
color: rgba($color-white, 0.75);
|
||||
|
||||
@include mo {
|
||||
br { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
@include mo {
|
||||
width: 100%;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.vision__keyword {
|
||||
|
|
@ -338,22 +236,97 @@
|
|||
line-height: 1;
|
||||
}
|
||||
|
||||
.vision__textDesc {
|
||||
font-size: clamp(13px, 1vw, 15px);
|
||||
font-weight: 300;
|
||||
line-height: 1.8;
|
||||
color: rgba($color-white, 0.75);
|
||||
}
|
||||
|
||||
.vision__image {
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
.vision__imageThumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.6s ease;
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
.vision__image:hover .vision__imageThumb {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
@include mo {
|
||||
.about {
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.about__inner { flex-direction: column; }
|
||||
|
||||
.about__text {
|
||||
width: 100%;
|
||||
padding: calc(#{$gnb-height-mo} + 40px) 24px 40px;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.about__image {
|
||||
width: 100%;
|
||||
height: 56vw;
|
||||
min-height: 260px;
|
||||
}
|
||||
|
||||
.about__caption {
|
||||
font-size: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.breakLine { display: none; }
|
||||
|
||||
.history__top { padding: 60px 24px 40px; }
|
||||
|
||||
.history__top .sectionTitleDark { margin-bottom: 32px; }
|
||||
|
||||
.history__timeline {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 40px 20px;
|
||||
}
|
||||
|
||||
.history__bottom { padding: 0 24px 60px; }
|
||||
|
||||
.history__images {
|
||||
height: 260px;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.history__img1 { width: 120px; height: 80px; }
|
||||
|
||||
.history__img2 { width: 180px; height: 200px; left: 50%; }
|
||||
|
||||
.history__img3 { width: 130px; height: 90px; bottom: 20px; }
|
||||
|
||||
.bodaIntro {
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
padding: 80px 24px;
|
||||
}
|
||||
|
||||
.vision__item {
|
||||
flex-direction: column !important;
|
||||
height: auto;
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
.vision__text {
|
||||
width: 100%;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.vision__image {
|
||||
width: 100%;
|
||||
height: 56vw;
|
||||
min-height: 220px;
|
||||
|
|
|
|||
|
|
@ -2,14 +2,10 @@
|
|||
@use '../base/mixin' as *;
|
||||
|
||||
// Expertise
|
||||
.section--expertise {
|
||||
.expertise {
|
||||
background: $color-bg;
|
||||
padding: 100px 48px;
|
||||
border-top: 1px solid rgba($color-white, 0.08);
|
||||
|
||||
@include mo {
|
||||
padding: 60px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.expertise__inner {
|
||||
|
|
@ -23,11 +19,6 @@
|
|||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
color: rgba($color-white, 0.6);
|
||||
|
||||
@include mo {
|
||||
margin-bottom: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.expertise__list {
|
||||
|
|
@ -35,37 +26,13 @@
|
|||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0;
|
||||
border-top: 1px solid rgba($color-white, 0.12);
|
||||
|
||||
@include mo {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.expertise__item {
|
||||
padding: 40px 32px 40px 0;
|
||||
border-right: 1px solid rgba($color-white, 0.12);
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
|
||||
@include mo {
|
||||
border-right: 1px solid rgba($color-white, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
@include mo {
|
||||
padding: 28px 20px 28px 0;
|
||||
|
||||
&:nth-child(2),
|
||||
&:nth-child(4) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:nth-child(3),
|
||||
&:nth-child(4) {
|
||||
border-top: 1px solid rgba($color-white, 0.12);
|
||||
}
|
||||
}
|
||||
&:last-child { border-right: none; }
|
||||
}
|
||||
|
||||
.expertise__num {
|
||||
|
|
@ -93,7 +60,7 @@
|
|||
}
|
||||
|
||||
// Contact
|
||||
.section--contact {
|
||||
.contact {
|
||||
background: $color-bg;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -105,11 +72,6 @@
|
|||
align-items: stretch;
|
||||
flex: 1;
|
||||
min-height: 60vh;
|
||||
|
||||
@include mo {
|
||||
flex-direction: column;
|
||||
min-height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.contact__left {
|
||||
|
|
@ -119,12 +81,6 @@
|
|||
gap: 40px;
|
||||
width: 50%;
|
||||
padding: 80px 80px 80px 48px;
|
||||
|
||||
@include mo {
|
||||
width: 100%;
|
||||
padding: 60px 24px 40px;
|
||||
gap: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact__greeting {
|
||||
|
|
@ -134,8 +90,9 @@
|
|||
font-weight: 400;
|
||||
line-height: 1.1;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
span {
|
||||
.contact__greetingBrand {
|
||||
display: block;
|
||||
font-size: clamp(16px, 1.5vw, 22px);
|
||||
font-family: $font-sans;
|
||||
|
|
@ -146,7 +103,6 @@
|
|||
margin-top: 8px;
|
||||
color: $color-cyan;
|
||||
}
|
||||
}
|
||||
|
||||
.contact__label {
|
||||
font-size: 12px;
|
||||
|
|
@ -157,37 +113,38 @@
|
|||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.contact__info-list {
|
||||
.contact__infoList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.contact__info-item {
|
||||
.contact__infoItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
dt {
|
||||
.contact__infoLabel {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
color: $color-cyan;
|
||||
}
|
||||
|
||||
dd {
|
||||
.contact__infoValue {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 1.7;
|
||||
color: rgba($color-white, 0.85);
|
||||
}
|
||||
|
||||
a {
|
||||
.contact__infoLink {
|
||||
color: inherit;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover { opacity: 0.7; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact__right {
|
||||
width: 50%;
|
||||
|
|
@ -196,11 +153,6 @@
|
|||
justify-content: center;
|
||||
padding: 80px 48px 80px 0;
|
||||
gap: 24px;
|
||||
|
||||
@include mo {
|
||||
width: 100%;
|
||||
padding: 0 24px 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact__map {
|
||||
|
|
@ -211,17 +163,16 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
// Contact accordion — 프로젝트문의 / 채용
|
||||
.contact-accordion {
|
||||
// Contact accordion
|
||||
.contactAccordion {
|
||||
border-top: 1px solid rgba($color-white, 0.08);
|
||||
}
|
||||
|
||||
.contact-accordion__item {
|
||||
.contactAccordion__item {
|
||||
border-bottom: 1px solid rgba($color-white, 0.08);
|
||||
}
|
||||
|
||||
.contact-accordion__header {
|
||||
.contactAccordion__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -238,31 +189,26 @@
|
|||
transition: opacity 0.2s;
|
||||
|
||||
&:hover { opacity: 0.7; }
|
||||
|
||||
@include mo {
|
||||
padding: 22px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-accordion__icon {
|
||||
.contactAccordion__icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.3s ease;
|
||||
object-fit: unset;
|
||||
}
|
||||
|
||||
.contact-accordion__item.is-open .contact-accordion__icon {
|
||||
.contactAccordion__item.is-open .contactAccordion__icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.contact-accordion__body {
|
||||
.contactAccordion__body {
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
transition: max-height 0.4s ease;
|
||||
|
||||
&:not([hidden]) {
|
||||
max-height: 800px;
|
||||
}
|
||||
&:not([hidden]) { max-height: 800px; }
|
||||
|
||||
&[hidden] {
|
||||
display: block !important;
|
||||
|
|
@ -271,29 +217,21 @@
|
|||
}
|
||||
|
||||
// 문의 폼
|
||||
.contact-form {
|
||||
.contactForm {
|
||||
padding: 8px 48px 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
@include mo {
|
||||
padding: 8px 24px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form__row {
|
||||
.contactForm__row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
|
||||
@include mo {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form__input,
|
||||
.contact-form__textarea {
|
||||
.contactForm__input,
|
||||
.contactForm__textarea {
|
||||
width: 100%;
|
||||
background: rgba($color-white, 0.04);
|
||||
border: 1px solid rgba($color-white, 0.1);
|
||||
|
|
@ -309,16 +247,16 @@
|
|||
&:focus { border-color: rgba($color-white, 0.3); }
|
||||
}
|
||||
|
||||
.contact-form__textarea {
|
||||
.contactForm__textarea {
|
||||
resize: none;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.contact-form__agree {
|
||||
.contactForm__agree {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.contact-form__checkbox {
|
||||
.contactForm__checkbox {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
|
@ -326,10 +264,28 @@
|
|||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: rgba($color-white, 0.6);
|
||||
}
|
||||
|
||||
input[type="checkbox"] { display: none; }
|
||||
.contactForm__checkboxInput {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-box {
|
||||
.contactForm__checkboxInput:checked + .contactForm__checkboxBox {
|
||||
background: $color-cyan;
|
||||
border-color: $color-cyan;
|
||||
}
|
||||
|
||||
.contactForm__checkboxInput:checked + .contactForm__checkboxBox::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
border-left: 1.5px solid $color-dark;
|
||||
border-bottom: 1.5px solid $color-dark;
|
||||
transform: rotate(-45deg) translateY(-2px);
|
||||
}
|
||||
|
||||
.contactForm__checkboxBox {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 1px solid rgba($color-white, 0.3);
|
||||
|
|
@ -340,29 +296,13 @@
|
|||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
input:checked + &-box {
|
||||
background: $color-cyan;
|
||||
border-color: $color-cyan;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
border-left: 1.5px solid $color-dark;
|
||||
border-bottom: 1.5px solid $color-dark;
|
||||
transform: rotate(-45deg) translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form__submit {
|
||||
.contactForm__submit {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.btn-send {
|
||||
.btnSend {
|
||||
padding: 12px 48px;
|
||||
background: $color-cyan;
|
||||
border: none;
|
||||
|
|
@ -379,18 +319,14 @@
|
|||
}
|
||||
|
||||
// 채용 태그
|
||||
.career-tags {
|
||||
.careerTags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
padding: 8px 48px 48px;
|
||||
|
||||
@include mo {
|
||||
padding: 8px 24px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.career-tag {
|
||||
.careerTag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
|
@ -402,26 +338,22 @@
|
|||
color: $color-white;
|
||||
transition: border-color 0.2s, color 0.2s;
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $color-cyan;
|
||||
color: $color-cyan;
|
||||
}
|
||||
}
|
||||
|
||||
.careerTag__icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// Footer
|
||||
.footer {
|
||||
border-top: 1px solid rgba($color-white, 0.08);
|
||||
padding: 32px 48px;
|
||||
|
||||
@include mo {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer__inner {
|
||||
|
|
@ -430,12 +362,6 @@
|
|||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@include mo {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer__brand {
|
||||
|
|
@ -451,16 +377,13 @@
|
|||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: rgba($color-white, 0.5);
|
||||
}
|
||||
|
||||
a {
|
||||
.footer__contactLink {
|
||||
color: rgba($color-white, 0.5);
|
||||
transition: color 0.2s;
|
||||
&:hover { color: $color-white; }
|
||||
}
|
||||
|
||||
@include mo {
|
||||
font-size: 12px;
|
||||
}
|
||||
&:hover { color: $color-white; }
|
||||
}
|
||||
|
||||
.footer__copy {
|
||||
|
|
@ -469,3 +392,60 @@
|
|||
color: rgba($color-white, 0.3);
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
@include mo {
|
||||
.expertise { padding: 60px 24px; }
|
||||
|
||||
.expertise__desc {
|
||||
margin-bottom: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.expertise__list { grid-template-columns: 1fr 1fr; }
|
||||
|
||||
.expertise__item {
|
||||
padding: 28px 20px 28px 0;
|
||||
|
||||
&:last-child { border-right: 1px solid rgba($color-white, 0.12); }
|
||||
|
||||
&:nth-child(2),
|
||||
&:nth-child(4) { border-right: none; }
|
||||
|
||||
&:nth-child(3),
|
||||
&:nth-child(4) { border-top: 1px solid rgba($color-white, 0.12); }
|
||||
}
|
||||
|
||||
.contact__inner {
|
||||
flex-direction: column;
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
.contact__left {
|
||||
width: 100%;
|
||||
padding: 60px 24px 40px;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.contact__right {
|
||||
width: 100%;
|
||||
padding: 0 24px 60px;
|
||||
}
|
||||
|
||||
.contactAccordion__header { padding: 22px 24px; }
|
||||
|
||||
.contactForm { padding: 8px 24px 40px; }
|
||||
|
||||
.contactForm__row { grid-template-columns: 1fr; }
|
||||
|
||||
.careerTags { padding: 8px 24px 40px; }
|
||||
|
||||
.footer { padding: 24px 20px; }
|
||||
|
||||
.footer__inner {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.footer__contact { font-size: 12px; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,38 +15,41 @@
|
|||
background: rgba($color-bg, 0.92);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
}
|
||||
|
||||
&__inner {
|
||||
.gnb__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
padding: 0 48px;
|
||||
|
||||
@include mo {
|
||||
padding: 0 20px;
|
||||
height: $gnb-height-mo;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
.gnb__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
.gnb__logoImg {
|
||||
width: 90px;
|
||||
height: auto;
|
||||
}
|
||||
object-fit: unset;
|
||||
}
|
||||
|
||||
&__nav {
|
||||
ul {
|
||||
.gnb__nav {
|
||||
// nav block — layout only
|
||||
}
|
||||
|
||||
.gnb__navList {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
li a {
|
||||
.gnb__navItem {
|
||||
// list item — no extra styles needed
|
||||
}
|
||||
|
||||
.gnb__navLink {
|
||||
display: block;
|
||||
padding: 24px 32px;
|
||||
font-size: 16px;
|
||||
|
|
@ -58,16 +61,11 @@
|
|||
&:hover { color: $color-cyan; }
|
||||
}
|
||||
|
||||
li.is-active a {
|
||||
.gnb__navItem.is-active .gnb__navLink {
|
||||
color: $color-cyan;
|
||||
}
|
||||
|
||||
@include mo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__hamburger {
|
||||
.gnb__hamburger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
@ -78,8 +76,9 @@
|
|||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
.gnb__hamburgerLine {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
|
|
@ -87,18 +86,11 @@
|
|||
transition: transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
&.is-open {
|
||||
span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
|
||||
span:nth-child(2) { opacity: 0; }
|
||||
span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
|
||||
}
|
||||
.gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(1) { transform: translateY(6px) rotate(45deg); }
|
||||
.gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(2) { opacity: 0; }
|
||||
.gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
|
||||
|
||||
@include mo {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&__mobile-nav {
|
||||
.gnb__mobileNav {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: $gnb-height-mo;
|
||||
|
|
@ -112,12 +104,19 @@
|
|||
transition: transform 0.35s ease, opacity 0.35s ease;
|
||||
pointer-events: none;
|
||||
|
||||
ul {
|
||||
&.is-open {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.gnb__mobileNavList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
li a {
|
||||
.gnb__mobileNavLink {
|
||||
display: block;
|
||||
padding: 14px 24px;
|
||||
font-size: 18px;
|
||||
|
|
@ -126,20 +125,8 @@
|
|||
color: $color-white;
|
||||
}
|
||||
|
||||
&.is-open {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@include mo {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Intro
|
||||
.section--intro {
|
||||
.intro {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -160,51 +147,30 @@
|
|||
border-radius: 50%;
|
||||
filter: blur(120px);
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
&--cyan {
|
||||
.blobCyan {
|
||||
width: 56vw;
|
||||
height: 56vw;
|
||||
background: $color-cyan;
|
||||
top: -10%;
|
||||
right: -10%;
|
||||
|
||||
@include mo {
|
||||
width: 90vw;
|
||||
height: 90vw;
|
||||
right: -20%;
|
||||
top: -5%;
|
||||
}
|
||||
}
|
||||
|
||||
&--purple {
|
||||
.blobPurple {
|
||||
width: 32vw;
|
||||
height: 32vw;
|
||||
background: $color-purple;
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
|
||||
@include mo {
|
||||
width: 60vw;
|
||||
height: 60vw;
|
||||
left: -15%;
|
||||
top: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
&--blue {
|
||||
.blobBlue {
|
||||
width: 24vw;
|
||||
height: 24vw;
|
||||
background: $color-blue;
|
||||
bottom: 10%;
|
||||
left: -5%;
|
||||
|
||||
@include mo {
|
||||
width: 50vw;
|
||||
height: 50vw;
|
||||
left: -10%;
|
||||
bottom: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.intro__content {
|
||||
|
|
@ -229,3 +195,37 @@
|
|||
text-transform: uppercase;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
@include mo {
|
||||
.gnb__inner {
|
||||
padding: 0 20px;
|
||||
height: $gnb-height-mo;
|
||||
}
|
||||
|
||||
.gnb__nav { display: none; }
|
||||
|
||||
.gnb__hamburger { display: flex; }
|
||||
|
||||
.gnb__mobileNav { display: block; }
|
||||
|
||||
.blobCyan {
|
||||
width: 90vw;
|
||||
height: 90vw;
|
||||
right: -20%;
|
||||
top: -5%;
|
||||
}
|
||||
|
||||
.blobPurple {
|
||||
width: 60vw;
|
||||
height: 60vw;
|
||||
left: -15%;
|
||||
top: 20%;
|
||||
}
|
||||
|
||||
.blobBlue {
|
||||
width: 50vw;
|
||||
height: 50vw;
|
||||
left: -10%;
|
||||
bottom: 5%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,9 @@
|
|||
@use '../base/variable' as *;
|
||||
@use '../base/mixin' as *;
|
||||
|
||||
.section--project {
|
||||
.project {
|
||||
background: $color-bg;
|
||||
padding: 100px 48px;
|
||||
|
||||
@include mo {
|
||||
padding: 60px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.project__inner {
|
||||
|
|
@ -17,21 +13,12 @@
|
|||
|
||||
.project__heading {
|
||||
margin-bottom: 60px;
|
||||
|
||||
@include mo {
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.project__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 40px 40px;
|
||||
|
||||
@include mo {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.project__card {
|
||||
|
|
@ -39,10 +26,10 @@
|
|||
flex-direction: column;
|
||||
gap: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .project__thumb img {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.project__card:hover .project__thumbImg {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.project__thumb {
|
||||
|
|
@ -50,16 +37,16 @@
|
|||
aspect-ratio: 16 / 10;
|
||||
overflow: hidden;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
img {
|
||||
.project__thumbImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.project__thumb--empty {
|
||||
.project__thumbEmpty {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
|
|
@ -118,13 +105,9 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 64px;
|
||||
|
||||
@include mo {
|
||||
margin-top: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-more {
|
||||
.btnMore {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -144,3 +127,16 @@
|
|||
border-color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include mo {
|
||||
.project { padding: 60px 20px; }
|
||||
|
||||
.project__heading { margin-bottom: 36px; }
|
||||
|
||||
.project__grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.project__more { margin-top: 48px; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue