본문 바로가기
SITE

[사이트 만들기]모든 유형을 모아서 만들어보자 실전유형01

by 코린이 박원장👶 2022. 9. 12.

사이트 만들기 _ 실전 돌입 01

여러분 여태까지 온갖 유형에 대해서 공부를 했는데요. 드디어 결전의 날입니다!!👊
그동안 공부했던걸 열심히 모으고 모아서 사이트를 만들어 볼까요?
HTML + CSS + JS (+α로 반응형까지) 삼위일체 가봅시다. 할 수 있어요!

(없는거 같기도)

📝 피그마로 밑작업(?)

본인이 만들 사이트를 바로 코딩부터 들어가면 머리터질걸요? 우리같은 뉴비들은 이렇게 편집 소프트웨어를 이용해서 먼저 작업해준 뒤 코딩을 들어가는 습관을 갖도록 합시다. 저는 피그마가 편해서 피그마로 작업했는데요. 포토샵으로 하셔도 무관합니다. 프로그램은 편한걸로 알아서~
반응형도 할 예정인데, 반응형은 굳이 레이아웃을 미리 구상하지 않았어요. 그래서 완성본 캡처로 대체합니다. 화질이 조금 떨어지지만 이해해주세요🙏

1280px 반응형 Preview
1080px 반응형 Preview
768px 반응형(태블릿) Preview
480px 반응형(모바일) Preview

■ 코드 모아 보기 📦

JS코드 중 슬라이드 유형은 저희가 직접해도 되지만 소중한 시간을 절약하기 위해서 이미 잘 만들어진 걸 가져와서 활용하도록 합시다. 이번엔 swiper(https://swiperjs.com/)라는 사이트를 이용했습니다.

HTML
JS코드_ swiper
JS코드_ 외부 코드 제외
CSS코드_ swiper
card.css
image.css
text.css
header.css
imgText.css
banner.css
footer.css
slider.css
<body>
    <div id="skip">
      <a href="#">헤더 영역 바로가기</a>
      <a href="#">슬라이드 영역 바로가기</a>
      <a href="#">이미지 영역 바로가기</a>
      <a href="#">이미지/텍스트 영역 바로가기</a>
      <a href="#">카드 영역 바로가기</a>
      <a href="#">배너 영역 바로가기</a>
      <a href="#">텍스트 영역 바로가기</a>
      <a href="#">푸터 영역 바로가기</a>
    </div>
    <!-- //skip -->
  
    <header id="headerType" class="header__wrap nexon">
      <div class="header__inner">
        <div class="header__logo">
          <a href="#">SSHINY<em> PERFUME</em></a>
        </div>
        <nav class="header__menu">
          <ul>
            <li><a class="active" href="#sliderType">MAIN</a></li>
            <li><a href="#imgType">NEW</a></li>
            <li><a href="#imgTextType">PERSONAL</a></li>
            <li><a href="#cardType">BEST</a></li>
            <li><a href="#bannerType">DAILY</a></li>
            <li><a href="#textType">ABOUT</a></li>
          </ul>
        </nav>
        <div class="header__member">
          <a href="#">LOGIN</a>
        </div>
      </div>
  
      <div class="header__inner__side">
        <div class="header__tab"><a class="blind">사이드바 열기/닫기</a></div>
        <div class="header__box">
          <div class="header__logo2">
            <a href="#">SSHINY<em> PERFUME</em></a>
          </div>
          <div class="header__member2">
            <a href="#">LOGIN</a>
          </div>
          <nav class="header__menu2">
            <ul>
              <li><a class="active" href="#sliderType">MAIN</a></li>
              <li><a href="#imgType">NEW</a></li>
              <li><a href="#imgTextType">PERSONAL</a></li>
              <li><a href="#cardType">BEST</a></li>
              <li><a href="#bannerType">DAILY</a></li>
              <li><a href="#textType">ABOUT</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
    <!-- //headerType -->
    
    <main id="mainType">
      <section id="sliderType" class="slider__wrap  ">
        <h2 class="blind">슬라이드영역</h2>
        <div class="slider__inner">
          <div class="swiper mySwiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide slide01">
                <div class="desc">
                  <span>NEW Product</span>
                  <h3>SPRING SEASON</h3>
                  <p>
                    따스한 햇살을 타고 부드러운 꽃 향이 다가오는 지금
                    <br>향기를 타고 봄이 다가온다
                  </p>
                  <div class="btn">
                    <a href="#">자세히 보기</a>
                    <a href="#" class="black">제품 보기</a>
                  </div>
                </div>
              </div>
              <div class="swiper-slide slide02">
                <div class="desc">
                  <span>NEW Product</span>
                  <h3>SPRING SEASON</h3>
                  <p>
                    따스한 햇살을 타고 부드러운 꽃 향이 다가오는 지금
                    <br>향기를 타고 봄이 다가온다
                  </p>
                  <div class="btn">
                    <a href="#">자세히 보기</a>
                    <a href="#" class="black">제품 보기</a>
                  </div>
                </div>
              </div>
              <div class="swiper-slide slide03">
                <div class="desc">
                  <span>NEW Product</span>
                  <h3>SPRING SEASON</h3>
                  <p>
                    따스한 햇살을 타고 부드러운 꽃 향이 다가오는 지금
                    <br>향기를 타고 봄이 다가온다
                  </p>
                  <div class="btn">
                    <a href="#">자세히 보기</a>
                    <a href="#" class="black">제품 보기</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
          <!-- <div class="slider">
            <div class="slider__img">
              <div class="desc">
                <span>NEW Product</span>
                <h3>SPRING SEASON</h3>
                <p>
                  따스한 햇살을 타고 부드러운 꽃 향이 다가오는 지금
                  <br>향기를 타고 봄이 다가온다
                </p>
                <div class="btn">
                  <a href="#">자세히 보기</a>
                  <a href="#" class="black">제품 보기</a>
                </div>
              </div>
            </div>
            <div class="slider__arrow">
              <a href="#" class="left"><span class="ir">이전 이미지</span></a>
              <a href="#" class="right"><span class="ir">다음 이미지</span></a>
            </div>
            <div class="slider__dot">
              <a href="#" class="dot active"><span class="ir">1</span></a>
              <a href="#" class="dot"><span class="ir">2</span></a>
              <a href="#" class="dot"><span class="ir">3</span></a>
              <a href="#" class="play"><span class="ir">플레이</span></a>
              <a href="#" class="stop"><span class="ir">정지</span></a>
            </div>
          </div> -->
        </div>
      </section>
      <!--//sliderType-->
  
      <section id="imgType" class="image__wrap  section">
        <h2>화사한 봄꽃처럼</h2>
        <p>햇살이 반기는 맑은 하늘과 포근한 공기, 그 사이로 스며든 기분 좋은 향조들.</p>
        <div class="image__inner container image__box">
          <article class="image img1">
            <h3 class="image__title">SPRING COOLTON</h3>
            <p class="image__desc">
              연분홍빛 꽃을 닮은 부드럽고 사랑스러운 향기.
              <br>로즈와 스위트 재스민삼박, 프리지어의 폭발적인 달콤함을 느낄 수 있습니다.
            </p>
            <a class="image__btn" href="#" title="자세히 보기">자세히 보기</a>
          </article>
          <article class="image img2">
            <h3 class="image__title">FLOWER BOM</h3>
            <p class="image__desc">
              생동감이 폭발하는 봄을 닮은 향수.
              <br>아이리스와 은방울꽃으로 시작해 센티폴리아 로즈, 우드 노트로 끝나는 향기를 느껴보세요.
            </p>
            <a class="image__btn yellow" href="#" title="자세히 보기">자세히 보기</a>
          </article>
        </div>
      </section>
      <!--//imageType-->
  
      <section id="imgTextType" class="imgText__wrap  section gray">
        <h2 class="blind">유용한 사이트 살펴보기</h2>
        <div class="imgText__inner container ">
          <div class="imgText__txt">
            <span class="blind">이미지 텍스트 유형01</span>
            <h3>당신의 향수에<br>
              만족하시나요?</h3>
            <p>수 만개의 향수 중 당신의 향수를 찾는 것
              <br>그것은 운명과도 같은 일입니다.</p>
            <ul>
              <li><a href="#">당신만의 향수</a></li>
              <li><a href="#">무료로 시향하세요</a></li>
              <li><a href="#">당일 주문 / 당일 출고</a></li>
              <li><a href="#">당신만의 향수</a></li>
              <li><a href="#">무료로 시향하세요</a></li>
              <li><a href="#">당일 주문 / 당일 출고</a></li>
            </ul>
          </div>
          <div class="imgbox">
            <div class="imgText__img img1">
              <a href="#">PERSONAL</a>
            </div>
            <div class="imgText__img img2">
              <a href="#" class="blue">CUSTOM</a>
            </div>
          </div>
        </div>
      </section>
      <!--//imgTextType-->
  
      <section id="cardType" class="card__wrap  section">
        <h2>선인장에서 추출한 이국적 향</h2>
        <p>지중해 연안을 상징하는 선인장 열매인 프리클리 페어를 메인으로 시작되는 BSET EDITION</p>
        <div class="card__inner container ">
          <article class="card">
            <figure class="card__header">
              <img src="assets/img/card_bg01_01_1.jpg" alt="외형에 대한 오해 이미지" />
            </figure>
            <div class="card__body">
              <h3 class="tit">Cactus</h3>
              <p class="desc">
                오가닉 버베나와 선인장 추출물이
                조화를 이루는 향으로
                여름 갈증을 해소하는 이국적이고
                상쾌한 기운을 느낄 수 있습니다.
                <br>여름과 어울리는 밝고 신선한 향을 선사합니다.
              </p>
              <a class="btn" href="#">
                더 자세히 보기
                <span aria-hidden="true">
                  <svg width="35" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z"
                      fill="black"
                    />
                  </svg>
                </span>
              </a>
            </div>
          </article>
          <article class="card">
            <figure class="card__header">
              <img src="assets/img/card_bg01_02_1.jpg" alt="도베르만의 성격 이미지" />
            </figure>
            <div class="card__body">
              <h3 class="tit">무더운 날씨에도 꽃피우는 향기</h3>
              <p class="desc">
                청량한 느낌이 낯설다면, 아마 이 향수가 없어서가 아닐까요?
                <br>고객님들이 사랑해주신 이 향수
                <br>당신과 어울리는 밝고 신선한 향을 선사해드립니다.
              </p>
              <a class="btn" href="#">
                더 자세히 보기
                <span aria-hidden="true">
                  <svg width="35" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z"
                      fill="black"
                    />
                  </svg>
                </span>
              </a>
            </div>
          </article>
          <article class="card">
            <figure class="card__header">
              <img src="assets/img/card_bg01_03_1.jpg" alt="도베르만을 키울때 주의할 점 이미지" />
            </figure>
            <div class="card__body">
              <h3 class="tit">Very Royal Cactus</h3>
              <p class="desc">
                오가닉 버베나와 선인장 추출물이
                조화를 이루는 향으로
                여름 갈증을 해소하는 이국적이고
                상쾌한 기운을 느낄 수 있습니다.
                <br>여름과 어울리는 밝고 신선한 향을 선사합니다.
              </p>
              <a class="btn" href="#">
                더 자세히 보기
                <span aria-hidden="true">
                  <svg width="35" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z"
                      fill="black"
                    />
                  </svg>
                </span>
              </a>
            </div>
          </article>
        </div>
      </section>
      <!--//cardType-->
  
      <section id="bannerType" class="banner__wrap ">
        <h2 class="blind">배너 영역</h2>
        <div class="banner__inner">
          <h3 class="title">Daily Perfume</h3>
          <p class="desc">
            따스한 일요일 아침 화이트 셔츠의 두근거리는 설렘
            <a href="#" title="새로운 페이지 열림" target="_blank">sshin4882.tistory.com</a>
          </p>
          <span class="small">SSHINY PERFUME</span>
        </div>
      </section>
      <!--//bannerType-->
  
      <section id="textType" class="text__wrap  section">
        <span class="blind">텍스트 유형01</span>
        <h2 class="mb70">ABOUT US</h2>
        <div class="text__inner container">
          <div class="text t1">
            <h3 class="text__title">글루텐 프리</h3>
            <p class="text__desc">
              알레르기를 유발할 수 있는 글루텐을 넣지 않음으로써, 남녀노소 모두가 쓸 수 있는 향수를 만듭니다.
            </p>
            <a class="text_btn" href="#">더보기</a>
          </div>
          <div class="text t2">
            <h3 class="text__title">비건 향수</h3>
            <p class="text__desc">
              끗한 향수를 만들어 믿고 사용할 수 있는 제품을 만드는데 힘쓰고 있습니다. 친환경 원료만 사용해서 만든 대표적인 비건 향수입니다.
            </p>
            <a class="text_btn" href="#">더보기</a>
          </div>
          <div class="text t3">
            <h3 class="text__title">크룰티 프리</h3>
            <p class="text__desc">
              동물 실험을 거치지 않고 만들어지는 향수입니다. 생명을 소중히 하며 윤리적인 기업이 되고자 노력하고 있습니다.
            </p>
            <a class="text_btn" href="#">더보기</a>
          </div>
          <div class="text t4">
            <h3 class="text__title">리사이클러블 </h3>
            <p class="text__desc">
              자연을 침해하지 않는 범위 내에서 만들어진 클린의 제품들은 사용 후 다시 그대로 자연으로 돌아가는 전제품 ‘리사이클러블’을 추구하고 있습니다.
            </p>
            <a class="text_btn" href="#">더보기</a>
          </div>
          <div class="text t5">
            <h3 class="text__title">환경친화 </h3>
            <p class="text__desc">
              최초 환경친화적인 지속 가능한 원료를 사용하여 깨끗한 지구 만들기에 앞장서고 있습니다.
            </p>
            <a class="text_btn" href="#">더보기</a>
          </div>
          <div class="text t6">
            <h3 class="text__title">지속가능성 </h3>
            <p class="text__desc">
              자연과 환경을 사랑하는 우리는 천연자원의 고갈을 피하기 위해 지속 가능한 원료를 사용합니다.
            </p>
            <a class="text_btn" href="#">더보기</a>
          </div>
        </div>
      </section>
      <!--//textType-->
    </main>
    <!-- //mainType -->
  
    <footer id="footerType" class="footer__wrap  section">
      <h2 class="blind">푸터 영역</h2>
      <div class="footer__inner container">
        <div class="footer__menu">
          <div>
            <h3>시즌</h3>
            <ul>
              <li><a href="#">봄</a></li>
              <li><a href="#">여름</a></li>
              <li><a href="#">가을</a></li>
              <li><a href="#">겨울</a></li>
            </ul>
          </div>
          <div>
            <h3>회사 소개</h3>
            <ul>
              <li><a href="#">이용 약관</a></li>
              <li><a href="#">광고 제휴</a></li>
            </ul>
          </div>
          <div>
            <h3>출처</h3>
            <ul>
              <li><a href="#">비레디</a></li>
              <li><a href="#">UNSPLASH</a></li>
            </ul>
          </div>
          <div>
            <h3>메뉴</h3>
            <ul>
              <li><a href="#">메뉴</a></li>
              <li><a href="#">신제품</a></li>
              <li><a href="#">퍼스널 향수</a></li>
              <li><a href="#">베스트셀러</a></li>
              <li><a href="#">ABOUT US</a></li>
            </ul>
          </div>
          <div>
            <h3>회원</h3>
            <ul>
              <li><a href="#">회원 혜택</a></li>
              <li><a href="#">회원 후기</a></li>
              <li><a href="#">공지사항</a></li>
            </ul>
          </div>
          <div>
            <h3>고객지원</h3>
            <ul>
              <li><a href="#">A/S</a></li>
              <li><a href="#">FAQ</a></li>
              <li><a href="#">1:1 문의</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer__right">
        2022 SSHINY. Portfolio is Power<br />
        All rights reserved.
      </div>
      
    </footer>
    <!-- //footerType -->
    
    <div class="top__button"><span>top</span></div>
    <!-- //위로가기버튼 -->
  </body>
<script src="assets/js/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper(".mySwiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    autoplay: {
        delay: 2000,
    },
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
    },
    });
</script>
// 헤더메뉴 페럴렉스 + 클릭 이동
window.addEventListener("scroll", () => {
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

    document.querySelectorAll("main > section").forEach((element, index) => {
        if (scrollTop >= element.offsetTop - window.innerHeight / 6) {
            document.querySelectorAll(".header__menu li a").forEach((li) => {
                li.classList.remove("active");
            });
            document.querySelector(`.header__menu li:nth-child(${index + 1}) a`).classList.add("active");
        }
    });
});

// 스크롤 이동
document.querySelectorAll(".header__menu li a").forEach((li) => {
    li.addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector(li.getAttribute("href")).scrollIntoView({
            behavior: "smooth",
        });
    });
});
document.querySelectorAll(".header__menu2 li a").forEach((li) => {
    li.addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector(li.getAttribute("href")).scrollIntoView({
            behavior: "smooth",
        });
    });
});

//  헤더영역 반응형시 표시
let windowWidth = window.innerWidth;
let headerBtn = document.querySelector(".header__inner__side .header__tab");

headerBtn.addEventListener("click", () => {
    let className = document.querySelector(".header__inner__side div").getAttribute('class');
    console.log(className)
    if(className == "header__tab"){
    document.querySelector(".header__box").style.left="-500px";
    headerBtn.classList.add("hide")
    }else{
    headerBtn.classList.remove("hide")
    document.querySelector(".header__box").style.left="1px";
    }
});

// 반응형메뉴패럴랙스 (위와 비슷)
window.addEventListener("scroll", () => {
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

    document.querySelectorAll("main > section").forEach((element, index) => {
        if (scrollTop >= element.offsetTop - window.innerHeight / 6) {
            document.querySelectorAll(".header__menu2 li a").forEach((li) => {
                li.classList.remove("active");
            });
            document.querySelector(`.header__menu2 li:nth-child(${index + 1}) a`).classList.add("active");
        }
    });
});


// 최하단 top버튼
window.addEventListener("scroll", () => {
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
    console.log(scrollTop)
    console.log(document.body.scrollHeight)
    console.log(window.innerHeight)
    console.log(document.body.scrollHeight - (window.innerHeight + 500))
    if (scrollTop >= document.body.scrollHeight - (window.innerHeight + 600)) {
        document.querySelector(".top__button").classList.add("show");
    } else {
        document.querySelector(".top__button").classList.remove("show");
    }
});

// top버튼누르면 맨위로
document.querySelector(".top__button").addEventListener("click", () => {
    window.scrollTo({ left: 0, top: 0, behavior: "smooth" });
});
/**
* Swiper 8.3.2
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2022 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: July 26, 2022
*/

@font-face {
    font-family: swiper-icons;
    src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #fff
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-wrapper {
    transform: translate3d(0px, 0, 0)
}

.swiper-pointer-events {
    touch-action: pan-y
}

.swiper-pointer-events.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-vertical.swiper-css-mode>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-centered>.swiper-wrapper::before {
    content: '';
    flex-shrink: 0;
    order: 9999
}

.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-horizontal>.swiper-wrapper::before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-vertical>.swiper-wrapper::before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center
}

.swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size)
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: 10px;
    right: auto
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: 'prev'
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: 10px;
    left: auto
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: 'next'
}

.swiper-button-lock {
    display: none
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled>.swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 20px;
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(.33);
    position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: 50%;
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2)
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
    right: 10px;
    top: 50%;
    transform: translate3d(0px, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: .2s transform, .2s top
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s left
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s right
}

.swiper-pagination-progressbar {
    background: rgba(0, 0, 0, .25);
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: 4px;
    left: 0;
    top: 0
}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical>.swiper-pagination-progressbar {
    width: 4px;
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-lock {
    display: none
}

.swiper-scrollbar {
    border-radius: 10px;
    position: relative;
    -ms-touch-action: none;
    background: rgba(0, 0, 0, .1)
}

.swiper-scrollbar-disabled>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: 1%;
    bottom: 3px;
    z-index: 50;
    height: 5px;
    width: 98%
}

.swiper-scrollbar.swiper-scrollbar-vertical,
.swiper-vertical>.swiper-scrollbar {
    position: absolute;
    right: 3px;
    top: 1%;
    z-index: 50;
    width: 5px;
    height: 98%
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.swiper-slide-zoomed {
    cursor: move
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.swiper .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-free-mode>.swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-grid>.swiper-wrapper {
    flex-wrap: wrap
}

.swiper-grid-column>.swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: column
}

.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube {
    overflow: visible
}

.swiper-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}

.swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-next+.swiper-slide,
.swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    opacity: .6;
    z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
    content: '';
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    filter: blur(50px)
}

.swiper-flip {
    overflow: visible
}

.swiper-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
}

.swiper-flip .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-creative .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height
}

.swiper-cards {
    overflow: visible
}

.swiper-cards .swiper-slide {
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden
}
#cardType > h2{
    word-break: keep-all;
}
.card__inner {
    display: flex;
    justify-content: space-between;
}

.card {
    width: 32%;
    background: #f5f5f5;
    border: 2px solid black;
}
.card__header{
    border-bottom: 2px solid black;
    overflow: hidden;
}
.card__header img:hover {
    transform: scale(1.1);
    transition: all 0.3s ease-in;
    filter: brightness(110%) contrast(110%);
    cursor: pointer;
}
.card__body { 
    padding: 24px;
    background-color: snow;
}
.card__body .tit{
    font-size: 24px;
    margin-bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.card__body .desc{
    font-size: 18px;
    line-height: 1.4;
    color: #666;
    margin-bottom: 20px;
    font-weight: 300;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; 
    -webkit-box-orient: vertical;
}
.card__body .btn {
    position: relative;
}
.card__body .btn:hover span svg{
    width: 65px;
    transition: width 0.5s ease-in;
}
.card__body .btn:hover ::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%;
    height: 10px;
    background-color: #f8c3614b;
    border-radius: 50px;
}
@media (max-width: 768px){
    .card__inner {
        display: block;
        justify-content: space-between;
    }
    .card {
        width: 100%;
        background: #f5f5f5;
        margin-bottom: 10px;
    }
    
}
@media (max-width: 480px){
    .card__body {
        padding: 13px;
    }
    .card__body .tit {
        font-size: 22px;
    }
    .card__body .desc {
        font-size: 16px;
        margin-bottom: 3px;
    }
    .card__body .btn {
        font-size: 14px;
    }
}

.image__inner{
    display: flex;
    justify-content: space-between;
}
.image{
    width: 49%;
    color: #fff;
    padding: 200px 30px 30px 30px;
    box-sizing: border-box;
}
.image.img1{
    background: url(../img/image_type01_01_1.jpg) no-repeat center;
    background-size: cover;
    border-radius: 8px;
    box-sizing: border-box;
}
.image.img2{
    background: url(../img/image_type01_02_1.jpg) no-repeat center;
    background-size: cover;
    border-radius: 8px;
    box-sizing: border-box;
}
.image__title{
    font-size: 32px;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.image__desc{
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 300;
}
.image__btn{
    font-size: 16px;
    color: #fff;
    background-color: #C38687;
    border-radius: 20px;
    display: inline-block;
    padding: 10px 20px;
}
.image__btn:hover{
    background-color: #eeaeaf;
    transition: all 0.3s ease;
}

.image__btn.yellow{
    background-color: #AB675F;
}
.image__btn.yellow:hover {
    background-color: #ee9187;
}
@media (max-width: 768px){
    .image__inner {
        display: block;
    }
    /* .image{
        width: 49%;
        height: 300px;
        padding: 100px 30px 30px 30px;
        display: flex;
        align-items:flex-end;
        align-content: flex-end;
        flex-wrap: wrap;
    } */
    /* .image.img1 {
        margin-right: 4px;
        padding: 8px;
    } */
    .image__title{
        font-size: 25px;
    }

    .image__btn,
    .image__btn.yellow {
        font-size: 14px;
        padding: 8px 15px;
    }
}
@media (max-width: 480px){
    .image__inner{
        display: block;
    }
    .image__desc {
        font-size: 15px;
    }
}

/* textType */
.text__inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.text {
    width: 32%;
    margin-bottom: 2%;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    transition: background 0.4s;
    overflow: hidden;
}
.text:hover{
    background-color: #e9e9e9;
}
.text__title {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    padding-top: 75px;
}
.text__title::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    background: url(../img/SITE01_ICON.svg);
    border-radius: 50%;
}
.text.t1 .text__title::before {
    background-position: 0 0;
}
.text.t2 .text__title::before {
    background-position: -100px 0;
}
.text.t3 .text__title::before {
    background-position: -200px 0;
}
.text.t4 .text__title::before {
    background-position: -300px 0;
}
.text.t5 .text__title::before {
    background-position: -400px 0;
}
.text.t6 .text__title::before {
    background-position: -500px 0;
}
.text__desc {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: #666;
    margin-bottom: 20px;
}
.text_btn {
    font-size: 16px;
    line-height: 1;
    text-decoration: underline;
    text-underline-position: under;
    color: #666;
}

@media (max-width: 768px) {
    .text__inner{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .text {
        width: 49%;
    }
}
@media (max-width: 480px) {
    .text__inner{
        display: block;
    }
    .text {
        width: 100%;
    }
    .text__title {
        font-size: 20px;
    }
    .text__title::before {
        transform: scale(0.8);
        left: -5px;
    }
    .text__desc {
        font-size: 16px;
    }
}

.header__inner {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    position: fixed;
    left: 0;
    top: 0;
    background: #fff;
    z-index: 1000000;
  }
  .header__logo {
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    width: 20%;
  }
  .header__logo em {
    font-size: 18px;
    font-weight: 400;
  }
  
  .header__menu {
    width: 65%;
    text-align: center;
  }
  .header__menu li {
    display: inline;
  }
  .header__menu li a.active {
    background-color: #000;
    color: white;
    border-radius: 5px;
  }
  
  .header__menu li a {
    padding: 13px 20px;
    margin: 0 5px;
    transition: background-color 0.3s;
  }
  .header__menu li a:hover {
    background-color: #f1f1f1;
    border-radius: 5px;
    text-decoration: underline;
  }
  .header__menu li a.active:hover {
    background-color: #000;
    color: white;
    border-radius: 5px;
    text-decoration: underline;
  }
  .header__member {
    width: 15%;
    text-align: right;
  }
  .header__member a {
    font-size: 16px;
    border: 1px solid black;
    padding: 10px 30px;
    border-radius: 50px;
    transition: all 0.3s;
  }
  .header__member a:hover {
    background-color: #000;
    color: white;
  }
  
  /* 반응형일때 사이드바로 만들기 */
  
  .header__inner__side {
    position: fixed;
    left: 1px;
    bottom: 41px;
    z-index: 2000;
    transform: scale(0);
    opacity: 0;
  }
  .header__inner__side  .header__tab {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom:-40px;
    left: 0;
    z-index: inherit;
    border-radius: 50%;
    background: url(../img/SITE01_ICON.svg);
    background-color: #000;
    background-position: -693px 8px;
    transition: background-position 0.5s ease;
  }
  .header__inner__side .header__tab.hide{
    background-position: -590px 8px;
  }
  .header__inner__side  .header__tab:hover{
    cursor: pointer;
    background-color: rgb(94, 94, 94);
  }
  .header__box {
    background-color: rgba(0,0,0,0.5);
    padding: 25px 35px;
    border-bottom-left-radius: 5px;
    transition: all 0.9s ease-out;
    border-radius: 20px;
    width: 150px;
    position: absolute;
    bottom: 1px;
    left: 1px;
    z-index: -20001;
  }
  .header__inner__side .header__logo2 {
    margin-bottom: 10px;
    border-bottom: 1px dashed #f5f5f5;
    text-shadow: 0.5px -0.5px 1px rgb(238, 161, 45);
  }
  .header__inner__side .header__logo2 a{
    color: snow;
  }
  .header__inner__side .header__logo2 a:hover{
    border-bottom: 1px dashed #979797;
    color: rgb(0, 0, 0);
    font-weight: bold;
  }
  .header__inner__side .header__member2{
    margin-bottom: 15px;
  }
  .header__inner__side .header__member2 a{
    color: #ccc;
    position: relative;
  }
  .header__inner__side .header__member2 a:hover::before{
    content: '';
    width: 100%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    background-color: #f1f1f1;
    border-radius: 50px;
    z-index: -1000;
  }
  .header__menu2 li a{
    transition: color 0.3s ease;
    position: relative;
    color: rgb(0, 0, 0);
    font-weight: 500;
  }
  .header__menu2 li a.active{
    color: snow;
    font-size: 1.1rem;
  }
  .header__menu2 li a:hover::before{
    content: '';
    width: 100%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    background-color: #f1f1f1;
    border-radius: 50px;
    z-index: -1000;
  }
  @media (max-width: 1080px) {
    .header__inner {
      display: none;
    }
    .header__inner__side{
      transform: scale(1);
      opacity: 1;
      transition: opacity 0.7s ease;
    }
  }
  @media (max-width: 480px) {
    .header__box {
      padding: 20px 15px;
    }
  }

.imgText__inner {
    display: flex;
    justify-content: space-between;
}
/* .imgText__inner > div {
    height: 500px;
} */
.imgText__txt {
    width: 30%;
}
.imgbox {
    width: 69%;
    display: flex;
    justify-content: space-between;
}
.imgText__txt span {
    font-size: 16px;
    color: #666;
    text-decoration: underline;
    text-underline-position: under;
    margin-bottom: 20px;
    display: block;
}
.imgText__txt h3 {
    font-size: 50px;
    font-weight: normal;
    word-break: keep-all;
    line-height: 1.4;
    margin-bottom: 20px;
}
.imgText__txt p {
    font-size: 22px;
    font-weight: 300;
    line-height: 1.5;
    color: #666;
    margin-bottom: 10px;
}
.imgText__txt ul {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    margin-left: 20px;
}
.imgText__txt ul li {
    position: relative;
    padding-left: 0px;
    list-style:disc;
}
.imgText__txt ul li a {
    color: #666;
}
.imgText__txt ul li::before{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    top: 9px;
    background: #666;
}
.imgText__txt ul li a:hover{
    text-decoration: underline;
}
.imgText__img {
    width: 49%;
    border-radius: 10px;
    position: relative;
}
.imgText__img a{
    position: absolute;
    left: 30px;
    bottom: 30px;
    background-color: #000;
    color: white;
    font-size: 18px;
    padding: 10px 30px;
    border-radius: 30px;
    display: inline-block;
}
.imgText__img a:hover{
    background-color: rgb(43, 43, 43);
    transition: all 0.3s ease;
}

.imgText__img.img1 {
    background: url(../img/imgText_bg01_1.jpg) no-repeat center / cover;
}
.imgText__img.img2 {
    background: url(../img/imgText_bg02_1.jpg) no-repeat center / cover;
}

@media (max-width: 1080px) {
    .imgText__txt h3 {
        font-size: 35px;
    }
    
    .imgbox {
        width: 68%;
    }
}
@media (max-width: 768px){
    .imgText__txt{
        width: 48%;
    }
    .imgText__txt h3 {
        word-break: break-all;
        font-size: 40px;
    }
    .imgText__txt p {
        font-size: 20px;
    }
    .imgbox {
        width: 50%;
        display: flex;
        flex-wrap: wrap;
    }
    .img1{
        width: 100%;
        margin-bottom: 5%;
    }
    .img2{
        width: 100%;
    }
}
@media (max-width: 480px){
    .imgText__inner {
        display: block;
    }
    .imgText__inner > div {
        height: 250px;
    }
    div.imgText__txt {
        width: 100%;
        height: auto;
    }
    .imgText__txt h3 {
        font-size: 30px;
        text-align: center;
    }
    .imgText__txt p{
        font-size: 16px;
        text-align: center;
    }
    .imgText__txt > ul {
        display: none;
    }
    .imgbox {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .imgText__img {
        width: 49%;
    }

    .imgText__img.img1 a{
        font-size: 14px;
        left: 15%;
        bottom: 20px;
        padding: 5px 10px;
    }
    .imgText__img.img2 a{
        font-size: 14px;
        left: 20%;
        bottom: 20px;
        padding: 5px 10px;
    }
    .imgText__img.img1 {
        margin-bottom: 0;
    }
}

.banner__inner {
    background-image: url(../img/banner_bg01_1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    padding: 120px 0;
    color: white;
  }
  .banner__inner .title {
    font-size: 50px;
    line-height: 1;
    font-weight: 300;
    margin-bottom: 40px;
  }
  .banner__inner .desc {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 300;
    margin-bottom: 70px;
  }
  .banner__inner .desc a {
    color: white;
    display: block;
    width:fit-content;
    margin: 0 auto;
  } 
  .banner__inner .desc a:hover {
    text-decoration: underline;
    text-shadow: 1px 0px 3px blanchedalmond;
  }
  .banner__inner .small {
    font-size: 16px;
    text-decoration: underline;
  }
  
  
  @media (max-width: 768px){
    .banner__inner .title {
      font-size: 40px;
    }
    .banner__inner .desc {
      font-size: 18px;
    }
    .banner__inner .small {
      font-size: 14px;
    }
    .banner__inner .desc a {
      font-size: 17px;
    } 
  }
  
  @media (max-width: 480px){
    .banner__inner{
      padding-left: 20px;
      padding-right: 20px;
      box-sizing: border-box;
    }
    .banner__inner .title {
      font-size: 30px;
    }
    .banner__inner .desc {
      font-size: 16px;
      word-break: keep-all;
    }
    .banner__inner .small {
      font-size: 13px;
    }
    .banner__inner .desc a {
      font-size: 16px;
    } 
  }

.footer__menu {
    display: flex;
    margin-bottom: 70px;
    justify-content: space-between;
  }
  .footer__menu > div {
    width: 16%;
  }
  .footer__menu h3 {
    font-size: 18px;
    margin-bottom: 20px;
  }
  
  .footer__menu li a {
    font-size: 14px;
    color: #666;
    margin: 10px 0;
    display: block;
  }
  .footer__right {
    border-top: 1px solid #d9d9d9;
    text-align: center;
    padding-top: 40px;
    color: #666;
    line-height: 1.5;
  }
  
  @media (max-width: 960px) {
    .footer__menu{
      display: none;
    }
    .footer__right{
      padding-top: 0;
      border-top: 0;
    }
    .footer__wrap {
      padding: 40px 0;
    }
  }

.swiper-button-next, .swiper-button-prev {
    width: 30px;
    height: 56px  !important;
    background-image: url(../img/slider_icon.svg);
  }
  .swiper-button-next:after, .swiper-button-prev:after {
    /* display: none; */
    transform: scale(0);
  }
  
  .swiper-button-next {
    background-position: -52px 0;
  }
  
  .swiper-pagination-bullet {
    width: 16px !important;
    height: 16px !important;
    background-image: url(../img/slider_icon.svg);
    background-position: -20px -70px;
    /* background-color: transparent !important;
    opacity: 1 !important; */
  }
  /* swiper */
  .swiper-slide {
    background: url(../img/sliderType01.jpg) no-repeat center / cover;
  }
  
  .slide02{
    background: url(../img/sliderType02.jpg) no-repeat center / cover;
  }
  .slide03{
    background: url(../img/sliderType03.jpg) no-repeat center / cover;
  }
  .swiper-slide .desc {
    width: 100%;
    margin: 0 auto;
    padding: 100px 120px;
    box-sizing: border-box;
  }
  .swiper-slide .desc span {
    font-size: 16px;
    background-color: #fff;
    padding: 1px 14px 0 14px;
    border-radius: 30px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: inline-block;
  }
  .swiper-slide .desc h3 {
    font-size: 100px;
    font-weight: 300;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 16px;
    margin-left: -8px;
  }
  .swiper-slide .desc p {
    font-size: 20px;
    font-weight: 300;
    color: #fff;
    line-height: 1.35;
    margin-bottom: 130px;
  }
  .swiper-slide .desc .btn a {
    font-size: 16px;
    background-color: #fff;
    padding: 11px 50px;
    transition: all 0.5s;
    display: inline-block;
  }
  .swiper-slide .desc .btn a.black {
    transition: all 0.5s;
    background: #000;
    color: #fff;
  }
  .swiper-slide .desc .btn a:hover {
    background-color: rgb(0, 0, 0);
    color: white;
    transform: scale(0.95);
    border-radius: 10px;
  }
  .swiper-slide .desc .btn a.black:hover {
    transform: scale(0.95);
    border-radius: 10px;
  }
  @media (max-width: 1080px) {
    .slider__inner{
      margin-top: 0;
    }
    .swiper-slide{
      text-align: center;
    }
    .swiper-slide .desc h3{
      font-size: 63px;
    }
  }
    
  /* @media (max-width: 960px){
  } */
  @media (max-width: 768px) {
    .swiper-slide .desc {
      padding: 80px 40px;
    }
    .swiper-slide .desc span {
      font-size: 13px;
    }
    .swiper-slide .desc h3{
      font-size: 40px;
    }
    .swiper-slide .desc p {
      font-size: 16px;
      margin-bottom: 50px;
    }
    .swiper-slide .desc .btn a {
      font-size: 14px;
      padding: 8px 10px;
    }
  }

■ 파헤치기 🪓

막상 보면 제가 그동안 블로그에 올렸던 유형들을 갖다놓고 반응형한다고 CSS몇번 건드리는게 다인거 같더라구요.
| html |
이용된 유형들은
/헤더 - 슬라이드 - 이미지 - 이미지, 텍스트 - 카드 - 배너 - 텍스트 - 푸터/ 입니다.
각각 섹션에 id명을 주어서 코딩하였고, 푸터와 헤더영역은 시멘틱태그를 사용했습니다. 특이사항으로는 헤더영역에 반응형때 활용할 메뉴를 위해서 2개의 메뉴를 구성했다는 점이겠네요.
| CSS |
하나의 파일안에 작성하지 않고 각각 유형별로 파일을 만들어서 링크방식으로 진행했습니다. 그리고 앞서 사전에 구상했듯이 반응형을 1280px, 1080px, 768px, 480px으로 생각하고 진행했습니다. 저는 개인적으로 컨텐츠를 버리는 걸 좋아하는 편이 아니어서 사이즈가 줄어도 최대한 컨텐츠는 살리는쪽으로 반응형을 구성했습니다.
| JS |
외부링크인 Swiper를 제외하고 기존 페럴렉스 효과를 많이 활용했습니다. header영역에 이 효과를 적용해주었고, 섹션별로 클릭시 이동하되 smooth효과를, 사이즈에 따른 헤더 메뉴바 스왑, 하단위치시 탑버튼 활성화 등을 사용했습니다.

👉 내가 참고한 내 블로그 글들

뭔가 열심히 적어보고 싶었는데 기존에 배우고 학습했던것만 토대로 하다보니 새로운 내용이 이렇다 할게 없어서 적을게 ...크게 없네요?

결과보기

원본 소스 보기 원본 사이트
728x90

'SITE' 카테고리의 다른 글

웹사이트 만들기/CardType 03  (12) 2022.08.10
웹사이트 만들기/CardType 02  (9) 2022.08.09
웹사이트 만들기/CardType 01  (7) 2022.08.08

관련글

댓글

HTML이미지

HTML

자세히 보기
HTML이미지

JAVASCRIPT

자세히 보기
HTML이미지

CSS

자세히 보기

티스토리툴바