diff --git a/index.html b/index.html
index 303cc91..d75fe78 100644
--- a/index.html
+++ b/index.html
@@ -48,7 +48,9 @@
         <div class="header-right">
             <div class="header-websize">
                 <ul>
+                    <li><div class="list-news"><a href="#news">News</a></div></li>
                     <li><div class="list-about"><a href="#about">About</a></div></li>
+                    <li><div class="list-works"><a href="#works">Works</a></div></li>
                     <li><div class="list-partners"><a href="#partners">Partners</a></div></li>
                     <li><div class="list-members"><a href="#members">Members</a></div></li>
                     <li><div class="list-contact"><a href="#contact">Contact</a></div></li>
@@ -64,13 +66,15 @@
                       </label>
                       <ul>
                         <li><a href="#top"><img src="img/Steg-logo-white.png" alt="Steg" class="header-menu-logo"></a></li>
+                        <li><div class="pl-tw"><a href="#news">News</a></div></li>
                         <li><div class="pl-tw"><a href="#about">About</a></div></li>
+                        <li><div class="pl-tw"><a href="#works">Works</a></div></li>
                         <li><div class="pl-tw"><a href="#partners">Partners</a></div></li>
                         <li><div class="pl-tw"><a href="#members">Members</a></div></li>
                         <li><div class="pl-tw"><a href="#contact">Contact</a></div></li>
                       </ul>
                     </div>
-                  </nav>
+                </nav>
             </div>
         </div>
     </header>
@@ -80,7 +84,23 @@
         <img src="img/Steg-logo.png" alt="Steg" class="top-wrapper-logo">
     </div>
 
+    <div id="news" class="news-wrapper">
+        <div class="wrapper-title news">News</div>
+        <div class="news-container">
+            <div class="news-contents">
+                <table class="news-table">
+                    <tr class="news-text" v-for="lastest in news">
+                        <td class="underline news-days">{{ lastest.newsDate }}</td>
+                        <td class="underline news-bar">-</td>
+                        <td class="underline">{{ lastest.newsContents }}</td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </div>
+
     <div id="about" class="about-wrapper">
+        <div class="triangle-top-g"></div>
         <div class="wrapper-title about">About</div>
         <div class="about-steg">Stegは、ITエンジニアリングなどを通して社会に挑戦をし、成長の過程を大切にする学生ITエンジニア団体です。</div>
         <div class="about-container">
@@ -108,6 +128,25 @@
         </div>
     </div>
 
+    <div id="works" class="works-wrapper">
+        <div class="triangle-top-w"></div>
+        <div class="wrapper-title works">Works</div>
+        <div class="works-container">
+            <div v-for="work in works">
+                <div class="works-cord">
+                    <a class="works-link" :href="work.worksImg.url">
+                        <img :src="work.worksImg.url" class="square" alt="イメージ画像">
+                    </a>
+                    <div class="works-cord-content">
+                        <p class="works-title">{{ work.worksTitle }}</p>
+                        <p class="works-content">{{ work.worksContents }}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    </div>
+
     <div id="partners" class="partners-wrapper">
         <div class="triangle-top-g"></div>
         <div class="wrapper-title partners">Partners</div>
@@ -178,7 +217,9 @@
             <div class="footer-left">
                 <ul>
                     <li><a href="#" title="Top">Top</a></li>
+                    <li><a href="#news" title="news">News</a></li>
                     <li><a href="#about" title="About">About</a></li>
+                    <li><a href="#works" title="Works">Works</a></li>
                     <li><a href="#partners" title="Partners">Partners</a></li>
                     <li><a href="#members" title="Members">Members</a></li>
                     <li><a href="#contact" title="Contact">Contact</a></li>
@@ -195,26 +236,6 @@
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
-    <script>
-	    new Vue({
-	        el: '#members',
-	        data:{
-	            members:[],
-            },
-            mounted() {
-                axios.get('https://steg.microcms.io/api/v1/members?limit=99',{
-                    headers: {
-                        'X-API-KEY': '15fcbc0e-ef8a-4e6f-8111-0811e534fe5d'
-                    }
-                })
-                .then(response => {
-                    this.members = response.data.contents
-                })
-                .catch(error => {
-                    console.log('error')
-                })
-            }
-        })
-    </script>
+    <script src="vue.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/responsive.css b/responsive.css
index f631f00..fcdc621 100644
--- a/responsive.css
+++ b/responsive.css
@@ -30,6 +30,10 @@
 }
 /*top-wrapper css end*/
 
+/*news-wrapper css start*/
+
+/*news-wrapper css end*/
+
 /*about-wrapper css start*/
 .about-img{
     height: 30vw;
@@ -37,6 +41,12 @@
 }
 /*about-wrapper css end*/
 
+/*works-wrapper css start */
+.works-content{
+  display: none;
+}
+/*works-wrapper css end */
+
 /*partners-wrapper css start*/
 .partners-logo{
     width: calc(180px + 1vw);
@@ -163,6 +173,9 @@
 
 /*top-wrapper css end*/
 
+/*news-wrapper css start*/
+/*news-wrapper css end*/
+
 /*about-wrapper css start*/
 .about-img{
     height: 40vw;
@@ -170,6 +183,26 @@
 }
 /*about-wrapper css end*/
 
+/*works-wrapper css start*/
+.works-title {
+  font-weight: 400;
+  padding-bottom: 1vh;
+  border-bottom: solid 2px rgb(32, 216, 186, 0.5);
+  position: relative;
+  width: 100%;
+  font-size: calc(8px + 0.8vw);
+}
+
+.works-title:after{
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: -2px;
+  width: 90%;
+  border-bottom: solid 2px #eeeeee;
+}
+/*works-wrapper css end*/
+
 /*partners-wrapper css start*/
 .triangle-top-g{     /*[all css] triangle-top*/
     border-top: 12vh solid #ffffff;
diff --git a/script.js b/script.js
index a543220..1e00ccd 100644
--- a/script.js
+++ b/script.js
@@ -1,40 +1,58 @@
 $(window).scroll(function(){
-    var top1 = $(".about").offset().top;
+    var top1 = $(".news").offset().top;
     var position1 = top1 - $(window).height();
-    var top2 = $(".partners").offset().top;
+    var top2 = $(".about").offset().top;
     var position2 = top2 - $(window).height();
-    var top3 = $(".members").offset().top;
+    var top3 = $(".works").offset().top;
     var position3 = top3 - $(window).height();
-    var top4 = $(".contact").offset().top;
+    var top4 = $(".partners").offset().top;
     var position4 = top4 - $(window).height();
-    
+    var top5 = $(".members").offset().top;
+    var position5 = top5 - $(window).height();
+    var top6 = $(".contact").offset().top;
+    var position6 = top6 - $(window).height();
+
     if($(window).scrollTop() > position1){
-        $('.list-about a').css('color', '#20d8ba');
+        $('.list-news a').css('color', '#20d8ba');
 
         $(".triangle").addClass("triangle-move");
         $(".header-logo").addClass("header-logo-move");
     }else{
-        $('.list-about a').css('color', '#404040');
+        $('.list-news a').css('color', '#404040');
 
         $(".triangle").removeClass("triangle-move");
         $(".header-logo").removeClass("header-logo-move");
     }
 
     if($(window).scrollTop() > position2){
+        $('.list-news a').css('color', '#404040');
+        $('.list-about a').css('color', '#20d8ba');
+    }else{
         $('.list-about a').css('color', '#404040');
+    }
+
+    if($(window).scrollTop() > position3){
+        $('.list-about a').css('color', '#404040');
+        $('.list-works a').css('color', '#20d8ba');
+    }else{
+        $('.list-works a').css('color', '#404040');
+    }
+
+    if($(window).scrollTop() > position4){
+        $('.list-works a').css('color', '#404040');
         $('.list-partners a').css('color', '#20d8ba');
     }else{
         $('.list-partners a').css('color', '#404040');
     }
 
-    if($(window).scrollTop() > position3){
+    if($(window).scrollTop() > position5){
         $('.list-partners a').css('color', '#404040');
         $('.list-members a').css('color', '#20d8ba');
     }else{
         $('.list-members a').css('color', '#404040');
     }
 
-    if($(window).scrollTop() > position4){
+    if($(window).scrollTop() > position6){
         $('.list-members a').css('color', '#404040');
         $('.list-contact a').css('color', '#20d8ba');
     }else{
diff --git a/style.css b/style.css
index a681141..04ebf09 100644
--- a/style.css
+++ b/style.css
@@ -223,28 +223,28 @@ select {
 /*index css end*/
 
 /*header css start*/
-header{
+header {
   height: 0;
   position: fixed;
   z-index: 100;
 }
 /*header-left start*/
-.header-left{
+.header-left {
   display: flex;
   justify-content: flex-start;
   position: relative;
   z-index: 101;
 }
-.triangle{
+.triangle {
   border-bottom: 220px solid transparent;
   border-left: 420px solid #ffffff;
-  opacity:0.9;
+  opacity: 0.9;
   position: absolute;
   top: -220px;
   left: 0;
   transition: top 1s;
 }
-.header-logo{
+.header-logo {
   width: 200px;
   height: 110px;
   position: absolute;
@@ -253,18 +253,18 @@ header{
   cursor: pointer;
   transition: top 0.5s;
 }
-.triangle-move{
+.triangle-move {
   top: 0;
   transition: top 1s;
 }
-.header-logo-move{
+.header-logo-move {
   top: 5px;
   transition: top 1.5s;
 }
 /*.header-left end*/
 
 /*.header-websize start*/
-.header-websize{
+.header-websize {
   position: fixed;
   top: 0;
   width: 100%;
@@ -272,7 +272,7 @@ header{
   list-style: none;
 }
 
-.header-websize ul{
+.header-websize ul {
   display: flex;
   justify-content: flex-end;
   list-style: none;
@@ -280,7 +280,7 @@ header{
   padding-right: 10px;
 }
 
-.header-websize ul li a{
+.header-websize ul li a {
   font-family: "Noto Sans JP";
   font-weight: 400;
   text-decoration: none;
@@ -291,11 +291,11 @@ header{
 /*.header-websize end*/
 
 /*header-responsive start*/
-.header-responsive{
+.header-responsive {
   display: none;
 }
 
-.header-menu-logo{
+.header-menu-logo {
   width: 120px;
   height: auto;
   cursor: pointer;
@@ -304,7 +304,7 @@ header{
 .menu-toggle {
   color: #404040;
   cursor: pointer;
-  font-size: 0.875rem; 
+  font-size: 0.875rem;
 }
 
 .menu-toggle-grippy {
@@ -324,7 +324,7 @@ header{
   height: 5px;
 }
 
-nav{
+nav {
   height: 0;
 }
 label {
@@ -352,18 +352,19 @@ label:focus {
   padding: 0;
 }
 
-.menu ul{
+.menu ul {
   margin: 16px 0;
   padding: 0;
 }
 
-.pl-tw{
+.pl-tw {
   padding-left: 20px;
 }
-.menu ul li a, .menu ul li label {
+.menu ul li a,
+.menu ul li label {
   display: block;
   text-align: left;
-  padding-left:40px;
+  padding-left: 40px;
   line-height: 60px;
   text-decoration: none;
   color: #999;
@@ -372,10 +373,11 @@ label:focus {
   font-family: "Noto Sans JP";
   font-weight: 400;
 }
-.menu ul li{
+.menu ul li {
   list-style: none;
 }
-.menu ul li a:hover, .menu ul li label:hover {
+.menu ul li a:hover,
+.menu ul li label:hover {
   color: #fff;
 }
 /* hide inputs */
@@ -387,7 +389,7 @@ label:focus {
   background: none;
 }
 /* fade in checked menu */
-.menu-checkbox:checked + .menu{
+.menu-checkbox:checked + .menu {
   transform: translate3d(0, 0, 0);
 }
 /*nav end*/
@@ -403,91 +405,136 @@ label:focus {
   background-size: cover;
   text-align: center;
   display: flex;
-  flex-direction : column;
-  justify-content:center;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
   background-attachment: fixed;
 }
 
-.tagline{
+.tagline {
   font-family: "Noto Sans JP";
   font-size: 2.5vw;
 }
 
-.top-wrapper-logo{
+.top-wrapper-logo {
   width: 36vw;
   height: auto;
 }
 /*top-wrapper css end*/
 
-/*about-wrapper css start*/
-.wrapper-title{       /*[all css] wrapper-title*/
+/*news-wrapper css start*/
+.wrapper-title {
+  /*[all css] wrapper-title*/
   width: 5em;
   height: 1.1em;
   font-family: "Noto Sans JP";
   font-size: calc(20px + 2vw);
   font-weight: 700;
   color: #404040;
-  border-bottom: 0.2em solid rgb(32,216,186,0.5);
+  border-bottom: 0.2em solid rgb(32, 216, 186, 0.5);
   margin-left: 10%;
 }
 
-.about-wrapper{
+.news-wrapper {
   padding-top: calc(16vw - 4vh);
   padding-bottom: calc(8vw - 2vh);
+  overflow: hidden;
+}
+
+.news-container{
+  padding: 0.5em 1.5em 2em 1.5em;
+  margin: 2em 0;
+  color: #404040;
+  background-color: #fff;
+  border: solid 2px #cccccc;
+  border-radius: 10px;
+  margin: 4em 10%;
+}
+
+.news-table{
+  border-spacing: 0 15px;
+  border-collapse: separate;
+  width: 100%;
+}
+
+.news-text{
+  height: 2em;
+  font-size: calc(10px + 0.8vw);
+}
+
+.underline{
+  border-bottom: 2px solid #eeeeee;
+}
+
+.news-days{
+  border-bottom: solid 2px rgb(32, 216, 186, 0.5);
+  text-align: center;
+  width: 5%;
+}
+
+.news-bar{
+  padding: 0 10px;
+  text-align: center;
+}
+/*news-wrapper css end*/
+
+/*about-wrapper css start*/
+.about-wrapper {
+  padding-bottom: calc(8vw - 2vh);
+  background: #eeeeee;
+  overflow: hidden;
 }
 
-.about-steg{
+.about-steg {
   font-family: "Noto Sans JP";
   font-size: calc(10px + 0.8vw);
   font-weight: 400;
   color: #404040;
   padding: 4em 10%;
   display: flex;
-  justify-content:center;
-
+  justify-content: center;
 }
 
-.about-contents{
+.about-contents {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.about-img{
+.about-img {
   height: 25vw;
   width: 25vw;
   border-radius: 50%;
   object-fit: cover;
 }
 
-.about-label{
+.about-label {
   width: 50%;
 }
 
-.about-title-long{
+.about-title-long {
   width: 9.5em;
   height: 1.2em;
   font-family: "Noto Sans JP";
   font-size: calc(12px + 1vw);
   font-weight: 400;
   color: #404040;
-  border-bottom: 3px solid rgb(32,216,186,0.5);
+  border-bottom: 3px solid rgb(32, 216, 186, 0.5);
   margin: 1em 10%;
 }
 
-.about-title-short{
+.about-title-short {
   width: 5em;
   height: 1.2em;
   font-family: "Noto Sans JP";
   font-size: calc(12px + 1vw);
   font-weight: 400;
   color: #404040;
-  border-bottom: 3px solid rgb(32,216,186,0.5);
+  border-bottom: 3px solid rgb(32, 216, 186, 0.5);
   margin: 1em 10%;
 }
 
-.about-text{
+.about-text {
   font-family: "Noto Sans JP";
   font-size: calc(10px + 0.8vw);
   font-weight: 400;
@@ -496,42 +543,103 @@ label:focus {
 }
 /*about-wrapper css end*/
 
+/*works-wrapper css start */
+.works-container {
+  padding: 10vw 0;
+}
+
+.works-cord {
+  margin: 0 10vw 7vw 10vw;
+  display: flex;
+  justify-content: center;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  height: 18vw;
+}
+
+.works-link{
+  display: inline-block;
+  width: 60%;
+  text-align: center;
+}
+
+.square {
+  width: auto;
+  height: 18vw;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  object-fit: cover;
+}
+
+.works-cord-content {
+  margin: 2vw 4vw;
+  overflow-y: auto;
+  width: 100%;
+}
+
+.works-title {
+  font-weight: 400;
+  padding-bottom: 1vh;
+  border-bottom: solid 4px rgb(32, 216, 186, 0.5);
+  position: relative;
+  width: 100%;
+  font-size: calc(12px + 1vw);
+}
+
+.works-title:after{
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: -4px;
+  width: 90%;
+  border-bottom: solid 4px #eeeeee;
+}
+
+.works-content {
+  margin: 1.5vh 0;
+  font-size: calc(10px + 0.8vw);
+  color: #888888;
+}
+/*works-wrapper css end*/
+
 /*partners-wrapper css start*/
-.partners-wrapper{
+.partners-wrapper {
   background: #eeeeee;
   overflow-x: hidden;
 }
 
-.triangle-top-g{     /*[all css] triangle-top*/
+.triangle-top-g {
+  /*[all css] triangle-top*/
   border-top: 18vh solid #ffffff;
   border-left: 100vw solid transparent;
 }
 
-.triangle-top-w{     /*[all css] triangle-top*/
+.triangle-top-w {
+  /*[all css] triangle-top*/
   border-top: 18vh solid #eeeeee;
   border-left: 100vw solid transparent;
 }
 
-.partners-container{
+.partners-container {
   padding: 10vh 0;
 }
 
-.partners-contents{
+.partners-contents {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.partners-logo{
+.partners-logo {
   width: 20vw;
   height: auto;
 }
 
-.partners-label{
+.partners-label {
   width: 50%;
 }
 
-.partners-name{
+.partners-name {
   font-family: "Noto Sans JP";
   font-size: calc(12px + 1vw);
   font-weight: 400;
@@ -539,7 +647,7 @@ label:focus {
   margin: 1em 10%;
 }
 
-.partners-description{
+.partners-description {
   font-family: "Noto Sans JP";
   font-size: calc(10px + 0.8vw);
   font-weight: 400;
@@ -549,12 +657,12 @@ label:focus {
 /*partners-wrapper css end*/
 
 /*members-wrapper css start*/
-.members-wrapper{
+.members-wrapper {
   padding-bottom: calc(12vw - 3vh);
   overflow-x: hidden;
 }
 
-.members-container{
+.members-container {
   padding-top: 6vw;
   display: flex;
   justify-content: center;
@@ -562,7 +670,7 @@ label:focus {
   flex-wrap: wrap;
 }
 
-.members-contents{
+.members-contents {
   display: flex;
   flex-direction: column;
   position: relative;
@@ -571,7 +679,7 @@ label:focus {
   margin: 5vw;
 }
 
-.circle {	
+.circle {
   width: calc(80px + 5vw);
   height: calc(80px + 5vw);
   border-radius: 50%;
@@ -579,38 +687,38 @@ label:focus {
   cursor: pointer;
 }
 
-.members-text{
+.members-text {
   position: absolute;
   top: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  width : calc(80px + 5vw);
+  width: calc(80px + 5vw);
   height: calc(80px + 5vw);
   font-family: "Noto Sans JP";
   font-weight: 400;
   font-size: calc(10px + 0.5vw);
-  color: rgb(0,0,0,0);
+  color: rgb(0, 0, 0, 0);
   cursor: pointer;
 }
 
-.img-shadow{
+.img-shadow {
   width: calc(80px + 5vw);
   height: calc(80px + 5vw);
   border-radius: 50%;
 }
 
-.members-contents:hover .circle{
+.members-contents:hover .circle {
   position: absolute;
   z-index: -1;
 }
 
-.members-contents:hover .img-shadow{
-  box-shadow: 0 0 100px 100px rgb(0,0,0,0.5) inset;
+.members-contents:hover .img-shadow {
+  box-shadow: 0 0 100px 100px rgb(0, 0, 0, 0.5) inset;
 }
 
-.members-contents:hover .members-text{
+.members-contents:hover .members-text {
   color: #ffffff;
 }
 
@@ -620,24 +728,24 @@ label:focus {
 /*members-wrapper css end*/
 
 /*contact-wrapper css start*/
-.contact-wrapper{
+.contact-wrapper {
   background: #eeeeee;
   overflow: hidden;
 }
 
-.contact-container{
+.contact-container {
   padding-top: 10vh;
   padding-bottom: 10vh;
 }
 
-.contact-container form{
+.contact-container form {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 
-.form-contents input{
+.form-contents input {
   font-family: "Noto Sans JP";
   font-weight: 400;
   font-size: 15px;
@@ -646,7 +754,7 @@ label:focus {
   margin: 10px;
 }
 
-.form-contents textarea{
+.form-contents textarea {
   font-family: "Noto Sans JP";
   font-weight: 400;
   font-size: 15px;
@@ -656,7 +764,7 @@ label:focus {
   resize: none;
 }
 
-.form-button{
+.form-button {
   width: 10em;
   height: 2.5em;
   text-align: center;
@@ -668,31 +776,31 @@ label:focus {
   font-weight: 400;
   font-size: 15px;
   border-radius: 4px;
-  transition: .4s;
+  transition: 0.4s;
 }
 
-.form-button:hover{
+.form-button:hover {
   background-color: #20d8ba;
   border-color: #189f88;
-  color: #FFF;
+  color: #fff;
 }
 /*contact-wrapper css end*/
 
 /*footer css start*/
 
-footer{
+footer {
   background: #404040;
 }
 
-.footer-container{
+.footer-container {
   display: flex;
   justify-content: space-between;
 }
 
-.footer-left ul{
+.footer-left ul {
   list-style: none;
 }
-.footer-left ul li a{
+.footer-left ul li a {
   font-family: "Noto Sans JP";
   font-weight: 400;
   font-size: calc(10px + 0.5vw);
@@ -700,28 +808,27 @@ footer{
   color: #ffffff;
 }
 
-.footer-left{
+.footer-left {
   padding: 3vw 4vw;
 }
 
-.footer-right{
+.footer-right {
   padding: 3vw 4vw;
   display: flex;
   justify-content: end;
 }
 
-.twitter-icon{
+.twitter-icon {
   width: 50px;
   height: 50px;
 }
 
-.copyright{
+.copyright {
   font-family: "Noto Sans JP";
   font-weight: 400;
   font-size: calc(6px + 0.5vw);
   text-align: center;
   color: #ffffff;
   padding: 20px;
-
 }
-/*footer css end*/
\ No newline at end of file
+/*footer css end*/
diff --git a/vue.js b/vue.js
new file mode 100644
index 0000000..c561de9
--- /dev/null
+++ b/vue.js
@@ -0,0 +1,57 @@
+new Vue({
+  el: '#members',
+  data:{
+      members:[],
+    },
+    mounted() {
+        axios.get('https://steg.microcms.io/api/v1/members?limit=99',{
+            headers: {
+                'X-API-KEY': '15fcbc0e-ef8a-4e6f-8111-0811e534fe5d'
+            }
+        })
+        .then(response => {
+            this.members = response.data.contents
+        })
+        .catch(error => {
+            console.log('error')
+        })
+    }
+}),
+new Vue({
+    el: '#works',
+    data: {
+        works: []
+    },
+    mounted() {
+        axios.get('https://steg.microcms.io/api/v1/works?limit=10', {
+            headers: {
+                'X-API-KEY': '15fcbc0e-ef8a-4e6f-8111-0811e534fe5d'
+            }
+        })
+        .then(response => {
+            this.works = response.data.contents
+        })
+        .catch(error => {
+            console.log('error')
+        })
+    }
+}),
+new Vue({
+    el: '#news',
+    data: {
+        news: []
+    },
+    mounted() {
+        axios.get('https://steg.microcms.io/api/v1/news?limit=10', {
+            headers: {
+                'X-API-KEY': '15fcbc0e-ef8a-4e6f-8111-0811e534fe5d'
+            }
+        })
+        .then(response => {
+            this.news = response.data.contents
+        })
+        .catch(error => {
+            console.log('error')
+        })
+    }
+})
\ No newline at end of file