init

html/css/common.css

@@ -0,0 +1,57 @@
+@charset "utf-8";
+
+body,html{
+    overflow-y: hidden !important;
+}  
+
+/* 본문 바로가기 */
+#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
+#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}
+
+/*header*/
+#hd {z-index:1000;position:fixed;width:100%; top:0;overflow:hidden; transition:0.6s ease; -webkit-transition:0.6s ease;}
+#hd:hover{background:#fff; border-bottom:1px solid #ddd;}
+#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
+#logo a{display:block;padding:20px;}
+#logo a img{width:200px;}
+#hd_wrapper{display:flex;width:100%;justify-content: space-between;}
+
+/* nav */
+#gnb{position:relative;width:calc(100% - 250px);}
+#gnb h2{position:absolute;font-size:0;line-height:0;overflow:hidden}
+#gnb .gnb_wrap{margin:0 auto;position:relative;}
+#gnb #gnb_1dul {font-size:1.083em;padding:0 30px;display: flex;justify-content: flex-end;width:100%;}
+#gnb ul:after {display:block;visibility:hidden;clear:both;content:""}
+#gnb .gnb_1dli{line-height:100px;position:relative;width:25%;max-width:220px;}
+
+.gnb_1dli .bg{display:none;width:10px;height:10px;overflow:hidden;background:url(../img/gnb_bg2.gif) no-repeat 50% 50%;text-indent:-999px}
+.gnb_1da {width:100%;display:inline-block;font-weight:500;color:#fff;text-decoration:none; font-size:20px;}
+.gnb_2dli{line-height:36px; padding:0 0 10px; font-size:18px; font-weight:400;}
+.gnb_2dli:first-child{border:0}
+.gnb_2dul {display:block;padding: 0; height:0; overflow:hidden;}
+.gnb_2da {color:#222;text-align:left;text-decoration:none}
+
+
+/*slidesNav*/
+#fp-nav ul li a span, .fp-slidesNav ul li a span{background:rgba(255,255,255,0.8)}
+/*section*/
+.inner{width:1280px;margin:0px auto;position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);}
+.inner div b{color:#fff;}
+.main-bn{position: relative;}
+.main-bn h2{font-size:3rem;font-weight:500;color:rgba(255,255,255,0.8);}
+.main-bn .big{display:block;font-size:6rem;color:#fff;font-weight:bold;}
+.main-bn .sm{display:block;font-size:1.25rem;color:rgba(255,255,255,0.8);margin:10px 0 0 10px;}
+.main-bn .txt-box{font-size:1.25rem;font-weight:300;color:rgba(255,255,255,0.8);line-height:1.5;}
+.main-bn .txt-box b{font-size:3rem;}
+.bg-canvas{position: absolute;top:0;opacity:0.3;}
+.bg01{background:url('../images/bg01.jpg');}
+.bg02{background:url('../images/bg02.jpg');}
+.scroll-animation {position:absolute;left:50%;transform: translateX(-50%);bottom:40px;}
+.scroll-box span{display:block;text-align:center;color:rgba(255,255,255,0.8);font-size:0.875rem;font-weight:300;animation: updown 1s ease-in-out 0.3s infinite normal;}
+.scroll-box span.scroll-icon{margin:10px auto;fill:#fff;width:30px;}
+.scroll-box span.scroll-icon img{width:100%;}
+@keyframes updown{
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-5px); }
+    100% { transform: translateY(0px); }
+  }

html/css/common_version02.css

@@ -0,0 +1,27 @@
+@charset "utf-8";
+
+/*header*/
+#header{border-bottom:1px solid #f4f4f4;background:rgba(255,255,255,0.5);position:fixed;z-index:999;width:100%;}
+#header .header-wrap{width:100%;height:100px;padding:0 20px;display:flex;align-items: center;justify-content: space-between;}
+#header .logo h1 a{width:100%;height:100%;display:block;}
+#header .logo h1 img{width:200px;}
+#header .nav{width:calc(100% - 250px);}
+#header .nav > ul{display: flex;justify-content: flex-end;align-items: center;}
+#header .nav > ul > li{max-width:180px;width:25%;height:100px;line-height:100px;text-align:center;position: relative;}
+#header .nav > ul > li > a{font-size:1.125em;font-weight:500;width:100%;display:block;height:100%;
+	-webkit-transition: all .25s ease;
+	-moz-transition: all .25s ease;
+	-ms-transition: all .25s ease;
+	-o-transition: all .25s ease;
+	transition: all .25s ease;
+}
+#header .nav ul.submenu {opacity:0;position: absolute;z-index: 99;top:100px;visibility: hidden;width:100%;background:#f4f4f4;}
+#header .nav ul.submenu li{width:100%;height:60px;line-height:60px;}
+#header .nav ul.submenu li a{width:100%;display:block;}
+#header .nav li:hover ul.submenu {opacity: 1;visibility: visible;}
+#header .nav li:hover ul.submenu a:hover {background: #ddd;}
+#submenu a {background-color:#000000;}
+
+.main-v{height:calc(100vh - 200px);background:green}
+.swiper-container{height:100%;}
+.slide-box{display:flex;justify-content:center;align-items:center;font-size:100px;}

html/css/font.css

@@ -0,0 +1,241 @@
+@charset "utf-8";
+
+/* 에스코어드림 */
+@font-face {
+	font-family: 'score';
+	font-style: normal;
+	font-weight: 100;
+	src:url('font/S-CoreDream-1Thin.eot');
+	src:url('font/S-CoreDream-1Thin.eot?#iefix') format('embedded-opentype'),
+	url('font/S-CoreDream-1Thin.woff') format('woff'),
+	url('font/S-CoreDream-1Thin.woff2') format('woff2'),
+	url('font/S-CoreDream-1Thin.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: 'score';
+	font-style: normal;
+	font-weight: 200;
+	src:url('font/S-CoreDream-2ExtraLight.eot');
+	src:url('font/S-CoreDream-2ExtraLight.eot?#iefix') format('embedded-opentype'),
+	url('font/S-CoreDream-2ExtraLight.woff') format('woff'),
+	url('font/S-CoreDream-2ExtraLight.woff2') format('woff2'),
+	url('font/S-CoreDream-2ExtraLight.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: 'score';
+	font-style: normal;
+	font-weight: 300;
+	src:url('font/S-CoreDream-3Light.eot');
+	src:url('font/S-CoreDream-3Light.eot?#iefix') format('embedded-opentype'),
+	url('font/S-CoreDream-3Light.woff') format('woff'),
+	url('font/S-CoreDream-3Light.woff2') format('woff2'),
+	url('font/S-CoreDream-3Light.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: 'score';
+	font-style: normal;
+	font-weight: 400;
+	src:url('font/S-CoreDream-4Regular.eot');
+	src:url('font/S-CoreDream-4Regular.eot?#iefix') format('embedded-opentype'),
+	url('font/S-CoreDream-4Regular.woff') format('woff'),
+	url('font/S-CoreDream-4Regular.woff2') format('woff2'),
+	url('font/S-CoreDream-4Regular.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: 'score';
+	font-style: normal;
+	font-weight: 500;
+	src:url('font/S-CoreDream-5Medium.eot');
+	src:url('font/S-CoreDream-5Medium.eot?#iefix') format('embedded-opentype'),
+	url('font/S-CoreDream-5Medium.woff') format('woff'),
+	url('font/S-CoreDream-5Medium.woff2') format('woff2'),
+	url('font/S-CoreDream-5Medium.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: 'score';
+	font-style: normal;
+	font-weight: 600;
+	src:url('font/S-CoreDream-6Bold.eot');
+	src:url('font/S-CoreDream-6Bold.eot?#iefix') format('embedded-opentype'),
+	url('font/S-CoreDream-6Bold.woff') format('woff'),
+	url('font/S-CoreDream-6Bold.woff2') format('woff2'),
+	url('font/S-CoreDream-6Bold.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: 'score';
+	font-style: normal;
+	font-weight: 700;
+	src:url('font/S-CoreDream-7ExtraBold.eot');
+	src:url('font/S-CoreDream-7ExtraBold.eot?#iefix') format('embedded-opentype'),
+	url('font/S-CoreDream-7ExtraBold.woff') format('woff'),
+	url('font/S-CoreDream-7ExtraBold.woff2') format('woff2'),
+	url('font/S-CoreDream-7ExtraBold.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: 'score';
+	font-style: normal;
+	font-weight: 800;
+	src:url('font/S-CoreDream-8Heavy.eot');
+	src:url('font/S-CoreDream-8Heavy.eot?#iefix') format('embedded-opentype'),
+	url('font/S-CoreDream-8Heavy.woff') format('woff'),
+	url('font/S-CoreDream-8Heavy.woff2') format('woff2'),
+	url('font/S-CoreDream-8Heavy.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: 'score';
+	font-style: normal;
+	font-weight: 900;
+	src:url('font/S-CoreDream-9Black.eot');
+	src:url('font/S-CoreDream-9Black.eot?#iefix') format('embedded-opentype'),
+	url('font/S-CoreDream-9Black.woff') format('woff'),
+	url('font/S-CoreDream-9Black.woff2') format('woff2'),
+	url('font/S-CoreDream-9Black.ttf') format('truetype');
+}
+/*Montserrat*/
+@font-face {
+  font-family:"Montserrat";
+  src:
+  url('../font/Montserrat-Thin.ttf') format('truetype'),
+  font-weight:100;
+  font-style:normal;
+}
+@font-face {
+  font-family:"Montserrat";
+  src:
+  url('../font/Montserrat-ThinItalic.ttf') format('truetype'),
+  font-weight:100;
+  font-style:italic;
+}
+@font-face {
+  font-family:"Montserrat";
+  src:
+  url('../font/Montserrat-Light.ttf') format('truetype'),
+  font-weight:200;
+  font-style:normal;
+}
+@font-face {
+  font-family:"Montserrat";
+  src:
+  url('../font/Montserrat-LightItalic.ttf') format('truetype'),
+  font-weight:200;
+  font-style:italic;
+}
+
+@font-face {
+  font-family:"Montserrat";
+  src:
+  url('../font/Montserrat-Medium.ttf') format('truetype'),
+  font-weight:300;
+  font-style:normal;
+}
+@font-face {
+  font-family:"Montserrat";
+  src:
+  url('../font/Montserrat-MediumItalic.ttf') format('truetype'),
+  font-weight:300;
+  font-style:italic;
+}
+@font-face {
+  font-family:"Montserrat";
+  src:
+  url('../font/Montserrat-SemiBold.ttf') format('truetype'),
+  font-weight:500;
+  font-style:normal;
+}
+@font-face {
+  font-family:"Montserrat";
+  src:
+  url('../font/Montserrat-SemiBold.ttf') format('truetype'),
+  font-weight:500;
+  font-style:italic;
+}
+@font-face {
+  font-family:"Montserrat";
+  src:
+  url('../font/Montserrat-Bold.ttf') format('truetype'),
+  font-weight:600;
+  font-style:normal;
+}
+@font-face {
+  font-family:"Montserrat";
+  src:
+  url('../font/Montserrat-BoldItalic.ttf') format('truetype'),
+  font-weight:600;
+  font-style:italic;
+}
+@font-face {
+  font-family:"Montserrat";
+  src:
+  url('../font/Montserrat-Black.ttf') format('truetype'),
+  font-weight:900;
+  font-style:normal;
+}
+@font-face {
+  font-family:"Montserrat";
+  src:
+  url('../font/Montserrat-BlackItalic.ttf') format('truetype'),
+  font-weight:900;
+  font-style:italic;
+}
+/*NotoSansKR*/
+@font-face {
+  font-family:"NotoSansKR";
+  src:
+  url('../font/NotoSansKR-Thin.otf') format('opentype'),
+  url('../font/NotoSansKR-Thin.woff') format('woff'),
+  url('../font/NotoSansKR-Thin.woff2') format('woff2');
+  font-weight:100;
+  font-style:normal;
+}
+@font-face {
+  font-family:"NotoSansKR";
+  src:
+  url('../font/NotoSansKR-Light.otf') format('opentype'),
+  url('../font/NotoSansKR-Light.woff') format('woff'),
+  url('../font/NotoSansKR-Light.woff2') format('woff2');
+  font-weight:300;
+  font-style:normal;
+}
+@font-face {
+  font-family:"NotoSansKR";
+  src:
+  url('../font/NotoSansKR-Regular.otf') format('opentype'),
+  url('../font/NotoSansKR-Regular.woff') format('woff'),
+  url('../font/NotoSansKR-Regular.woff2') format('woff2');
+  font-weight:400;
+  font-style:normal;
+}
+@font-face {
+  font-family:"NotoSansKR";
+  src:
+  url('../font/NotoSansKR-Medium.otf') format('opentype'),
+  url('../font/NotoSansKR-Medium.woff') format('woff'),
+  url('../font/NotoSansKR-Medium.woff2') format('woff2');
+  font-weight:500;
+  font-style:normal;
+}
+@font-face {
+  font-family:"NotoSansKR";
+  src:
+  url('../font/NotoSansKR-Bold.otf') format('opentype'),
+  url('../font/NotoSansKR-Bold.woff') format('woff'),
+  url('../font/NotoSansKR-Bold.woff2') format('woff2');
+  font-weight:900;
+  font-style:normal;
+}
+/*나눔스퀘어라운드*/
+@font-face {font-family:"NanumSquareRound", 맑은고딕, Arial,sans-serif, Dotum, 돋움, "Apple SD Gothic Neo", arial;}
+@font-face {
+    font-family: 'NanumSquareRound';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/NanumSquareRound.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}

html/css/fullpage.css

@@ -0,0 +1,236 @@
+/*!
+ * fullPage 3.0.8
+ * https://github.com/alvarotrigo/fullPage.js
+ *
+ * @license GPLv3 for open source use only
+ * or Fullpage Commercial License for commercial use
+ * http://alvarotrigo.com/fullPage/pricing/
+ *
+ * Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
+ */
+html.fp-enabled,
+.fp-enabled body {
+    margin: 0;
+    padding: 0;
+    overflow:hidden;
+
+    /*Avoid flicker on slides transitions for mobile phones #336 */
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+.fp-section {
+    position: relative;
+    -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
+    -moz-box-sizing: border-box; /* <=28 */
+    box-sizing: border-box;
+}
+.fp-slide {
+    float: left;
+}
+.fp-slide, .fp-slidesContainer {
+    height: 100%;
+    display: block;
+}
+.fp-slides {
+    z-index:1;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
+    transition: all 0.3s ease-out;
+}
+.fp-section.fp-table, .fp-slide.fp-table {
+    display: table;
+    table-layout:fixed;
+    width: 100%;
+}
+.fp-tableCell {
+    display: table-cell;
+    vertical-align: middle;
+    width: 100%;
+    height: 100%;
+}
+.fp-slidesContainer {
+    float: left;
+    position: relative;
+}
+.fp-controlArrow {
+    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
+    -moz-user-select: none; /* mozilla browsers */
+    -khtml-user-select: none; /* webkit (konqueror) browsers */
+    -ms-user-select: none; /* IE10+ */
+    position: absolute;
+    z-index: 4;
+    top: 50%;
+    cursor: pointer;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    margin-top: -38px;
+    -webkit-transform: translate3d(0,0,0);
+    -ms-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+}
+.fp-controlArrow.fp-prev {
+    left: 15px;
+    width: 0;
+    border-width: 38.5px 34px 38.5px 0;
+    border-color: transparent #fff transparent transparent;
+}
+.fp-controlArrow.fp-next {
+    right: 15px;
+    border-width: 38.5px 0 38.5px 34px;
+    border-color: transparent transparent transparent #fff;
+}
+.fp-scrollable {
+    overflow: hidden;
+    position: relative;
+}
+.fp-scroller{
+    overflow: hidden;
+}
+.iScrollIndicator{
+    border: 0 !important;
+}
+.fp-notransition {
+    -webkit-transition: none !important;
+    transition: none !important;
+}
+#fp-nav {
+    position: fixed;
+    z-index: 100;
+    margin-top: -32px;
+    top: 50%;
+    opacity: 1;
+    -webkit-transform: translate3d(0,0,0);
+}
+#fp-nav.fp-right {
+    right: 17px;
+}
+#fp-nav.fp-left {
+    left: 17px;
+}
+.fp-slidesNav{
+    position: absolute;
+    z-index: 4;
+    opacity: 1;
+    -webkit-transform: translate3d(0,0,0);
+    -ms-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+    left: 0 !important;
+    right: 0;
+    margin: 0 auto !important;
+}
+.fp-slidesNav.fp-bottom {
+    bottom: 17px;
+}
+.fp-slidesNav.fp-top {
+    top: 17px;
+}
+#fp-nav ul,
+.fp-slidesNav ul {
+  margin: 0;
+  padding: 0;
+}
+#fp-nav ul li,
+.fp-slidesNav ul li {
+    display: block;
+    width: 14px;
+    height: 13px;
+    margin: 7px;
+    position:relative;
+}
+.fp-slidesNav ul li {
+    display: inline-block;
+}
+#fp-nav ul li a,
+.fp-slidesNav ul li a {
+    display: block;
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    text-decoration: none;
+}
+#fp-nav ul li a.active span,
+.fp-slidesNav ul li a.active span,
+#fp-nav ul li:hover a.active span,
+.fp-slidesNav ul li:hover a.active span{
+    height: 12px;
+    width: 12px;
+    margin: -6px 0 0 -6px;
+    border-radius: 100%;
+ }
+#fp-nav ul li a span,
+.fp-slidesNav ul li a span {
+    border-radius: 50%;
+    position: absolute;
+    z-index: 1;
+    height: 4px;
+    width: 4px;
+    border: 0;
+    background: #333;
+    left: 50%;
+    top: 50%;
+    margin: -2px 0 0 -2px;
+    -webkit-transition: all 0.1s ease-in-out;
+    -moz-transition: all 0.1s ease-in-out;
+    -o-transition: all 0.1s ease-in-out;
+    transition: all 0.1s ease-in-out;
+}
+#fp-nav ul li:hover a span,
+.fp-slidesNav ul li:hover a span{
+    width: 10px;
+    height: 10px;
+    margin: -5px 0px 0px -5px;
+}
+#fp-nav ul li .fp-tooltip {
+    position: absolute;
+    top: -2px;
+    color: #fff;
+    font-size: 14px;
+    font-family: arial, helvetica, sans-serif;
+    white-space: nowrap;
+    max-width: 220px;
+    overflow: hidden;
+    display: block;
+    opacity: 0;
+    width: 0;
+    cursor: pointer;
+}
+#fp-nav ul li:hover .fp-tooltip,
+#fp-nav.fp-show-active a.active + .fp-tooltip {
+    -webkit-transition: opacity 0.2s ease-in;
+    transition: opacity 0.2s ease-in;
+    width: auto;
+    opacity: 1;
+}
+#fp-nav ul li .fp-tooltip.fp-right {
+    right: 20px;
+}
+#fp-nav ul li .fp-tooltip.fp-left {
+    left: 20px;
+}
+.fp-auto-height.fp-section,
+.fp-auto-height .fp-slide,
+.fp-auto-height .fp-tableCell{
+    height: auto !important;
+}
+
+.fp-responsive .fp-auto-height-responsive.fp-section,
+.fp-responsive .fp-auto-height-responsive .fp-slide,
+.fp-responsive .fp-auto-height-responsive .fp-tableCell {
+    height: auto !important;
+}
+
+/*Only display content to screen readers*/
+.fp-sr-only{
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}

html/css/reset.css

@@ -0,0 +1,224 @@
+@charset "utf-8";
+@import url("font.css");
+/* v2.0 | 20110126
+  http://meyerweb.com/eric/tools/css/reset/
+  License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font-family:"Montserrat","score", 맑은고딕, Arial,sans-serif, Dotum, 돋움, "Apple SD Gothic Neo", arial;
+	font-style: normal;
+	vertical-align: baseline;
+}
+select, input, textarea, button{
+  font-family:"Montserrat","score", 맑은고딕, Arial,sans-serif, Dotum, 돋움, "Apple SD Gothic Neo", arial;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1.4;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q{
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+*, :after, :before {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+/*margin*/
+.m-0{margin:0px !important;}
+.m-10{margin:10px !important;}
+.m-20{margin:20px !important;}
+.m-30{margin:30px !important;}
+.m-40{margin:40px !important;}
+.m-50{margin:50px !important;}
+.m-60{margin:60px !important;}
+.m-70{margin:70px !important;}
+.m-80{margin:80px !important;}
+.m-90{margin:90px !important;}
+.m-100{margin:100px !important;}
+
+.mt-0{margin-top:0px !important;}
+.mt-10{margin-top:10px !important;}
+.mt-20{margin-top:20px !important;}
+.mt-30{margin-top:30px !important;}
+.mt-40{margin-top:40px !important;}
+.mt-50{margin-top:50px !important;}
+.mt-60{margin-top:60px !important;}
+.mt-70{margin-top:70px !important;}
+.mt-80{margin-top:80px !important;}
+.mt-90{margin-top:90px !important;}
+.mt-100{margin-top:100px !important;}
+
+.mb-0{margin-bottom:0px !important;}
+.mb-10{margin-bottom:10px !important;}
+.mb-20{margin-bottom:20px !important;}
+.mb-30{margin-bottom:30px !important;}
+.mb-40{margin-bottom:40px !important;}
+.mb-50{margin-bottom:50px !important;}
+.mb-60{margin-bottom:60px !important;}
+.mb-70{margin-bottom:70px !important;}
+.mb-80{margin-bottom:80px !important;}
+.mb-90{margin-bottom:90px !important;}
+.mb-100{margin-bottom:100px !important;}
+
+.ml-0{margin-left:0px !important;}
+.ml-10{margin-left:10px !important;}
+.ml-20{margin-left:20px !important;}
+.ml-30{margin-left:30px !important;}
+.ml-40{margin-left:40px !important;}
+.ml-50{margin-left:50px !important;}
+.ml-60{margin-left:60px !important;}
+.ml-70{margin-left:70px !important;}
+.ml-80{margin-left:80px !important;}
+.ml-90{margin-left:90px !important;}
+.ml-100{margin-left:10px !important;}
+
+.mr-0{margin-right:0px !important;}
+.mr-10{margin-right:10px !important;}
+.mr-20{margin-right:20px !important;}
+.mr-30{margin-right:30px !important;}
+.mr-40{margin-right:40px !important;}
+.mr-50{margin-right:50px !important;}
+.mr-60{margin-right:60px !important;}
+.mr-70{margin-right:70px !important;}
+.mr-80{margin-right:80px !important;}
+.mr-90{margin-right:90px !important;}
+.mr-100{margin-right:100px !important;}
+
+/*padding*/
+.p-0{padding:0px !important;}
+.p-10{padding:10px!important;}
+.p-20{padding:20px!important;}
+.p-30{padding:30px!important;}
+.p-40{padding:40px!important;}
+.p-50{padding:50px!important;}
+.p-60{padding:60px!important;}
+.p-70{padding:70px!important;}
+.p-80{padding:80px!important;}
+.p-90{padding:90px!important;}
+.p-100{padding:100px!important;}
+
+.pt-0{padding-top:0px !important;}
+.pt-10{padding-top:10px !important;}
+.pt-20{padding-top:20px !important;}
+.pt-30{padding-top:30px !important;}
+.pt-40{padding-top:40px !important;}
+.pt-50{padding-top:50px !important;}
+.pt-60{padding-top:60px !important;}
+.pt-70{padding-top:70px !important;}
+.pt-80{padding-top:80px !important;}
+.pt-90{padding-top:90px !important;}
+.pt-100{padding-top:100px !important;}
+
+.pb-0{padding-bottom:0px !important;}
+.pb-10{padding-bottom:10px !important;}
+.pb-20{padding-bottom:20px !important;}
+.pb-30{padding-bottom:30px !important;}
+.pb-40{padding-bottom:40px !important;}
+.pb-50{padding-bottom:50px !important;}
+.pb-60{padding-bottom:60px !important;}
+.pb-70{padding-bottom:70px !important;}
+.pb-80{padding-bottom:80px !important;}
+.pb-90{padding-bottom:90px !important;}
+.pb-100{padding-bottom:100px !important;}
+
+.pl-0{padding-left:0px !important;}
+.pl-10{padding-left:10px !important;}
+.pl-20{padding-left:20px !important;}
+.pl-30{padding-left:30px !important;}
+.pl-40{padding-left:40px !important;}
+.pl-50{padding-left:50px !important;}
+.pl-60{padding-left:60px !important;}
+.pl-70{padding-left:70px !important;}
+.pl-80{padding-left:80px !important;}
+.pl-90{padding-left:90px !important;}
+.pl-100{padding-left:120px !important;}
+
+.pr-0{padding-right:0px !important;}
+.pr-10{padding-right:10px !important;}
+.pr-20{padding-right:20px !important;}
+.pr-30{padding-right:30px !important;}
+.pr-40{padding-right:40px !important;}
+.pr-50{padding-right:50px !important;}
+.pr-60{padding-right:60px !important;}
+.pr-70{padding-right:70px !important;}
+.pr-80{padding-right:80px !important;}
+.pr-90{padding-right:90px !important;}
+.pr-100{padding-right:100px !important;}
+
+
+[class*=width_] {float:left;}
+.width_100 {width:100% !important;}
+.width_90 {width:90% !important;}
+.width_80 {width:80% !important;}
+.width_70 {width:70% !important;}
+.width_60 {width:60% !important;}
+.width_50 {width:50% !important;}
+.width_40 {width:40% !important;}
+.width_30 {width:30% !important;}
+.width_20 {width:20% !important;}
+.width_10 {width:10% !important;}
+
+.width_2n {width:50% !important;}
+.width_3n {width:33.333333333% !important;}
+.width_4n {width:25% !important;}
+.width_5n {width:20% !important;}
+.width_6n {width:16.6666666666666666667% !important;}
+.width_7n {width:14.2857142857143% !important;}
+.width_8n {width:12.5% !important;}
+.width_9n {width:11.111111111111111111111% !important;}
+.width_10n {width:10% !important;}
+
+
+a{color:#000;text-decoration:none;cursor: pointer;}
+img{vertical-align:middle;}
+/* .container{width:1280px;height:100%;margin:0px auto;} */
+
+
+/* select {
+font-family: inherit;
+background: url('../img/icon/arrow_bk.png') no-repeat 90% 50%;
+-webkit-appearance: none;
+-moz-appearance: none;
+appearance: none;
+}
+select::-ms-expand {
+    display: none;
+} */
+
+.on{display:block!important;}
+
+/* .list-txt > li {position: relative;padding-left: 14px;}
+.list-txt > li:before {content: "- ";display: inline-block;position: absolute;top: 0;left: 0;} */

html/css/swiper-bundle.css

@@ -0,0 +1,628 @@
+/**
+ * Swiper 8.1.4
+ * 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: April 24, 2022
+ */
+
+@font-face {
+  font-family: 'swiper-icons';
+  src: url('data:application/font-woff;charset=utf-8;base64, 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');
+  font-weight: 400;
+  font-style: normal;
+}
+:root {
+  --swiper-theme-color: #007aff;
+}
+.swiper {
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  /* Fix of Webkit flickering */
+  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;
+}
+/* Auto Height */
+.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;
+}
+/* 3D Effects */
+.swiper-3d,
+.swiper-3d.swiper-css-mode .swiper-wrapper {
+  perspective: 1200px;
+}
+.swiper-3d .swiper-wrapper,
+.swiper-3d .swiper-slide,
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-slide-shadow-bottom,
+.swiper-3d .swiper-cube-shadow {
+  transform-style: preserve-3d;
+}
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-slide-shadow-bottom {
+  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, 0.15);
+}
+.swiper-3d .swiper-slide-shadow-left {
+  background-image: linear-gradient(to left, rgba(0, 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, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-3d .swiper-slide-shadow-top {
+  background-image: linear-gradient(to top, rgba(0, 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, 0.5), rgba(0, 0, 0, 0));
+}
+/* CSS Mode */
+.swiper-css-mode > .swiper-wrapper {
+  overflow: auto;
+  scrollbar-width: none;
+  /* For Firefox */
+  -ms-overflow-style: none;
+  /* For Internet Explorer and Edge */
+}
+.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-navigation-color: var(--swiper-theme-color);
+  */
+}
+.swiper-button-prev,
+.swiper-button-next {
+  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-prev.swiper-button-disabled,
+.swiper-button-next.swiper-button-disabled {
+  opacity: 0.35;
+  cursor: auto;
+  pointer-events: none;
+}
+.swiper-button-prev:after,
+.swiper-button-next:after {
+  font-family: swiper-icons;
+  font-size: var(--swiper-navigation-size);
+  text-transform: none !important;
+  letter-spacing: 0;
+  text-transform: none;
+  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;
+}
+:root {
+  /*
+  --swiper-pagination-color: var(--swiper-theme-color);
+  --swiper-pagination-bullet-size: 8px;
+  --swiper-pagination-bullet-width: 8px;
+  --swiper-pagination-bullet-height: 8px;
+  --swiper-pagination-bullet-inactive-color: #000;
+  --swiper-pagination-bullet-inactive-opacity: 0.2;
+  --swiper-pagination-bullet-opacity: 1;
+  --swiper-pagination-bullet-horizontal-gap: 4px;
+  --swiper-pagination-bullet-vertical-gap: 6px;
+  */
+}
+.swiper-pagination {
+  position: absolute;
+  text-align: center;
+  transition: 300ms opacity;
+  transform: translate3d(0, 0, 0);
+  z-index: 10;
+}
+.swiper-pagination.swiper-pagination-hidden {
+  opacity: 0;
+}
+/* Common Styles */
+.swiper-pagination-fraction,
+.swiper-pagination-custom,
+.swiper-horizontal > .swiper-pagination-bullets,
+.swiper-pagination-bullets.swiper-pagination-horizontal {
+  bottom: 10px;
+  left: 0;
+  width: 100%;
+}
+/* Bullets */
+.swiper-pagination-bullets-dynamic {
+  overflow: hidden;
+  font-size: 0;
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transform: scale(0.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(0.66);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
+  transform: scale(0.33);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
+  transform: scale(0.66);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
+  transform: scale(0.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, 0.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-vertical > .swiper-pagination-bullets,
+.swiper-pagination-vertical.swiper-pagination-bullets {
+  right: 10px;
+  top: 50%;
+  transform: translate3d(0px, -50%, 0);
+}
+.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
+.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
+  display: block;
+}
+.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
+.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+}
+.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
+.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  display: inline-block;
+  transition: 200ms transform, 200ms 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: 200ms transform, 200ms left;
+}
+.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transition: 200ms transform, 200ms right;
+}
+/* Progress */
+.swiper-pagination-progressbar {
+  background: rgba(0, 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-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
+.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
+  width: 100%;
+  height: 4px;
+  left: 0;
+  top: 0;
+}
+.swiper-vertical > .swiper-pagination-progressbar,
+.swiper-pagination-progressbar.swiper-pagination-vertical,
+.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
+.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
+  width: 4px;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.swiper-pagination-lock {
+  display: none;
+}
+/* Scrollbar */
+.swiper-scrollbar {
+  border-radius: 10px;
+  position: relative;
+  -ms-touch-action: none;
+  background: rgba(0, 0, 0, 0.1);
+}
+.swiper-horizontal > .swiper-scrollbar {
+  position: absolute;
+  left: 1%;
+  bottom: 3px;
+  z-index: 50;
+  height: 5px;
+  width: 98%;
+}
+.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, 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 > img,
+.swiper-zoom-container > svg,
+.swiper-zoom-container > canvas {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+.swiper-slide-zoomed {
+  cursor: move;
+}
+/* Preloader */
+:root {
+  /*
+  --swiper-preloader-color: var(--swiper-theme-color);
+  */
+}
+.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:not(.swiper-watch-progress) .swiper-lazy-preloader,
+.swiper-watch-progress .swiper-slide-visible .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);
+  }
+}
+/* a11y */
+.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-prev,
+.swiper-cube .swiper-slide-next + .swiper-slide {
+  pointer-events: auto;
+  visibility: visible;
+}
+.swiper-cube .swiper-slide-shadow-top,
+.swiper-cube .swiper-slide-shadow-bottom,
+.swiper-cube .swiper-slide-shadow-left,
+.swiper-cube .swiper-slide-shadow-right {
+  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: 0.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-top,
+.swiper-flip .swiper-slide-shadow-bottom,
+.swiper-flip .swiper-slide-shadow-left,
+.swiper-flip .swiper-slide-shadow-right {
+  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;
+}

html/css/swiper.css

@@ -0,0 +1,531 @@
+/**
+ * Swiper 5.3.0
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * http://swiperjs.com
+ *
+ * Copyright 2014-2020 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: January 11, 2020
+ */
+
+@font-face {
+  font-family: 'swiper-icons';
+  src: url("data:application/font-woff;charset=utf-8;base64, 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") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+:root {
+  --swiper-theme-color: #007aff;
+}
+.swiper-container {
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  /* Fix of Webkit flickering */
+  z-index: 1;
+}
+.swiper-container-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-container-android .swiper-slide,
+.swiper-wrapper {
+  transform: translate3d(0px, 0, 0);
+}
+.swiper-container-multirow > .swiper-wrapper {
+  flex-wrap: wrap;
+}
+.swiper-container-multirow-column > .swiper-wrapper {
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+.swiper-container-free-mode > .swiper-wrapper {
+  transition-timing-function: ease-out;
+  margin: 0 auto;
+}
+.swiper-slide {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition-property: transform;
+}
+.swiper-slide-invisible-blank {
+  visibility: hidden;
+}
+/* Auto Height */
+.swiper-container-autoheight,
+.swiper-container-autoheight .swiper-slide {
+  height: auto;
+}
+.swiper-container-autoheight .swiper-wrapper {
+  align-items: flex-start;
+  transition-property: transform, height;
+}
+/* 3D Effects */
+.swiper-container-3d {
+  perspective: 1200px;
+}
+.swiper-container-3d .swiper-wrapper,
+.swiper-container-3d .swiper-slide,
+.swiper-container-3d .swiper-slide-shadow-left,
+.swiper-container-3d .swiper-slide-shadow-right,
+.swiper-container-3d .swiper-slide-shadow-top,
+.swiper-container-3d .swiper-slide-shadow-bottom,
+.swiper-container-3d .swiper-cube-shadow {
+  transform-style: preserve-3d;
+}
+.swiper-container-3d .swiper-slide-shadow-left,
+.swiper-container-3d .swiper-slide-shadow-right,
+.swiper-container-3d .swiper-slide-shadow-top,
+.swiper-container-3d .swiper-slide-shadow-bottom {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+}
+.swiper-container-3d .swiper-slide-shadow-left {
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-container-3d .swiper-slide-shadow-right {
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-container-3d .swiper-slide-shadow-top {
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-container-3d .swiper-slide-shadow-bottom {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+/* CSS Mode */
+.swiper-container-css-mode > .swiper-wrapper {
+  overflow: auto;
+  scrollbar-width: none;
+  /* For Firefox */
+  -ms-overflow-style: none;
+  /* For Internet Explorer and Edge */
+}
+.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
+  scroll-snap-align: start start;
+}
+.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
+  scroll-snap-type: x mandatory;
+}
+.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
+  scroll-snap-type: y mandatory;
+}
+:root {
+  --swiper-navigation-size: 44px;
+  /*
+  --swiper-navigation-color: var(--swiper-theme-color);
+  */
+}
+.swiper-button-prev,
+.swiper-button-next {
+  position: absolute;
+  top: 50%;
+  width: calc(var(--swiper-navigation-size) / 44 * 27);
+  height: var(--swiper-navigation-size);
+  margin-top: calc(-1 * 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-prev.swiper-button-disabled,
+.swiper-button-next.swiper-button-disabled {
+  opacity: 0.35;
+  cursor: auto;
+  pointer-events: none;
+}
+.swiper-button-prev:after,
+.swiper-button-next:after {
+  font-family: swiper-icons;
+  font-size: var(--swiper-navigation-size);
+  text-transform: none !important;
+  letter-spacing: 0;
+  text-transform: none;
+  font-variant: initial;
+}
+.swiper-button-prev,
+.swiper-container-rtl .swiper-button-next {
+  left: 10px;
+  right: auto;
+}
+.swiper-button-prev:after,
+.swiper-container-rtl .swiper-button-next:after {
+  content: 'prev';
+}
+.swiper-button-next,
+.swiper-container-rtl .swiper-button-prev {
+  right: 10px;
+  left: auto;
+}
+.swiper-button-next:after,
+.swiper-container-rtl .swiper-button-prev:after {
+  content: 'next';
+}
+.swiper-button-prev.swiper-button-white,
+.swiper-button-next.swiper-button-white {
+  --swiper-navigation-color: #ffffff;
+}
+.swiper-button-prev.swiper-button-black,
+.swiper-button-next.swiper-button-black {
+  --swiper-navigation-color: #000000;
+}
+.swiper-button-lock {
+  display: none;
+}
+:root {
+  /*
+  --swiper-pagination-color: var(--swiper-theme-color);
+  */
+}
+.swiper-pagination {
+  position: absolute;
+  text-align: center;
+  transition: 300ms opacity;
+  transform: translate3d(0, 0, 0);
+  z-index: 10;
+}
+.swiper-pagination.swiper-pagination-hidden {
+  opacity: 0;
+}
+/* Common Styles */
+.swiper-pagination-fraction,
+.swiper-pagination-custom,
+.swiper-container-horizontal > .swiper-pagination-bullets {
+  bottom: 10px;
+  left: 0;
+  width: 100%;
+}
+/* Bullets */
+.swiper-pagination-bullets-dynamic {
+  overflow: hidden;
+  font-size: 0;
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transform: scale(0.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(0.66);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
+  transform: scale(0.33);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
+  transform: scale(0.66);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
+  transform: scale(0.33);
+}
+.swiper-pagination-bullet {
+  width: 8px;
+  height: 8px;
+  display: inline-block;
+  border-radius: 100%;
+  background: #000;
+  opacity: 0.2;
+}
+button.swiper-pagination-bullet {
+  border: none;
+  margin: 0;
+  padding: 0;
+  box-shadow: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.swiper-pagination-clickable .swiper-pagination-bullet {
+  cursor: pointer;
+}
+.swiper-pagination-bullet-active {
+  opacity: 1;
+  background: var(--swiper-pagination-color, var(--swiper-theme-color));
+}
+.swiper-container-vertical > .swiper-pagination-bullets {
+  right: 10px;
+  top: 50%;
+  transform: translate3d(0px, -50%, 0);
+}
+.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: 6px 0;
+  display: block;
+}
+.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+}
+.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  display: inline-block;
+  transition: 200ms transform, 200ms top;
+}
+.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: 0 4px;
+}
+.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transition: 200ms transform, 200ms left;
+}
+.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transition: 200ms transform, 200ms right;
+}
+/* Progress */
+.swiper-pagination-progressbar {
+  background: rgba(0, 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-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  transform-origin: right top;
+}
+.swiper-container-horizontal > .swiper-pagination-progressbar,
+.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
+  width: 100%;
+  height: 4px;
+  left: 0;
+  top: 0;
+}
+.swiper-container-vertical > .swiper-pagination-progressbar,
+.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
+  width: 4px;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.swiper-pagination-white {
+  --swiper-pagination-color: #ffffff;
+}
+.swiper-pagination-black {
+  --swiper-pagination-color: #000000;
+}
+.swiper-pagination-lock {
+  display: none;
+}
+/* Scrollbar */
+.swiper-scrollbar {
+  border-radius: 10px;
+  position: relative;
+  -ms-touch-action: none;
+  background: rgba(0, 0, 0, 0.1);
+}
+.swiper-container-horizontal > .swiper-scrollbar {
+  position: absolute;
+  left: 1%;
+  bottom: 3px;
+  z-index: 50;
+  height: 5px;
+  width: 98%;
+}
+.swiper-container-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, 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 > img,
+.swiper-zoom-container > svg,
+.swiper-zoom-container > canvas {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+.swiper-slide-zoomed {
+  cursor: move;
+}
+/* Preloader */
+:root {
+  /*
+  --swiper-preloader-color: var(--swiper-theme-color);
+  */
+}
+.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%;
+  animation: swiper-preloader-spin 1s infinite linear;
+  box-sizing: border-box;
+  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
+  border-radius: 50%;
+  border-top-color: transparent;
+}
+.swiper-lazy-preloader-white {
+  --swiper-preloader-color: #fff;
+}
+.swiper-lazy-preloader-black {
+  --swiper-preloader-color: #000;
+}
+@keyframes swiper-preloader-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/* a11y */
+.swiper-container .swiper-notification {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  opacity: 0;
+  z-index: -1000;
+}
+.swiper-container-fade.swiper-container-free-mode .swiper-slide {
+  transition-timing-function: ease-out;
+}
+.swiper-container-fade .swiper-slide {
+  pointer-events: none;
+  transition-property: opacity;
+}
+.swiper-container-fade .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-container-fade .swiper-slide-active,
+.swiper-container-fade .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-container-cube {
+  overflow: visible;
+}
+.swiper-container-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-container-cube .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-container-cube.swiper-container-rtl .swiper-slide {
+  transform-origin: 100% 0;
+}
+.swiper-container-cube .swiper-slide-active,
+.swiper-container-cube .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-container-cube .swiper-slide-active,
+.swiper-container-cube .swiper-slide-next,
+.swiper-container-cube .swiper-slide-prev,
+.swiper-container-cube .swiper-slide-next + .swiper-slide {
+  pointer-events: auto;
+  visibility: visible;
+}
+.swiper-container-cube .swiper-slide-shadow-top,
+.swiper-container-cube .swiper-slide-shadow-bottom,
+.swiper-container-cube .swiper-slide-shadow-left,
+.swiper-container-cube .swiper-slide-shadow-right {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+.swiper-container-cube .swiper-cube-shadow {
+  position: absolute;
+  left: 0;
+  bottom: 0px;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: 0.6;
+  -webkit-filter: blur(50px);
+  filter: blur(50px);
+  z-index: 0;
+}
+.swiper-container-flip {
+  overflow: visible;
+}
+.swiper-container-flip .swiper-slide {
+  pointer-events: none;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  z-index: 1;
+}
+.swiper-container-flip .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-container-flip .swiper-slide-active,
+.swiper-container-flip .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-container-flip .swiper-slide-shadow-top,
+.swiper-container-flip .swiper-slide-shadow-bottom,
+.swiper-container-flip .swiper-slide-shadow-left,
+.swiper-container-flip .swiper-slide-shadow-right {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}

html/images/scroll_icon.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="50px" height="110px" viewBox="0 0 50 110" enable-background="new 0 0 50 110" xml:space="preserve">
+<g>
+	<g>
+		<path style="fill:rgba(255,255,255,0.5);" d="M25.115,73.628C11.266,73.628,0,62.363,0,48.513V25.115C0,11.266,11.266,0,25.115,0C38.965,0,50.23,11.266,50.23,25.115
+			v23.398C50.23,62.363,38.965,73.628,25.115,73.628z M25.115,2.543c-12.446,0-22.572,10.126-22.572,22.572v23.398
+			c0,12.446,10.126,22.572,22.572,22.572c12.446,0,22.572-10.126,22.572-22.572V25.115C47.688,12.669,37.562,2.543,25.115,2.543z"/>
+	</g>
+	<g>
+		<circle style="fill:rgba(255,255,255,0.5);" cx="25.115" cy="18.867" r="3.73"/>
+	</g>
+	<g>
+		<g>
+			<g>
+				<path style="fill:rgba(255,255,255,0.5);" d="M25.115,101.842c-0.283,0-0.566-0.095-0.8-0.283L12.34,91.871c-0.546-0.442-0.631-1.242-0.189-1.788
+					c0.441-0.545,1.243-0.63,1.789-0.189l11.175,9.042l11.177-9.042c0.545-0.44,1.348-0.355,1.788,0.189
+					c0.442,0.546,0.357,1.346-0.188,1.788l-11.977,9.688C25.682,101.748,25.398,101.842,25.115,101.842z"/>
+			</g>
+		</g>
+		<g>
+			<path style="fill:rgba(255,255,255,0.5);" d="M25.115,100.935c-0.703,0-1.271-0.569-1.271-1.272V48.73c0-0.703,0.568-1.271,1.271-1.271s1.271,0.569,1.271,1.271
+				v50.932C26.387,100.366,25.818,100.935,25.115,100.935z"/>
+		</g>
+	</g>
+	<g>
+		<path style="fill:rgba(255,255,255,0.5);" d="M25.115,43.49c-0.344,0-0.662-0.14-0.903-0.381c-0.242-0.23-0.369-0.561-0.369-0.891c0-0.331,0.139-0.661,0.369-0.903
+			c0.471-0.471,1.335-0.471,1.806,0c0.228,0.242,0.369,0.56,0.369,0.903c0,0.33-0.128,0.661-0.369,0.891
+			C25.776,43.35,25.458,43.49,25.115,43.49z"/>
+	</g>
+	<g>
+		<path style="fill:rgba(255,255,255,0.5);" d="M25.115,37.768c-0.344,0-0.662-0.127-0.903-0.369c-0.114-0.126-0.204-0.254-0.281-0.419
+			c-0.063-0.153-0.088-0.318-0.088-0.483s0.025-0.33,0.102-0.483c0.063-0.153,0.153-0.293,0.267-0.42
+			c0.126-0.114,0.254-0.204,0.42-0.267c0.229-0.102,0.483-0.126,0.724-0.077c0.089,0.014,0.166,0.039,0.242,0.077
+			c0.076,0.025,0.153,0.063,0.216,0.114c0.076,0.039,0.14,0.102,0.204,0.153c0.115,0.127,0.204,0.267,0.267,0.42
+			s0.102,0.318,0.102,0.483s-0.038,0.331-0.102,0.483c-0.063,0.165-0.152,0.293-0.267,0.419c-0.128,0.114-0.267,0.216-0.42,0.279
+			C25.445,37.743,25.28,37.768,25.115,37.768z"/>
+	</g>
+	<g>
+		<path style="fill:rgba(255,255,255,0.5);" d="M25.115,32.045c-0.344,0-0.662-0.127-0.903-0.369c-0.114-0.114-0.204-0.255-0.267-0.408
+			c-0.063-0.165-0.102-0.318-0.102-0.496c0-0.165,0.038-0.33,0.102-0.483s0.153-0.293,0.267-0.407
+			c0.126-0.126,0.267-0.216,0.42-0.279c0.229-0.102,0.483-0.127,0.724-0.077c0.089,0.014,0.166,0.039,0.242,0.077
+			c0.076,0.024,0.153,0.063,0.216,0.114c0.076,0.051,0.14,0.102,0.204,0.165c0.115,0.114,0.204,0.254,0.267,0.407
+			s0.102,0.318,0.102,0.483c0,0.178-0.038,0.331-0.102,0.496c-0.063,0.153-0.152,0.293-0.267,0.408
+			C25.776,31.918,25.458,32.045,25.115,32.045z"/>
+	</g>
+</g>
+</svg>

html/include/footer.html

@@ -0,0 +1,3 @@
+<div class="footer">
+  푸터123
+</div>

html/include/header.html

@@ -0,0 +1,81 @@
+ <script>
+  //헤드 풀다운메뉴
+  $(document).ready(function () {
+    $('#hd').on('mouseenter', function () {
+      $('#hd').css('background', 'rgb(255, 255, 255, 1)');
+      $('.gnb_2dul').stop().animate({ 'height': '220px' }, 250);
+      $('.gnb_1da').css('color', '#000');
+      $('.color_logo').css('display', 'block');
+      $('.wh_logo').css('display', 'none');
+    });
+
+    $('#hd').on('mouseleave', function () {
+      $('#hd').css('background', 'rgb(255, 255, 255, 0)');
+      $('.gnb_2dul').stop().animate({ 'height': '-100px' }, 250);
+      $('.gnb_1da').css('color', '#fff');
+      $('.wh_logo').css('display', 'block');
+      $('.color_logo').css('display', 'none');
+    });
+  });
+</script> 
+
+<div id="hd">
+  <h1 id="hd_h1">팔네트웍스</h1>
+
+  <div id="skip_to_container"><a href="#container">본문 바로가기</a></div>
+
+  <div id="hd_wrapper">
+
+    <div id="logo">
+      <a href="index.html">
+        <img src="../images/pal_logo_wh.png" class="wh_logo" style="display: block;">
+        <img src="../images/pal_logo.png" class="color_logo" style="display: none;">
+      </a>
+    </div>
+
+    <nav id="gnb">
+      <h2>메인메뉴</h2>
+      <div class="gnb_wrap">
+        <ul id="gnb_1dul">
+          <li class="gnb_1dli">
+            <a href="#none" target="_self" class="gnb_1da">회사소개</a>
+            <span class="bg">하위분류</span>
+            <ul class="gnb_2dul">
+              <li class="gnb_2dli"><a href="#none" target="_self" class="gnb_2da">기업정보</a></li>
+              <li class="gnb_2dli"><a href="#none" target="_self" class="gnb_2da">연혁</a></li>
+              <li class="gnb_2dli"><a href="#none" target="_self" class="gnb_2da">고객 및 협력사</a></li>
+              <li class="gnb_2dli"><a href="#none" target="_self" class="gnb_2da">New & Story</a></li>
+            </ul>
+          </li>
+          <li class="gnb_1dli">
+            <a href="#none" target="_self" class="gnb_1da">사업분야</a>
+            <span class="bg">하위분류</span>
+            <ul class="gnb_2dul">
+              <li class="gnb_2dli"><a href="#none" target="_self" class="gnb_2da">DRONE/PAV/UAM</a></li>
+              <li class="gnb_2dli"><a href="#none" target="_self" class="gnb_2da">항공사업</a></li>
+              <li class="gnb_2dli"><a href="#none" target="_self" class="gnb_2da">일반사업</a></li>
+              <li class="gnb_2dli"><a href="#none" target="_self" class="gnb_2da">구축사례</a></li>
+            </ul>
+          </li>
+          <li class="gnb_1dli">
+            <a href="#none" target="_self" class="gnb_1da">R&D</a>
+            <span class="bg">하위분류</span>
+            <ul class="gnb_2dul">
+              <li class="gnb_2dli"><a href="#none" target="_self" class="gnb_2da">연구 및 개발</a></li>
+            </ul>
+          </li>
+          <li class="gnb_1dli">
+            <a href="#none" target="_self" class="gnb_1da">고객센터</a>
+            <span class="bg">하위분류</span>
+            <ul class="gnb_2dul">
+              <li class="gnb_2dli"><a href="#none" target="_self" class="gnb_2da">찾아오시는 길</a></li>
+              <li class="gnb_2dli"><a href="#none" target="_self" class="gnb_2da">Contact US</a></li>
+              <li class="gnb_2dli"><a href="#none" target="_self" class="gnb_2da">채용정보</a></li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </nav>
+
+  </div>
+</div>

html/include/header_version02.html

@@ -0,0 +1,49 @@
+<div class="header-wrap">
+  <div class="logo">
+    <h1><a href="index.html"><img src="../images/pal_logo.png"></a></h1>
+  </div>
+  <div class="nav">
+    <ul>
+      <li>
+        <a href="#none">회사소개</a>
+        <ul class="submenu">
+          <li><a href="#none">서브메뉴1</a></li>
+          <li><a href="#none">서브메뉴2</a></li>
+          <li><a href="#none">서브메뉴3</a></li>
+        </ul>
+      </li>
+      <li>
+        <a href="#none">서비스</a>
+        <ul class="submenu">
+          <li><a href="#none">서브메뉴1</a></li>
+          <li><a href="#none">서브메뉴2</a></li>
+          <li><a href="#none">서브메뉴3</a></li>
+        </ul>
+      </li>
+      <li>
+        <a href="#none">R&D</a>
+        <ul class="submenu">
+          <li><a href="#none">서브메뉴1</a></li>
+          <li><a href="#none">서브메뉴2</a></li>
+          <li><a href="#none">서브메뉴3</a></li>
+        </ul>
+      </li>
+      <li>
+        <a href="#none">고객센터</a>
+        <ul class="submenu">
+          <li><a href="#none">서브메뉴1</a></li>
+          <li><a href="#none">서브메뉴2</a></li>
+          <li><a href="#none">서브메뉴3</a></li>
+        </ul>
+      </li>
+      <li>
+        <a href="#none">인재채용</a>
+        <ul class="submenu">
+          <li><a href="#none">서브메뉴1</a></li>
+          <li><a href="#none">서브메뉴2</a></li>
+          <li><a href="#none">서브메뉴3</a></li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</div>

html/index.html

@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="ko" xml:lang="ko">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ 
+ <!-- css -->
+<link rel="stylesheet" href="css/reset.css">
+<link rel="stylesheet" href="css/fullpage.css">
+<link rel="stylesheet" href="css/animate.css">
+<link rel="stylesheet" href="css/aos.css">
+<link rel="stylesheet" href="css/common.css">
+<link rel="stylesheet" href="css/swiper.css">
+<link rel="stylesheet" href="css/swiper.min.css">
+<link rel="stylesheet" href="css/swiper-bundle.css">
+
+ <!-- js -->
+<script src="js/jquery-3.6.0.min.js"></script>
+<script src="js/fullpage.js"></script>
+<script src="js/wow.min.js"></script>
+<script src="js/aos.js"></script>
+<script src="js/common.js"></script>
+<script src="js/swiper.js"></script>
+<script src="js/swiper.min.js"></script>
+<script src="js/swiper-bundle.js"></script>
+
+<title>jieun</title>
+
+
+</head>
+<script type="text/javascript">   
+
+    $(document).ready( function() {
+    
+      $("#header").load("include/header.html");
+      $("#footer").load("include/footer.html");
+      
+    });
+  </script>
+
+<body>
+<!--header-->
+<header id="header"></header>
+<!--//header-->
+
+<!--main-->
+<div id="container">
+  <div id="fullpage">
+    <div class="section main-bn bg01">
+      <canvas id="canvas" class="bg-canvas"></canvas>
+      <div class="inner">
+        <h2 class="wow fadeInDown" data-wow-duration="2s">가치를 존중하며 신뢰를 바탕으로 실천하는 기업</h2>
+        <span class="wow fadeInUp big" data-wow-duration="2s">PAL Networks</span>
+        <span class="wow fadeInUp sm" data-wow-duration="4s">항공·전문 IT산업분야의 소프트웨어 개발 전문 기업</span>   
+      </div>
+      <div class="wow fadeIn scroll-animation" data-wow-duration="8s">
+        <div class="scroll-box">
+          <span>SCROLL DOWN</span>
+          <span class="scroll-icon"><img src="images/scroll_icon.svg"></span>
+        </div>
+       </div>
+    </div>
+    <div class="section main-bn bg02">
+      <div class="inner">
+        <p class="txt-box wow fadeIn" data-wow-duration="2s">
+          <b>팔네트웍스</b> 는<br/>
+          <b>‘인천 항공 산업 선도기업’</b> 유망기업으로 선정된<br/>&ensp;항공 소프트웨어 전문 기업입니다.
+        </p>
+      </div>
+      <div class="wow fadeIn scroll-animation" data-wow-duration="8s">
+        <div class="scroll-box">
+          <span>SCROLL DOWN</span>
+          <span class="scroll-icon"><img src="images/scroll_icon.svg"></span>
+        </div>
+       </div>
+    </div>
+    <div class="section">3333</div>
+    <div class="section">Section 4</div>
+    <footer id="footer" class="section fp-auto-height"></footer>
+  </div>
+</div>
+<!--//main-->
+
+</body>
+
+</html>