修改了style.css、_index.scss与_public.scss，主要是index.html的页面设置

@@ -9,6 +9,100 @@
   padding-bottom: 10px;
 }
 
+.shop-box {
+  margin: 40px 10%;
+  width: 80%;
+}
+.shop-box .title {
+  font-size: 21px;
+  font-weight: bold;
+  margin-top: 20px;
+}
+.shop-box .point-box {
+  padding-bottom: 10px;
+  width: 100%;
+  float: left;
+  margin-top: 20px;
+}
+.shop-box .point-box .circle-img {
+  position: absolute;
+  display: inline-block;
+  right: 70px;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  margin: 0;
+  background-color: white;
+}
+.shop-box .point-box .circle-img i {
+  font-size: 30px;
+  position: absolute;
+  left: 15px;
+  padding: 0;
+  margin: 0;
+}
+.shop-box .point-box p {
+  display: inline-block;
+}
+.shop-box ul.options {
+  width: 100%;
+  padding: 0;
+  display: inline-block;
+  margin: 0;
+}
+.shop-box ul.options li {
+  display: block;
+  height: 50px;
+  list-style-type: none;
+  line-height: 50px;
+  position: relative;
+  padding-left: 40px;
+}
+.shop-box ul.options li.active:after {
+  content: '';
+  position: absolute;
+  border-radius: 80%;
+  z-index: 99;
+  width: 10px;
+  height: 10px;
+  top: 20px;
+  left: 20px;
+}
+.shop-box ul.options li:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  width: 100%;
+}
+.shop-box .bottom-box {
+  width: 100%;
+  position: relative;
+}
+.shop-box .bottom-box:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 0.5px;
+}
+.shop-box .bottom-box .bottom-body {
+  margin: 20px 0;
+  position: relative;
+  width: 100%;
+}
+.shop-box .bottom-box .bottom-body button {
+  width: 100%;
+  height: 50px;
+  margin: 15px 0 0;
+  border: none;
+  border-radius: 3px;
+}
+
 .font-bold {
   font-weight: bold;
 }
@@ -459,6 +553,100 @@
   padding-bottom: 10px;
 }
 
+.shop-box {
+  margin: 40px 10%;
+  width: 80%;
+}
+.shop-box .title {
+  font-size: 21px;
+  font-weight: bold;
+  margin-top: 20px;
+}
+.shop-box .point-box {
+  padding-bottom: 10px;
+  width: 100%;
+  float: left;
+  margin-top: 20px;
+}
+.shop-box .point-box .circle-img {
+  position: absolute;
+  display: inline-block;
+  right: 70px;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  margin: 0;
+  background-color: white;
+}
+.shop-box .point-box .circle-img i {
+  font-size: 30px;
+  position: absolute;
+  left: 15px;
+  padding: 0;
+  margin: 0;
+}
+.shop-box .point-box p {
+  display: inline-block;
+}
+.shop-box ul.options {
+  width: 100%;
+  padding: 0;
+  display: inline-block;
+  margin: 0;
+}
+.shop-box ul.options li {
+  display: block;
+  height: 50px;
+  list-style-type: none;
+  line-height: 50px;
+  position: relative;
+  padding-left: 40px;
+}
+.shop-box ul.options li.active:after {
+  content: '';
+  position: absolute;
+  border-radius: 80%;
+  z-index: 99;
+  width: 10px;
+  height: 10px;
+  top: 20px;
+  left: 20px;
+}
+.shop-box ul.options li:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  width: 100%;
+}
+.shop-box .bottom-box {
+  width: 100%;
+  position: relative;
+}
+.shop-box .bottom-box:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 0.5px;
+}
+.shop-box .bottom-box .bottom-body {
+  margin: 20px 0;
+  position: relative;
+  width: 100%;
+}
+.shop-box .bottom-box .bottom-body button {
+  width: 100%;
+  height: 50px;
+  margin: 15px 0 0;
+  border: none;
+  border-radius: 3px;
+}
+
 .font-bold {
   font-weight: bold;
 }
@@ -859,6 +1047,100 @@
   padding-bottom: 10px;
 }
 
+.shop-box {
+  margin: 40px 10%;
+  width: 80%;
+}
+.shop-box .title {
+  font-size: 21px;
+  font-weight: bold;
+  margin-top: 20px;
+}
+.shop-box .point-box {
+  padding-bottom: 10px;
+  width: 100%;
+  float: left;
+  margin-top: 20px;
+}
+.shop-box .point-box .circle-img {
+  position: absolute;
+  display: inline-block;
+  right: 70px;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  margin: 0;
+  background-color: white;
+}
+.shop-box .point-box .circle-img i {
+  font-size: 30px;
+  position: absolute;
+  left: 15px;
+  padding: 0;
+  margin: 0;
+}
+.shop-box .point-box p {
+  display: inline-block;
+}
+.shop-box ul.options {
+  width: 100%;
+  padding: 0;
+  display: inline-block;
+  margin: 0;
+}
+.shop-box ul.options li {
+  display: block;
+  height: 50px;
+  list-style-type: none;
+  line-height: 50px;
+  position: relative;
+  padding-left: 40px;
+}
+.shop-box ul.options li.active:after {
+  content: '';
+  position: absolute;
+  border-radius: 80%;
+  z-index: 99;
+  width: 10px;
+  height: 10px;
+  top: 20px;
+  left: 20px;
+}
+.shop-box ul.options li:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  width: 100%;
+}
+.shop-box .bottom-box {
+  width: 100%;
+  position: relative;
+}
+.shop-box .bottom-box:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 0.5px;
+}
+.shop-box .bottom-box .bottom-body {
+  margin: 20px 0;
+  position: relative;
+  width: 100%;
+}
+.shop-box .bottom-box .bottom-body button {
+  width: 100%;
+  height: 50px;
+  margin: 15px 0 0;
+  border: none;
+  border-radius: 3px;
+}
+
 .font-bold {
   font-weight: bold;
 }
@@ -1319,6 +1601,100 @@
   padding-bottom: 10px;
 }
 
+.shop-box {
+  margin: 40px 10%;
+  width: 80%;
+}
+.shop-box .title {
+  font-size: 21px;
+  font-weight: bold;
+  margin-top: 20px;
+}
+.shop-box .point-box {
+  padding-bottom: 10px;
+  width: 100%;
+  float: left;
+  margin-top: 20px;
+}
+.shop-box .point-box .circle-img {
+  position: absolute;
+  display: inline-block;
+  right: 70px;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  margin: 0;
+  background-color: white;
+}
+.shop-box .point-box .circle-img i {
+  font-size: 30px;
+  position: absolute;
+  left: 15px;
+  padding: 0;
+  margin: 0;
+}
+.shop-box .point-box p {
+  display: inline-block;
+}
+.shop-box ul.options {
+  width: 100%;
+  padding: 0;
+  display: inline-block;
+  margin: 0;
+}
+.shop-box ul.options li {
+  display: block;
+  height: 50px;
+  list-style-type: none;
+  line-height: 50px;
+  position: relative;
+  padding-left: 40px;
+}
+.shop-box ul.options li.active:after {
+  content: '';
+  position: absolute;
+  border-radius: 80%;
+  z-index: 99;
+  width: 10px;
+  height: 10px;
+  top: 20px;
+  left: 20px;
+}
+.shop-box ul.options li:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  width: 100%;
+}
+.shop-box .bottom-box {
+  width: 100%;
+  position: relative;
+}
+.shop-box .bottom-box:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 0.5px;
+}
+.shop-box .bottom-box .bottom-body {
+  margin: 20px 0;
+  position: relative;
+  width: 100%;
+}
+.shop-box .bottom-box .bottom-body button {
+  width: 100%;
+  height: 50px;
+  margin: 15px 0 0;
+  border: none;
+  border-radius: 3px;
+}
+
 .font-bold {
   font-weight: bold;
 }
@@ -1711,6 +2087,100 @@
   padding-bottom: 10px;
 }
 
+.shop-box {
+  margin: 40px 10%;
+  width: 80%;
+}
+.shop-box .title {
+  font-size: 21px;
+  font-weight: bold;
+  margin-top: 20px;
+}
+.shop-box .point-box {
+  padding-bottom: 10px;
+  width: 100%;
+  float: left;
+  margin-top: 20px;
+}
+.shop-box .point-box .circle-img {
+  position: absolute;
+  display: inline-block;
+  right: 70px;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  margin: 0;
+  background-color: white;
+}
+.shop-box .point-box .circle-img i {
+  font-size: 30px;
+  position: absolute;
+  left: 15px;
+  padding: 0;
+  margin: 0;
+}
+.shop-box .point-box p {
+  display: inline-block;
+}
+.shop-box ul.options {
+  width: 100%;
+  padding: 0;
+  display: inline-block;
+  margin: 0;
+}
+.shop-box ul.options li {
+  display: block;
+  height: 50px;
+  list-style-type: none;
+  line-height: 50px;
+  position: relative;
+  padding-left: 40px;
+}
+.shop-box ul.options li.active:after {
+  content: '';
+  position: absolute;
+  border-radius: 80%;
+  z-index: 99;
+  width: 10px;
+  height: 10px;
+  top: 20px;
+  left: 20px;
+}
+.shop-box ul.options li:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  width: 100%;
+}
+.shop-box .bottom-box {
+  width: 100%;
+  position: relative;
+}
+.shop-box .bottom-box:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 0.5px;
+}
+.shop-box .bottom-box .bottom-body {
+  margin: 20px 0;
+  position: relative;
+  width: 100%;
+}
+.shop-box .bottom-box .bottom-body button {
+  width: 100%;
+  height: 50px;
+  margin: 15px 0 0;
+  border: none;
+  border-radius: 3px;
+}
+
 .font-bold {
   font-weight: bold;
 }
@@ -2071,13 +2541,14 @@
     color: #7c7a7a;
   }
 }
+.page {
+  background-attachment: fixed;
+}
+
 .index-content {
   width: 100%;
   float: left;
 }
-.index-content .index-content-mar {
-  padding: 70px 15%;
-}
 .index-content h3 {
   letter-spacing: 1px;
 }
@@ -2200,79 +2671,371 @@
 }
 .index-content .index-content-2 {
   width: 100%;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
 }
 .index-content .index-content-2 .content-2-1 {
   background-color: #fffbfb;
   border: 0.5px solid #ffeeee;
 }
-.index-content .index-content-2 .content-2-1 .title {
-  font-size: 21px;
-  font-weight: bold;
-  margin-top: 20px;
+.index-content .index-content-2 .content-2-1 a {
+  color: orange;
+}
+.index-content .index-content-2 .content-2-1 .point-box .circle-img {
+  border: 1px solid orange;
+}
+.index-content .index-content-2 .content-2-1 .point-box .circle-img i {
+  left: 10px;
 }
-.index-content .index-content-2 .content-2-1 .title a {
+.index-content .index-content-2 .content-2-1 ul.options li {
+  color: rgba(255, 186, 146, 0.5);
+}
+.index-content .index-content-2 .content-2-1 ul.options li.active:after {
+  background-color: #ffba92;
+}
+.index-content .index-content-2 .content-2-1 ul.options li.active {
   color: orange;
 }
-.index-content .index-content-2 .content-2-1 .point-box {
-  padding-bottom: 20px;
-  width: 100%;
+.index-content .index-content-2 .content-2-1 ul.options li:before {
+  background-color: #ffdcce;
+}
+.index-content .index-content-2 .content-2-1 .bottom-box:before {
+  background-color: #ffdcce;
+}
+.index-content .index-content-2 .content-2-1 .bottom-box a {
+  color: rgba(255, 186, 146, 0.5);
+}
+.index-content .index-content-2 .content-2-1 .bottom-box button {
+  background-color: orange;
+  color: white;
+}
+.index-content .index-content-2 .content-2-2 {
+  background-color: #f2f9ff;
+  border: 0.5px solid #c5e4ff a;
+  border-color: #60c2ff;
+}
+.index-content .index-content-2 .content-2-2 .point-box .circle-img {
+  border: 1px solid #60c2ff;
+}
+.index-content .index-content-2 .content-2-2 .point-box .circle-img i {
+  left: 10px;
+  color: #60c2ff;
+}
+.index-content .index-content-2 .content-2-2 ul.options li {
+  color: #b5dcf3;
+}
+.index-content .index-content-2 .content-2-2 ul.options li.active:after {
+  background-color: #60c2ff;
+}
+.index-content .index-content-2 .content-2-2 ul.options li.active {
+  color: #60c2ff;
+}
+.index-content .index-content-2 .content-2-2 ul.options li:before {
+  background-color: #b5dcf3;
+}
+.index-content .index-content-2 .content-2-2 .bottom-box {
+  background-color: #e3f2ff;
+}
+.index-content .index-content-2 .content-2-2 .bottom-box:before {
+  background-color: #b5dcf3;
+}
+.index-content .index-content-2 .content-2-2 .bottom-box a {
+  color: #60c2ff;
+}
+.index-content .index-content-2 .content-2-2 .bottom-box button {
+  background-color: #60c2ff;
+  color: white;
+}
+.index-content .index-content-2 .content-2-3 {
+  background-color: #fbfffb;
+  border: 0.5px solid #e9ffe9;
+}
+.index-content .index-content-2 .content-2-3 a {
+  color: #77ac77;
+}
+.index-content .index-content-2 .content-2-3 .point-box .circle-img {
+  border: 1px solid #77ac77;
+}
+.index-content .index-content-2 .content-2-3 .point-box .circle-img i {
+  left: 10px;
+  color: #77ac77;
+}
+.index-content .index-content-2 .content-2-3 ul.options li {
+  color: #d5e7d5;
+}
+.index-content .index-content-2 .content-2-3 ul.options li.active:after {
+  background-color: #77ac77;
+}
+.index-content .index-content-2 .content-2-3 ul.options li.active {
+  color: #77ac77;
+}
+.index-content .index-content-2 .content-2-3 ul.options li:before {
+  background-color: #cfe7cf;
+}
+.index-content .index-content-2 .content-2-3 .bottom-box {
+  background-color: #d5e7d5;
+}
+.index-content .index-content-2 .content-2-3 .bottom-box:before {
+  background-color: #cfe7cf;
+}
+.index-content .index-content-2 .content-2-3 .bottom-box a {
+  color: #77ac77;
+}
+.index-content .index-content-2 .content-2-3 .bottom-box button {
+  background-color: #77ac77;
+  color: white;
+}
+.index-content .index-content-2 .content-2-4 {
+  background-color: #fff7fa;
+  border: 0.5px solid #ffe6ef;
+}
+.index-content .index-content-2 .content-2-4 a {
+  color: #cf3266;
+}
+.index-content .index-content-2 .content-2-4 .point-box .circle-img {
+  border: 1px solid #cf3266;
+}
+.index-content .index-content-2 .content-2-4 .point-box .circle-img i {
+  left: 15px;
+  color: #cf3266;
+}
+.index-content .index-content-2 .content-2-4 ul.options li {
+  color: #ec85a8;
+}
+.index-content .index-content-2 .content-2-4 ul.options li.active:after {
+  background-color: #cf3266;
+}
+.index-content .index-content-2 .content-2-4 ul.options li.active {
+  color: #cf3266;
+}
+.index-content .index-content-2 .content-2-4 ul.options li:before {
+  background-color: #f3d1dc;
+}
+.index-content .index-content-2 .content-2-4 .bottom-box {
+  background-color: #f3d1dc;
+}
+.index-content .index-content-2 .content-2-4 .bottom-box:before {
+  background-color: #cf3266;
+}
+.index-content .index-content-2 .content-2-4 .bottom-box a {
+  color: #cf3266;
+}
+.index-content .index-content-2 .content-2-4 .bottom-box button {
+  background-color: #cf3266;
+  color: white;
+}
+.index-content .index-content-3 .content-3-1 .content-box {
+  margin: 80px 0;
+  border: 1px solid silver;
+}
+.index-content .index-content-3 .content-3-1 .content-box p {
+  padding: 25px 20px 10px;
+  text-align: center;
+}
+.index-content .index-content-3 .content-3-1 .content-box button {
+  margin-bottom: 20px;
+  background-color: #cf3266;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  width: 100px;
+  height: 40px;
+  margin-left: 15px;
+}
+.index-content .index-content-4 {
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+.index-content .index-content-4 .content-4-1 {
+  margin: 0 0;
+  padding: 80px 0;
+}
+.index-content .index-content-4 .wrapper-3 #wrapper-3-1 .content-4-hover {
+  width: 300px;
+  height: 200px;
+  margin: 0 12%;
+  border-radius: 5px;
+}
+.index-content .index-content-4 .wrapper-3 #wrapper-3-1 .slick-dots li {
+  margin: 0;
+}
+.index-content .index-content-4 .wrapper-3 #wrapper-3-1 .slick-dots button:before {
+  font-size: 40px;
+}
+.index-content .index-content-5 .content-5-1 .pub_title {
+  margin-bottom: 30px;
+}
+.index-content .index-content-5 .content-5-1 .pub_title h3 {
+  font-size: 18px;
+}
+.index-content .index-content-5 .content-5-1 ul.content-5-icon {
+  text-align: center;
+  margin: 0 0 30px;
+  padding: 0;
+}
+.index-content .index-content-5 .content-5-1 ul.content-5-icon li {
+  list-style-type: none;
   float: left;
+  margin: 20px 90px;
+  width: 170px;
+  height: 150px;
+  position: relative;
+  background-color: rgba(156, 128, 166, 0.06);
 }
-.index-content .index-content-2 .content-2-1 .point-box .circle-img {
-  background-color: white;
+.index-content .index-content-5 .content-5-1 ul.content-5-icon li img {
   position: absolute;
-  display: inline-block;
-  right: 30px;
-  width: 60px;
-  height: 60px;
-  border: 0.5px solid orange;
-  border-radius: 50%;
+  text-align: center;
+  top: 55px;
+  left: 20px;
+  opacity: 0.5;
+}
+.index-content .index-content-5 .content-5-1 .content-5-p {
+  word-spacing: 1px;
+  color: #7c7a7a;
+  font-size: 15px;
+}
+.index-content .index-content-5 .content-5-1 ul.content-5-ul {
+  padding: 30px 0;
   margin: 0;
 }
-.index-content .index-content-2 .content-2-1 .point-box .circle-img i {
-  font-size: 30px;
-  position: absolute;
-  left: 10px;
+.index-content .index-content-5 .content-5-1 ul.content-5-ul li {
+  list-style-type: none;
+  padding: 20px 0;
+  float: left;
+  position: relative;
 }
-.index-content .index-content-2 .content-2-1 .point-box p {
+.index-content .index-content-5 .content-5-1 ul.content-5-ul li img {
+  width: 85px;
+  height: 85px;
+  border-radius: 50%;
+  margin: 0 25px 10px 0;
+  float: left;
+}
+.index-content .index-content-5 .content-5-1 ul.content-5-ul li span {
+  font-size: 12px;
+  color: #b1b1b1;
   display: inline-block;
+  margin-bottom: 10px;
 }
-.index-content .index-content-2 .content-2-1 ul {
-  float: left;
-  width: 100%;
-  padding: 0;
+.index-content .index-content-5 .content-5-1 ul.content-5-ul li .content-5-a a {
+  color: #7c7a7a;
+  word-spacing: 1px;
 }
-.index-content .index-content-2 .content-2-1 ul li {
-  display: block;
-  height: 50px;
-  list-style-type: none;
-  line-height: 50px;
+.index-content .index-content-5 .content-5-1 ul.content-5-ul li:nth-of-type(2)::before, .index-content .index-content-5 .content-5-1 ul.content-5-ul li:nth-of-type(3)::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 1px;
+  background-color: rgba(231, 231, 231, 0.8);
 }
 
 @media screen and (min-width: 768px) {
+  .index-page {
+    background-image: url("../img/band-2.jpg");
+    background-attachment: fixed;
+  }
+  .index-page .index-content {
+    background-color: white;
+    width: 70%;
+    margin: 30px 15%;
+  }
+
   .index-content .index-top-box {
     position: relative;
   }
-  .index-content .index-top-box .outside-nav .outside-nav-1 {
+  .index-content .index-top-box .outside-nav ul.outside-nav-1 {
     display: inline-block;
     position: absolute;
-    top: -50px;
+    bottom: 20px;
     right: 20%;
-    height: 20px;
+    z-index: 15;
   }
-  .index-content .index-top-box .outside-nav .outside-nav-1 li {
+  .index-content .index-top-box .outside-nav ul.outside-nav-1 li {
     background-color: #c93939;
     height: 20px;
-    height: 20px;
+    line-height: 20px;
   }
-  .index-content .index-top-box .outside-nav .outside-nav-1 li a {
+  .index-content .index-top-box .outside-nav ul.outside-nav-1 li a {
     color: beige;
     display: inline-block;
     border: none;
+    height: 30px;
   }
-  .index-content .index-top-box .outside-nav .outside-nav-1 li a:hover {
+  .index-content .index-top-box .outside-nav ul.outside-nav-1 li a:hover {
     color: #7c7a7a;
   }
+  .index-content .index-slick .wrapper-1 #wrapper-1-1 img {
+    height: 500px;
+  }
+  .index-content .index-slick .wrapper-2 #wrapper-2-1 .slick-slide {
+    position: relative;
+  }
+  .index-content .index-slick .wrapper-2 #wrapper-2-1 .slick-slide::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    height: 100%;
+    background-color: rgba(231, 231, 231, 0.8);
+  }
+  .index-content .index-slick .wrapper-2 #wrapper-2-1 .slick-prev {
+    left: 37%;
+  }
+  .index-content .index-slick .wrapper-2 #wrapper-2-1 .slick-next {
+    right: 35%;
+  }
+  .index-content .index-slick .wrapper-2 #wrapper-2-1 .slick-dots button::before {
+    width: 40px;
+    height: 40px;
+    font-size: 40px;
+    margin: 0;
+    padding: 0;
+  }
+  .index-content .index-content-2 {
+    padding: 0;
+  }
+  .index-content .index-content-2 .shop-box {
+    width: 88%;
+    margin: 40px 0 40px 20px;
+  }
+  .index-content .index-content-2 .shop-box .bottom-box a {
+    display: block;
+  }
+  .index-content .index-content-2 .shop-box .bottom-box button {
+    width: 260px;
+    display: inline-block;
+  }
+  .index-content .index-content-4 {
+    width: 100%;
+    height: 500px;
+  }
+  .index-content .index-content-4 .wrapper-3 #wrapper-3-1 {
+    padding: 80px 40px 0;
+  }
+  .index-content .index-content-4 .wrapper-3 #wrapper-3-1 .content-4-hover {
+    width: 300px;
+    height: 200px;
+    margin: 0;
+  }
+  .index-content .index-content-4 .wrapper-3 #wrapper-3-1 .content-4-hover a {
+    width: 200px;
+    height: 200px;
+  }
+  .index-content .index-content-4 .wrapper-3 #wrapper-3-1 .content-4-hover a:hover {
+    background-color: white;
+    opacity: 0.3;
+  }
+  .index-content .index-content-4 .wrapper-3 #wrapper-3-1 .slick-arrow {
+    visibility: hidden;
+  }
+  .index-content .index-content-5 .content-5-1 ul.content-5-icon li {
+    margin: 0 15px 0 0;
+  }
 }
 
 /*# sourceMappingURL=style.css.map */

 @import 'public';
+.page{
+  background-attachment: fixed;
+}
 .index-content{
   width: 100%;
   float: left;
-  .index-content-mar{
-    padding: 70px 15%;
-  }
   h3{
     letter-spacing: 1px;
   }
@@ -133,75 +133,333 @@
   }
   .index-content-2{
     width: 100%;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
     .content-2-1{
       background-color: rgb(255, 251, 251);
       border: 0.5px solid rgb(255, 238, 238);
-      .title{
-        font-size: 21px;
-        font-weight: bold;
-        margin-top: 20px;
+      a{
+        color: orange;
+      }
+      .point-box{
+        .circle-img{
+          border: 1px solid orange;
+          i{
+            left: 10px;
+          }
+        }
+      }
+      ul.options{
+        li{
+          color: $ora_s_color;
+          &.active:after{
+            background-color: rgb(255,186,146);
+          }
+          &.active{
+            color: orange;
+          }
+        }
+        li:before{
+          background-color: rgb(255, 220, 206);
+        }
+      }
+      .bottom-box{
+        &:before{
+          background-color: rgb(255, 220, 206);
+        }
         a{
-          color: orange;
+          color: $ora_s_color;
+        }
+        button{
+          background-color: orange;
+          color: white;
         }
       }
+    }
+    .content-2-2{
+      background-color: $blue_bg;
+      border: 0.5px solid $blue_bd
+      a{
+        color: $blue_d;
+      }
       .point-box{
-        padding-bottom: 20px;
-        width: 100%;
-        float: left;
         .circle-img{
-          background-color: white;
-          position: absolute;
-          display: inline-block;
-          right: 30px;
-          width: 60px;
-          height: 60px;
-          border: 0.5px solid orange;
-          border-radius: 50%;
-          margin: 0;
+          border: 1px solid $blue_d;
           i{
-            font-size: 30px;
-            position: absolute;
             left: 10px;
+            color: $blue_d;
+          }
+        }
+      }
+      ul.options{
+        li{
+          color: $blue_s;
+          &.active:after{
+            background-color: $blue_d;
+          }
+          &.active{
+            color: $blue_d;
           }
         }
+        li:before{
+          background-color: $blue_s;
+        }
+      }
+      .bottom-box{
+        background-color: $blue_line;
+        &:before{
+          background-color: $blue_s;
+        }
+        a{
+          color: $blue_d;
+        }
+        button{
+          background-color: $blue_d;
+          color: white;
+        }
+      }
+    }
+    .content-2-3{
+      background-color: $green_bg;
+      border: 0.5px solid $green_bd;
+      a{
+        color: $green_d;
+      }
+      .point-box{
+        .circle-img{
+          border: 1px solid $green_d;
+          i{
+            left: 10px;
+            color: $green_d;
+          }
+        }
+      }
+      ul.options{
+        li{
+          color: $green_line;
+          &.active:after{
+            background-color: $green_d;
+          }
+          &.active{
+            color: $green_d;
+          }
+        }
+        li:before{
+          background-color: $green_s;
+        }
+      }
+      .bottom-box{
+        background-color: $green_line;
+        &:before{
+          background-color: $green_s;
+        }
+        a{
+          color: $green_d;
+        }
+        button{
+          background-color: $green_d;
+          color: white;
+        }
+      }
+    }
+    .content-2-4{
+      background-color: $rose_bg;
+      border: 0.5px solid $rose_bd;
+      a{
+        color: $rose_d;
+      }
+      .point-box{
+        .circle-img{
+          border: 1px solid $rose_d;
+          i{
+            left: 15px;
+            color: $rose_d;
+          }
+        }
+      }
+      ul.options{
+        li{
+          color: $rose_line;
+          &.active:after{
+            background-color: $rose_d;
+          }
+          &.active{
+            color: $rose_d;
+          }
+        }
+        li:before{
+          background-color: $rose_s;
+        }
+      }
+      .bottom-box{
+        background-color: $rose_s;
+        &:before{
+          background-color: $rose_d;
+        }
+        a{
+          color: $rose_d;
+        }
+        button{
+          background-color: $rose_d;
+          color: white;
+        }
+      }
+    }
+  }
+  .index-content-3{
+    .content-3-1{
+      .content-box{
+        margin: 80px 0;
+        border: 1px solid silver;
         p{
-          display: inline-block;
+          padding: 25px 20px 10px;
+          text-align: center;
+        }
+        button{
+          margin-bottom: 20px;
+          background-color: $rose_d;
+          color: white;
+          border: none;
+          border-radius: 3px;
+          width: 100px;
+          height: 40px;
+          margin-left: 15px;
         }
       }
-      ul{
-        float: left;
-        width: 100%;
+    }
+  }
+  .index-content-4{
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    .content-4-1{
+      margin: 0 0;
+      padding: 80px 0;
+    }
+    .wrapper-3{
+      #wrapper-3-1{
+        .content-4-hover{
+          width: 300px;
+          height: 200px;
+          margin: 0 12%;
+          border-radius: 5px;
+        }
+        .slick-dots{
+          li{
+            margin: 0;
+          }
+        }
+        .slick-dots button:before{
+          font-size: 40px;
+        }
+      }
+    }
+  }
+  .index-content-5{
+    .content-5-1{
+      .pub_title{
+        margin-bottom: 30px;
+        h3{
+          font-size: 18px;
+        }
+      }
+      ul.content-5-icon{
+        text-align: center;
+        margin: 0 0 30px;
         padding: 0;
         li{
-          display: block;
-          height: 50px;
           list-style-type: none;
-          line-height: 50px;
+          float: left;
+          margin: 20px 90px;
+          width: 170px;
+          height: 150px;
+          position: relative;
+          background-color: $s_pur_color;
+          img{
+            position: absolute;
+            text-align: center;
+            top: 55px;
+            left: 20px;
+            opacity: 0.5;
+          }
+        }
+      }
+      .content-5-p{
+        word-spacing: 1px;
+        color: $font_s_opa;
+        font-size: 15px;
+      }
+      ul.content-5-ul{
+        padding: 30px 0;
+        margin: 0;
+        li{
+          list-style-type: none;
+          padding: 20px 0;
+          float: left;
+          position: relative;
+          img{
+            width: 85px;
+            height: 85px;
+            border-radius: 50%;
+            margin: 0 25px 10px 0;
+            float: left;
+          }
+          span{
+            font-size: 12px;
+            color: $font_d_opa;
+            display: inline-block;
+            margin-bottom: 10px;
+          }
+          .content-5-a{
+            a{
+              color: $font_s_opa;
+              word-spacing: 1px;
+            }
+          }
+        }
+        li:nth-of-type(2)::before,li:nth-of-type(3)::before{
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          width: 100%;
+          height: 1px;
+          background-color: $line_color;
         }
       }
     }
   }
 }
 
-@media screen and (min-width: 768px){
+@media screen and (min-width:768px){
+  .index-page{
+    background-image: url('../img/band-2.jpg');
+    background-attachment: fixed;
+    .index-content{
+      background-color: white;
+      width: 70%;
+      margin: 30px 15%;
+    }
+  }
   .index-content{
     .index-top-box{
       position: relative;
       .outside-nav{
-        .outside-nav-1{
+        ul.outside-nav-1{
           display: inline-block;
           position: absolute;
-          top: -50px;
+          bottom: 20px;
           right: 20%;
-          height: 20px;
+          z-index: 15;
           li{
             background-color: $base_color;
             height: 20px;
-            height: 20px;
+            line-height: 20px;
             a{
               color: beige;
               display: inline-block;
               border: none;
+              height: 30px;
               &:hover{
                 color: $font_s_opa;
               }
@@ -210,5 +468,94 @@
         }
       }
     }
+    .index-slick{
+      .wrapper-1{
+        #wrapper-1-1{
+          img{
+            height: 500px;
+          }
+        }
+      }
+      .wrapper-2{
+        #wrapper-2-1{
+          .slick-slide{
+            position: relative;
+          }
+          .slick-slide::after{
+            content: '';
+            position: absolute;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            width: 1px;
+            height: 100%;
+            background-color: $line_color;
+          }
+          .slick-prev{
+            left: 37%;
+          }
+          .slick-next{
+            right: 35%;
+          }
+          .slick-dots button::before{
+            width: 40px;
+            height: 40px;
+            font-size: 40px;
+            margin: 0;
+            padding: 0;
+          }
+        }
+      }
+    }
+    .index-content-2{
+      padding: 0;
+      .shop-box{
+        width: 88%;
+        margin: 40px 0 40px 20px;
+        .bottom-box{
+          a{
+            display: block;
+          }
+          button{
+            width: 260px;
+            display: inline-block;
+          }
+        }   
+      }
+    }
+    .index-content-4{
+      width: 100%;
+      height: 500px;
+      .wrapper-3{
+        #wrapper-3-1{
+          padding: 80px 40px 0;
+          .content-4-hover{     
+            width: 300px;
+            height: 200px;
+            margin: 0;
+            a{
+              width: 200px;
+              height: 200px;
+            }
+          }
+          .content-4-hover a:hover{
+            background-color: rgb(255,255,255);
+            opacity: 0.3;
+          }
+          .slick-arrow{
+            visibility: hidden;
+          }
+        }
+      }
+    }
+    .index-content-5{
+      .content-5-1{
+        ul.content-5-icon{
+          li{
+            margin: 0 15px 0 0;
+          }
+        }
+      }
+    }
   }
 }
\ No newline at end of file

@@ -9,6 +9,22 @@ $font_d_opa: rgb(177, 177, 177);
 $line_color: rgba(231, 231, 231, 0.8);
 $s_pur_color: rgba(156, 128, 166, 0.06);
 $d_pur_color: rgba(156, 128, 166, 0.1);
+$ora_s_color: rgba(255, 186, 146,0.5);
+$blue_d: rgb(96, 194, 255);
+$blue_s: rgb(181, 220, 243);
+$blue_line: rgb(227, 242, 255);
+$blue_bg: rgb(242, 249, 255);
+$blue_bd: rgb(197, 228, 255);
+$green_d: rgb(119, 172, 119);
+$green_s: rgb(207, 231, 207);
+$green_line: rgb(213, 231, 213);
+$green_bg: rgb(251, 255, 251);
+$green_bd: rgb(233, 255, 233);
+$rose_d: rgb(207, 50, 102);
+$rose_s: rgb(243, 209, 220);
+$rose_line: rgb(236, 133, 168);
+$rose_bg: rgb(255, 247, 250);
+$rose_bd: rgb(255, 230, 239);
 .pub_title{
   position: relative;
   h3{
@@ -21,6 +37,99 @@ $d_pur_color: rgba(156, 128, 166, 0.1);
     }
   }
 }
+.shop-box{
+  margin: 40px 10%;
+  width: 80%;
+  .title{
+    font-size: 21px;
+    font-weight: bold;
+    margin-top: 20px;
+  }
+  .point-box{
+    padding-bottom: 10px;
+    width: 100%;
+    float: left;
+    margin-top: 20px;
+    .circle-img{
+      position: absolute;
+      display: inline-block;
+      right: 70px;
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      margin: 0;
+      background-color: white;
+      i{
+        font-size: 30px;
+        position: absolute;
+        left: 15px;
+        padding: 0;
+        margin: 0;
+      }
+    }
+    p{
+      display: inline-block;
+    }
+  }
+  ul.options{
+    width: 100%;
+    padding: 0;
+    display: inline-block;
+    margin: 0;
+    li{
+      display: block;
+      height: 50px;
+      list-style-type: none;
+      line-height: 50px;
+      position: relative;
+      padding-left: 40px;
+      &.active:after{
+        content: '';
+        position: absolute;
+        border-radius: 80%;
+        z-index: 99;
+        width: 10px;
+        height: 10px;
+        top: 20px;
+        left: 20px;
+      }
+    }
+    li:before{
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      width: 100%;
+    }
+  }
+  .bottom-box{
+    width: 100%;
+    position: relative;
+    &:before{
+      content: '';
+      position: absolute;
+      top:0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: 0.5px;
+    }
+    .bottom-body{
+      margin: 20px 0;
+      position: relative;
+      width: 100%;
+      button{
+        width: 100%;
+        height: 50px;
+        margin: 15px 0 0;
+        border: none;
+        border-radius: 3px;
+      }
+    }
+  }
+}
 .font-bold{
   font-weight: bold;
 }