rlagkdud898 / TAKENSOFT star
mycoms 2024-03-18
240318 김하영
@d4907efa1a9d1ad0f0fc0bbd4b55ef02cda13ddf
5e88640
d4907ef
resources/css/common.css
--- resources/css/common.css
+++ resources/css/common.css
@@ -439,6 +439,9 @@
 
 .pd10 {
 
     padding: 10px;
 
 }
 
+.pd15{
 
+    padding: 15px;
 
+}
 
 
 .pd20 {
 
     padding: 20px;
5e88640
 
resources/css/layout.css (deleted)
--- resources/css/layout.css
@@ -1,199 +0,0 @@
-@charset "utf-8";
-
-.dashboard-wrap {
-    width: 100%;
-    height: 100vh;
-    display: grid;
-    grid-template-columns: 270px minmax(auto, 1fr);
-    grid-template-rows: auto 1fr;
-    grid-template-areas:
-        "header header "
-        "nav  main  "
-        "nav  main  "
-}
-
-.layout-wrap {
-    width: 100%;
-    min-height: 100vh;
-    position: relative;
-
-}
-
-
-header {
-    background-color: #fff;
-    padding: 15px 30px;
-    grid-area: header;
-    position: relative;
-}
-
-.logo {
-    width: 200px;
-}
-
-.logo>a {
-    display: block;
-    width: 100%;
-}
-
-.logo>a>img {
-    display: block;
-    width: 100%;
-}
-
-.user-name {
-    font-size: 1.3rem;
-    margin-left: 5px;
-}
-
-.sms,
-.user {
-    margin-left: 10px;
-}
-
-.layout-wrap header{
-    position: absolute;
-    width: 100%;
-    top: 0;
-    left: 0;
-    z-index: 1;
-}
-
-
-
-/* 메뉴 공통 */
-nav {
-    background-color: #213f99;
-    position: relative;
-}
-
-nav ul li a,
-nav ul li p {
-    padding: 5px;
-    display: block;
-    color: #fff;
-}
-
-nav.side-menu ul.sub-menu,
-nav.top-menu ul.sub-menu {
-    font-size: 1.3rem;
-    overflow: hidden;
-    transition: all 0.5s ease-in-out;
-}
-
-ul.sub-menu>li {
-    padding: 10px 20px;
-
-}
-
-p.active {
-    background-color: #fff;
-    color: #213f99;
-    border-radius: 50px
-}
-
-/* 사이드 메뉴 */
-nav.side-menu {
-    width: 100%;
-    height: 100vh;
-    border-radius: 0 70px 70px 0;
-    grid-area: nav;
-    overflow-y: auto;
-}
-
-nav.side-menu::-webkit-scrollbar {
-    display: none;
-}
-
-nav.side-menu::-ms-scrollbar {
-    display: none;
-}
-
-
-nav.side-menu>ul.main-menu {
-    padding: 50px 30px;
-}
-
-nav.side-menu>ul.main-menu>li>div>a,
-nav>ul>li {
-    padding: 10px 0;
-    font-size: 1.3rem;
-    font-weight: bold;
-}
-
-
-
-/* 상단 메뉴 */
-.top-menu{
-    position: absolute;
-    width: 100%;
-    top: 57px;
-    left: 0;
-    z-index: 2;
-}
-.top-menu>ul.main-menu {
-    display: flex;
-    justify-content: center;
-}
-
-.depth1 {
-    cursor: default;
-}
-
-.top-menu>ul>li {
-    /* min-width: 152px; */
-    /* padding: 10px 30px; */
-    text-align: center;
-    position: relative;
-}
-
-.top-menu>ul>li>p {
-    padding: 5px 47px;
-}
-
-.top-menu ul.sub-menu {
-    position: absolute;
-    width: 100%;
-    background-color: #fff;
-    z-index: 4;
-    bottom: 0;
-    left: 0;
-    transform: translateY(100%);
-    transition: max-height 1.8s ease-in-out, opacity 1.3s ease-in-out;
-}
-
-.top-menu ul.sub-menu li a {
-    text-align: center;
-    color: #213f99;
-}
-
-.navbg {
-    overflow: hidden;
-    background-color: #fff;
-    border-bottom: 2px solid #213f99;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    transform: translateY(100%);
-    width: 100%;
-    z-index: 3;
-    transition: height 0.6s ease-in-out;
-}
-
-
-
-/* 메인 */
-.main {
-    padding: 20px;
-    height: 100vh;
-    grid-area: main;
-}
-
-.layout-wrap .main {
-    padding: 123px 20px 20px;
-}
-
-.login{
-    width: 100%;
-    height: 100vh;
-}(No newline at end of file)
5e88640
d4907ef
resources/css/reset.css
--- resources/css/reset.css
+++ resources/css/reset.css
@@ -17,7 +17,7 @@
 
 }
 
 
 body {
 
-    min-width: 1356px;
 
+    min-width: 1200px;
 
     background-color: #f7f6fb;
 
 }
5e88640
d4907ef
resources/css/style.css
--- resources/css/style.css
+++ resources/css/style.css
@@ -1,480 +1,1 @@
 
 @charset "utf-8";
 
-
 
-/* page 추가 */
 
-/* 작업관리 페이지*/
 
-.node-zone {
 
-    /* height: calc(100% - 61px); */
 
-    margin-bottom: 10px;
 
-    background-color: #fff;
 
-    padding: 10px;
 
-    border-radius: 5px;
 
-}
 
-
 
-.text-over {
 
-    white-space: nowrap;
 
-    overflow: hidden;
 
-    text-overflow: ellipsis;
 
-}
 
-
 
-.state span {
 
-    font-size: 1.3rem;
 
-}
 
-
 
-.vue-flow__panel button {
 
-    margin-left: 0;
 
-}
 
-
 
-/* 파일관리 페이지*/
 
-.file-zone {
 
-    height: calc(100% - 55px);
 
-}
 
-
 
-.tree-wrap {
 
-    height: 100%;
 
-    overflow: auto;
 
-}
 
-
 
-.file-table th {
 
-    position: sticky;
 
-    top: 0;
 
-}
 
-
 
-.file-table tr .icon-btn {
 
-    opacity: 0;
 
-}
 
-
 
-.file-table tr:hover,
 
-.file-table tr:nth-child(even):hover {
 
-    background-color: var(--color-light-orange);
 
-}
 
-
 
-.file-table tr:hover .icon-btn {
 
-    opacity: 1;
 
-    transition: all 0.5s ease-in-out;
 
-}
 
-
 
-
 
-/* 데이터활용관리 */
 
-.gall-list li {
 
-    padding: 0 10px;
 
-    max-width: 24%;
 
-}
 
-
 
-.gall-list li>div {
 
-    min-height: 274px;
 
-    padding: 10px;
 
-    box-shadow: 0 0 5px #aaa;
 
-}
 
-
 
-.gall-list li>div a {
 
-    display: block;
 
-    width: 100%;
 
-}
 
-
 
-.gall-list li>div a .gall-img {
 
-    width: 100%;
 
-    height: 200px;
 
-    text-align: center;
 
-    overflow: hidden;
 
-    margin-bottom: 10px;
 
-}
 
-
 
-.gall-list li>div a .gall-img img {
 
-    width: 100%;
 
-    height: 100%;
 
-}
 
-
 
-.gall-list li>div a .gall-title {
 
-    font-size: 1.6rem;
 
-    font-weight: 800;
 
-    margin-bottom: 10px;
 
-}
 
-
 
-.gall-info {
 
-    width: 100%;
 
-}
 
-
 
-.gall-list li>div a .gall-detail {
 
-    font-size: 1.3rem;
 
-    width: 100%;
 
-    overflow: hidden;
 
-    white-space: nowrap;
 
-    text-overflow: ellipsis;
 
-    word-break: break-all;
 
-}
 
-
 
-.custom-info {
 
-    position: absolute;
 
-    width: calc(100% - 0px);
 
-    z-index: 1;
 
-}
 
-
 
-.layout-option,
 
-.layout{
 
-    padding: 15px 0;
 
-    height: 100%;
 
-}
 
-
 
-.custom-info details summary,
 
-.component-zone details summary,
 
-.chart-zone details summary {
 
-    font-size: 1.6rem;
 
-    padding: 15px;
 
-    border: 1px solid #213f99;
 
-    background-color: rgb(243, 246, 255);
 
-    border-radius: 5px;
 
-    position: relative;
 
-}
 
-
 
-.component-zone details summary,
 
-.chart-zone details summary {
 
-    border: 1px solid var(--color-orange);
 
-    background-color: rgb(255, 249, 239);
 
-    color: var(--color-orange);
 
-}
 
-
 
-.custom-info details[open] summary,
 
-.component-zone details[open] summary,
 
-.chart-zone details[open] summary {
 
-    border-radius: 5px 5px 0 0;
 
-}
 
-
 
-
 
-.custom-info .info-zone {
 
-    border: 1px solid #eee;
 
-    border-radius: 0 0 5px 5px;
 
-    padding: 15px;
 
-    background-color: #fff;
 
-}
 
-
 
-.data-list {
 
-    height: 100px;
 
-    overflow-y: auto;
 
-    background-color: #f8f8f8;
 
-    border-radius: 5px;
 
-    padding: 10px;
 
-}
 
-
 
-.tab-zone{
 
-    position: relative;
 
-}
 
-
 
-.tab-zone,
 
-.preview-zone {
 
-    height: 100%;
 
-}
 
-
 
-.column-item {
 
-    width: 100%;
 
-    font-size: 1.3rem;
 
-    text-align: center;
 
-    padding: 10px;
 
-    border-radius: 5px;
 
-    border: 1px solid var(--color-orange);
 
-    background-color: rgb(255, 249, 239);
 
-    color: var(--color-orange);
 
-    margin-bottom: 10px;
 
-}
 
-
 
-.column-item:last-child {
 
-    margin-bottom: 0;
 
-}
 
-
 
-.component-content {
 
-    padding: 10px;
 
-
 
-}
 
-
 
-.layout-content>li,
 
-.component-content>li {
 
-    margin-top: 10px;
 
-    margin-right: 10px;
 
-}
 
-
 
-.layout-content>li:nth-child(3n),
 
-.component-content>li:nth-child(3n) {
 
-    margin-right: 0px;
 
-}
 
-
 
-.icon-content {
 
-    margin-left: 10px;
 
-    font-size: 1.3rem;
 
-}
 
-
 
-.component-wrap {
 
-    width: 100%;
 
-    height: 100%;
 
-    padding: 10px;
 
-    border-radius: 5px;
 
-    background-color: #f8f8f8;
 
-}
 
-
 
-input[type="text"].com-dbZone {
 
-    margin-left: 0;
 
-}
 
-
 
-.db-input {
 
-    height: 100%;
 
-}
 
-
 
-.active-layout .vertical-icon,
 
-.active-layout .horizental-icon {
 
-    background-color: var(--color-blueE);
 
-    border: 3px solid var(--color-blue);
 
-}
 
-
 
-.active-layout .horizental-icon>span,
 
-.active-layout .vertical-icon>span {
 
-    border: 3px solid var(--color-blue);
 
-}
 
-
 
-.component-content li img {
 
-    width: 100%;
 
-}
 
-
 
-.page-info > .info-area,
 
-.layout-tree ul{
 
-    height: calc(100% - 40px);
 
-    overflow-y: auto;
 
-}
 
-
 
-.layout-option{
 
-    background-color:var(--color-skyBlue);
 
-
 
-}
 
-.layout-option > div:nth-child(2){
 
-    overflow-y: auto;
 
-}
 
-
 
-.section-title{
 
-    font-size: 1.4rem;
 
-    position: relative;
 
-}
 
-
 
-.section-title::before{
 
-    content: "";
 
-    position: absolute;
 
-    width: 100%;
 
-    height: 50%;
 
-    background-color: var(--color-orange);
 
-    left: 0;
 
-    bottom: 0;
 
-    opacity: 0.2;
 
-}
 
-
 
-.detail-content{
 
-    background-color: var(--color-white);
 
-    border: 1px solid var(--color-blue);
 
-    border-radius: 0 0 5px 5px;
 
-    border-top: 0;
 
-}
 
-
 
-.tab-box{
 
-    border: 1px solid #eee;
 
-    border-radius: 0 5px 0 0;
 
-}
 
-
 
-.attribute-modal{
 
-    position: absolute;
 
-    min-width: 120px;
 
-    max-width: 200px;
 
-    bottom: 0;
 
-    left: 0;
 
-    background-color: var(--color-white);
 
-    transform: translateY(100%);
 
-    border: 1px solid #ddd;
 
-}
 
-
 
-.attribute-modal > ul>li{
 
-    padding: 8px 5px;
 
-    border-top: 1px solid #eee;
 
-}
 
-
 
-.attribute-modal > ul>li:first-child{
 
-    border-top: 0;
 
-}
 
-
 
-.attribute-modal > ul>li svg,
 
-.attribute-modal > ul>li p{
 
-    color: var(--color-darkG);
 
-}
 
-
 
-.attribute-modal > ul>li:hover svg,
 
-.attribute-modal > ul>li:hover p{
 
-    color: var(--color-blue);
 
-}
 
-
 
-.editor-box{
 
-    background-color: var(--color-skyBlue);
 
-    border: 1px dashed var(--color-blue);
 
-}
 
-
 
-
 
-
 
-/* 알람 */
 
-
 
-.speaker {
 
-    text-align: center;
 
-    margin-bottom: 10px;
 
-}
 
-
 
-.speaker>span {
 
-    display: inline-block;
 
-    background-color: #eee;
 
-}
 
-
 
-.speaker>span:nth-of-type(1) {
 
-    width: 10px;
 
-    height: 10px;
 
-    border-radius: 10px;
 
-}
 
-
 
-.speaker>span:nth-of-type(2) {
 
-    width: 60px;
 
-    height: 10px;
 
-    border-radius: 10px;
 
-    margin-left: 10px;
 
-}
 
-
 
-.text-areaZone {
 
-    height: calc(50% - 22px);
 
-    margin-bottom: 10px;
 
-}
 
-
 
-.user-list {
 
-    width: 100%;
 
-    height: calc(100% - 50% - 22px);
 
-}
 
-
 
-.user-list .user-title {
 
-    font-size: 1.6rem;
 
-    font-weight: 800;
 
-    color: var(--color-blue);
 
-    margin-bottom: 10px;
 
-}
 
-
 
-.user-list>ul {
 
-    padding: 10px;
 
-    height: calc(100% - 29px);
 
-    overflow-y: auto;
 
-    border-top: 1px solid #eee;
 
-}
 
-
 
-.user-list>ul>li {
 
-    padding: 5px 10px;
 
-    margin-bottom: 10px;
 
-    border: 1px solid var(--color-orange);
 
-    background-color: rgb(255, 249, 239);
 
-    color: var(--color-orange);
 
-    border-radius: 5px;
 
-    font-size: 1.3rem;
 
-}
 
-
 
-.user-list>ul>li:last-child {
 
-    margin-bottom: 0;
 
-}
 
-
 
-.user-zone,
 
-.log-zone {
 
-    height: 100vh;
 
-}
 
-
 
-.all-user,
 
-.check-user {
 
-    height: 100vh;
 
-    border: 1px solid #eee;
 
-}
 
-
 
-.log-content {
 
-    height: 99%;
 
-    background-color: var(--color-blueE);
 
-    padding: 10px 10px 10px 25px;
 
-    overflow-y: auto;
 
-}
 
-
 
-.log-content li {
 
-    font-size: 1.3rem;
 
-    color: var(--color-blue);
 
-    list-style: disc;
 
-    padding: 5px;
 
-}
 
-
 
-.push-text {
 
-    padding: 10px;
 
-    font-family: 'Pretendard';
 
-    font-size: 15px;
 
-}
 
-
 
-
 
-/* 요소옵션 추가 240216 김하영 */
 
-.optionBox {
 
-    width: 100%;
 
-    height: 100%;
 
-    border-radius: 5px;
 
-    padding: 2rem;
 
-    background-color: #f9f9f9;
 
-
 
-}
 
-
 
-.optionBoxText {
 
-    font-size: 1.5rem;
 
-    color: #213f99;
 
-    font-family: 'Pretendard';
 
-    font-weight: 600;
 
-}
 
-
 
-.selectBoxArea select {
 
-    border: 0px;
 
-    background-color: white;
 
-}
 
-
 
-.optionBox {
 
-    font-size: 1.5rem;
 
-}
 
-
 
-.optionSubText {
 
-    text-align: center;
 
-}
 
-
 
-.optionSubBox {
 
-    background-color: white;
 
-    padding: 10px;
 
-    border-radius: 5px;
 
-    overflow-y: scroll;
 
-    height: 225px;
 
-}
 
-
 
-.optionSubBox li {
 
-    margin-bottom: 10px;
 
-}
 
-
 
-.cyberpunk-checkbox {
 
-    appearance: none;
 
-    width: 20px;
 
-    height: 20px;
 
-    border: 2px solid var(--color-blue);
 
-    border-radius: 5px;
 
-    background-color: transparent;
 
-    display: inline-block;
 
-    position: relative;
 
-    margin-right: 10px;
 
-    cursor: pointer;
 
-}
 
-
 
-.cyberpunk-checkbox:before {
 
-    content: "";
 
-    background-color: var(--color-blue);
 
-    display: block;
 
-    position: absolute;
 
-    top: 50%;
 
-    left: 50%;
 
-    transform: translate(-50%, -50%) scale(0);
 
-    width: 10px;
 
-    height: 10px;
 
-    border-radius: 3px;
 
-    transition: all 0.3s ease-in-out;
 
-}
 
-
 
-.cyberpunk-checkbox:checked:before {
 
-    transform: translate(-50%, -50%) scale(1);
 
-}
 
d4907ef
resources/img/common/DATA.png (Binary) (added)
+++ resources/img/common/DATA.png
Binary file is not shown
 
d4907ef
resources/img/common/healthCare.png (Binary) (added)
+++ resources/img/common/healthCare.png
Binary file is not shown
 
d4907ef
resources/img/common/main.png (Binary) (added)
+++ resources/img/common/main.png
Binary file is not shown
 
d4907ef
resources/img/common/mobility.png (Binary) (added)
+++ resources/img/common/mobility.png
Binary file is not shown
 
d4907ef
resources/img/common/smartCity.png (Binary) (added)
+++ resources/img/common/smartCity.png
Binary file is not shown
 
d4907ef
resources/img/common/smartFactory.png (Binary) (added)
+++ resources/img/common/smartFactory.png
Binary file is not shown
 
d4907ef
resources/img/component/logo-w.png (Binary) (added)
+++ resources/img/component/logo-w.png
Binary file is not shown
 
d4907ef
views/layout/Header.html (added)
+++ views/layout/Header.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<!-- 헤더 -->
+<body>
+    <div class="header">
+        <div class="header-area flex justify-between align-center">
+            <img src="../../resources/img/component/logo-w.png" alt="">
+            <nav>
+                <ul>
+                    <li><a href="">About Us</a></li>
+                    <li><a href="">Business</a></li>
+                    <li><a href="">Solution</a></li>
+                    <li><a href="">Portfolio</a></li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+</body>
+<style>
+    #header {
+        background-color: #213F99;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+    }
+    .header-area{
+        width: 1200px;
+        margin: 0 auto;
+        padding: 20px 0 15px 0;
+    }
+   
+
+    nav ul li{
+        margin-left: 140px;
+        display: inline-block;
+    }
+
+    nav ul li a{
+        color: white;
+        font-size: 1.5rem;
+    }
+</style>
+
+</html>(No newline at end of file)
5e88640
d4907ef
views/main.html
--- views/main.html
+++ views/main.html
@@ -5,14 +5,323 @@
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
 
-
 
+    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
 
+    <link rel="stylesheet" href="../../resources/css/font.css">
 
+    <link rel="stylesheet" href="../../resources/css/reset.css">
 
+    <link rel="stylesheet" href="../../resources/css/style.css">
 
+    <link rel="stylesheet" href="../../resources/css/component.css">
 
+    <link rel="stylesheet" href="../../resources/css/common.css">
 
+    <link rel="stylesheet" href="../../resources/css/responsive.css">
 
     <title>TAKENSOFT</title>
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
 
-
 
 </head>
 
 
 <body>
 
+    <div id="header"></div>
 
+    <!-- Swiper -->
 
+    <div class="swiper mySwiper">
 
+        <div class="swiper-wrapper">
 
+            <div class="swiper-slide">
 
+                <div class="slide-wrap">
 
+                    <div class="main-wrap">
 
+                        <div class="text-area flex align-end">
 
+                            <h2>우리의 AI 기술로 <span>실현되는</span><br> 당신의 <span>비전</span></h2>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-wrap ">
 
+                    <div class="text-area slide-section">
 
+                        <p class="text-main mb60">테이큰소프트는 <span>데이터</span>와 <span>AI 기술</span>을 통해 <br> 일상을 <span
 
+                                class="text-event">혁신으로 선도</span>합니다.</p>
 
+                        <p>테이큰소프트는 AI 기반 솔루션을 제공하고 나아가 새로운 미래의 ICT 산업을 열어가겠습니다.</p>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-wrap slide-solution">
 
+                    <div class="text-area ">
 
+                        <div style="width: 100%;" class="mb70">
 
+                            <p class=" solution-text pb30">테이큰 소프트는 ...</p>
 
+                            <p>AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br>
 
+                                스마트시티,스마트팩토리,모빌리티,헬스케어 분야 등에서 AI 솔루션을 제공하고 있습니다.
 
+                            </p>
 
+                        </div>
 
+                        <div class="flex solution-box pd15">
 
+                            <div class="pink-box flex-column">
 
+                                <img src="../resources/img/common/DATA.png" alt="">
 
+                                <div>
 
+                                    <p>데이터관리분야</p>
 
+                                    <p>데이터 관리 솔루현 Taken BI Manager</p>
 
+                                </div>
 
+                            </div>
 
+                            <div class="yellow-box flex-column">
 
+                                <img src="../resources/img/common/smartCity.png" alt="">
 
+                                <div>
 
+                                    <p>스마트시티 분야</p>
 
+                                    <p>대구광역시 AI 안전 통합 횡단보도 플랫폼</p>
 
+                                </div>
 
+                            </div>
 
+                            <div class="blue-box flex-column">
 
+                                <img src="../resources/img/common/mobility.png" alt="">
 
+                                <div>
 
+                                    <p>모빌리티 분야</p>
 
+                                    <p>AI 기반의 스마트 객체인식을 위한 CCTY</p>
 
+                                </div>
 
+                            </div>
 
+                            <div class="purple-box flex-column">
 
+                                <img src="../resources/img/common/smartFactory.png" alt="">
 
+                                <div>
 
+                                    <p>스마트팩토리 분야</p>
 
+                                    <p>제조기업 공정 관리 모니터링 서비스</p>
 
+                                </div>
 
+                            </div>
 
+                            <div class="ivory-box flex-column">
 
+                                <img src="../resources/img/common/healthCare.png" alt="">
 
+                                <div>
 
+                                    <p>헬스케어 분야</p>
 
+                                    <p>시니어 스마트 케어 모니터링 플랫폼</p>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-wrap">
 
+                    <p>POTRFOLIO</p>
 
+
 
+                </div>
 
+            </div>
 
+
 
+        </div>
 
+        <div class="swiper-pagination"></div>
 
+    </div>
 
+    <div id="footer" style="border: 0px;"></div>
 
+
 
+
 
+
 
 
 </body>
 
+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
 
+
 
+<script>
 
+
 
+    var swiper = new Swiper(".mySwiper", {
 
+        direction: "vertical",
 
+        slidesPerView: 1,
 
+        spaceBetween: 30,
 
+        mousewheel: true,
 
+        pagination: {
 
+            el: ".swiper-pagination",
 
+            clickable: true,
 
+        }, on: {
 
+            reachEnd: function () {
 
+                swiper.mousewheel.disable();
 
+                $("#footer").show();
 
+            }
 
+        }
 
+    });
 
+
 
+    window.addEventListener('wheel', function (event) {
 
+        if (event.deltaY < 1) {
 
+            swiper.mousewheel.enable();
 
+        } else if (event.deltaY > 1) {
 
+        }
 
+    });
 
+
 
+    // 헤더,푸터 불러오기
 
+    $(function () {
 
+        $("#header").load("layout/header.html");
 
+        $("#footer").load("layout/footer.html");
 
+        $("#footer").hide();
 
+    });
 
+
 
+</script>
 
+
 
+
 
+
 
+<style scoped>
 
+    html,
 
+    body {
 
+        position: relative;
 
+        height: 100%;
 
+        -ms-overflow-style: none;
 
+
 
+    }
 
+
 
+    ::-webkit-scrollbar {
 
+        display: none;
 
+    }
 
+
 
+    body {
 
+        background: #eee;
 
+        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 
+        font-size: 14px;
 
+        color: #000;
 
+        margin: 0;
 
+        padding: 0;
 
+    }
 
+
 
+    .swiper {
 
+        width: 100%;
 
+        height: 100%;
 
+    }
 
+
 
+    .swiper-slide {
 
+        text-align: center;
 
+        font-size: 18px;
 
+        background: #fff;
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
+    }
 
+
 
+    .swiper-slide img {
 
+        display: block;
 
+        width: 100%;
 
+        height: 100%;
 
+        object-fit: cover;
 
+    }
 
+
 
+    #header {
 
+        position: fixed;
 
+        top: 0;
 
+        z-index: 1;
 
+    }
 
+
 
+    .slide-wrap {
 
+        width: 100%;
 
+        height: 100%;
 
+        padding: 59px 0 0 0;
 
+    }
 
+
 
+    .main-wrap {
 
+        background: url(../resources/img/common/main.png) no-repeat;
 
+        width: 100%;
 
+        height: 100%;
 
+        background-size: cover;
 
+        background-position: bottom;
 
+    }
 
+
 
+    .text-area {
 
+        width: 1200px;
 
+        height: 100%;
 
+        margin: auto;
 
+        text-align: center;
 
+
 
+    }
 
+
 
+    .main-wrap .text-area h2 {
 
+        padding-bottom: 150px;
 
+        text-align: left;
 
+        font-size: 6rem;
 
+        font-weight: 600;
 
+        color: white;
 
+        font-family: 'Pretendard';
 
+
 
+    }
 
+
 
+    .main-wrap .text-area h2 span {
 
+        font-weight: 900;
 
+    }
 
+
 
+    .slide-section {
 
+        padding-top: 330px;
 
+    }
 
+
 
+    .text-main {
 
+        font-weight: 600;
 
+        color: #213f99;
 
+        font-family: 'Pretendard';
 
+        font-size: 5rem;
 
+
 
+    }
 
+
 
+    .text-main span {
 
+        color: #f29600;
 
+        font-weight: 900;
 
+
 
+    }
 
+
 
+    .text-event {
 
+        position: relative;
 
+        z-index: 3;
 
+    }
 
+
 
+    .text-event::before {
 
+        content: '';
 
+        position: absolute;
 
+        bottom: 0;
 
+        left: 0;
 
+        width: 100%;
 
+        height: 20px;
 
+        background-color: #fce5bf;
 
+        z-index: -1;
 
+    }
 
+
 
+    .slide-solution {
 
+        padding-top: 235px;
 
+        font-family: 'Pretendard';
 
+
 
+    }
 
+
 
+
 
+
 
+    .solution-text {
 
+        font-size: 4.5rem;
 
+        font-weight: 900;
 
+
 
+    }
 
+
 
+    .solution-box {
 
+        flex-wrap: nowrap;
 
+        gap: 40px;
 
+        width: 100%;
 
+        
+    }
 
+    .pink-box{
 
+        width: 200px;
 
+        padding: 15px;
 
+        height: 320px;
 
+        background-color: #ffe2e4;
 
+        border-radius: 20px;
 
+     
+    }
 
+    .pink-box img , .blue-box img , .yellow-box img ,.purple-box img,.ivory-box img{
 
+        object-fit: contain;
 
+     }
 
+    .yellow-box{
 
+        width: 200px;
 
+        height: 320px;
 
+        padding: 15px;
 
+        background-color: #f9f9e9;
 
+        border-radius: 20px;
 
+    }
 
+    
+    .blue-box{
 
+        width: 200px;
 
+        height: 320px;
 
+        padding: 15px;
 
+        background-color: #d2e9ff;
 
+        border-radius: 20px;
 
+    }
 
+   
+     .purple-box{
 
+        width: 200px;
 
+        height: 320px;
 
+        padding: 15px;
 
+        background-color: #e9ebff;
 
+        border-radius: 20px;
 
+     }
 
+     .ivory-box{
 
+        width: 200px;
 
+        height: 320px;
 
+        padding: 15px;
 
+        background-color: #f8f9fa;
 
+        border-radius: 20px;
 
+     }
 
+</style>
 
 
 </html>
(No newline at end of file)
Add a comment
List