/**
 * http://keystation.cosmostation.io/
 * Since : 2019.08.22
 * Author : Lee Song-hyeon
 * Updated :2019.09.02
 */

/* web fonts */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500|Roboto&display=swap');

/* Custom
   ========================================================================== */

html {
   height: 100%;
}

body {
   min-width: 320px;
   height: 100%;
   line-height: 1.4;
   font-size: 14px;
   font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
   background-color: #151314;
   color: #fff;
}

.not-scroll {
   overflow: hidden;
}

p {
   word-break: keep-all;
}

textarea {
   outline: none;
   border: 1px solid transparent;
   resize: none;
}

/* float 해제 */
.clear:after {
   content: "";
   display: block;
   clear: both;
}

/* 긴 글 생략 */
.ellipsis {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

/* 팝업 백그라운드 */
.over-win {
   visibility: hidden;
   z-index: 1000;
   position: fixed;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.7);
}

.over-win.open {
   visibility: visible;
}

/* word break */
.word-break-all {
   word-break: break-all;
}

/* go
 ========================================================================== */
#app {
   position: relative;
   display: flex;
   justify-content: space-between;
   min-height: 100vh;
   color: #858585;
}

#app:before {
   content: "";
   display: block;
   position: absolute;
   top: 50px;
   left: 0;
   width: 100%;
   height: 1px;
   background-color: rgba(255, 255, 255, 0.15);
}


#app:after {
   content: url(../img/cosmos_img.svg);
   display: block;
   position: fixed;
   right: -20px;
   top: 20%;
   width: 40%;
   opacity: 0.15;
   background-size: cover;
}

#app>div {}

.side-left,
.side-right {
   position: relative;
   z-index: 1;
   width: 300px;
}

.side-left {}

.side-left:before {
   content: "";
   position: absolute;
   top: 0;
   left: 10%;
   width: 1px;
   height: 100%;
   background: rgba(255, 255, 255, 0.15);
}

.side-left>div {
   position: relative;
   height: 100%;
   text-align: center;
   padding-top: 32px;
}

.side-left h1 {
   position: absolute;
   width: 200px;
   top: 32px;
   left: 16%;
}

.side-left h1 img {
   width: 200px;
   padding: 0 5%;
   background: #151314;
}

/*
.side-left>div>img {
   position: absolute;
   left: 10%;
   top: 90px;
   height: calc(100% - 90px);
   margin-left: 20px;
   opacity: 0.2;
}
*/
.side-left>div>img {
   position: fixed;
   left: 3%;
   top: 0;
   height: 100%;
   opacity: 0.2;
}

.side-right {}

.side-right:before {
   content: "";
   position: absolute;
   top: 0;
   right: 10%;
   width: 1px;
   height: 100%;
   background: rgba(255, 255, 255, 0.15);
}

.side-right>button {
   position: absolute;
   right: 0;
   bottom: 0;
   width: 100%;
   padding: 30px 0;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid transparent;
   font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif;
   transition: 0.3s;
   color: #fff;
}

.side-right>button:hover {
   border-color: #fff;
   background: rgba(255, 255, 255, 0.2);
}

.footer-social-links {
   z-index: 2;
   position: absolute;
   bottom: 10px;
   right: 3%;
}

.footer-social-links>a {
   display: inline-block;
   width: 35px;
   height: 35px;
   line-height: 35px;
   border-radius: 50%;
   background-color: #252525;
   margin-left: 5px;
   font-size: 16px;
   transition: 0.5s;
   text-align: center;
}

.footer-social-links>a:hover {
   color: #fff;
}

.footer-social-links>em {
   display: block;
   margin-top: 10px;
   text-align: right;
}

/* .footer-social-links>em>a {
   text-decoration: underline;
}
.footer-social-links>em>a:hover{
   color: #fff;
} */

.main {
   position: relative;
   flex-grow: 1;
   padding: 144px 0px 200px;
}


.mian-title {
   text-align: center;
   margin-bottom: 80px;
   color: #fff;
   font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.mian-title>h2 {
   font-size: 46px;
   font-weight: 500;
   margin-bottom: 40px;
   letter-spacing: 2px;
}

.mian-title>span {
   font-size: 15px;
   color: #9c6cff;
}

.mian-title>p {
   margin-bottom: 30px;
   font-size: 24px;
}


.mian-title>a {
   overflow: hidden;
   display: inline-block;
   width: 200px;
   height: 45px;
   line-height: 45px;
   color: #05d2dd;
   border: 1px solid #05d2dd;
   font-size: 16px;
   text-align: left;
   padding: 0 20px;
   transition: 0.5s;
}

.mian-title>a>span {
   float: right;
}

.mian-title>a:hover {
   background-color: #05d2dd;
   color: #fff;
}


.main-content {
   width: 950px;
   margin: 0 auto;
}

.main-features-list {
   display: flex;
   justify-content: space-between;
   margin-bottom: 90px;
}

.main-features-list>li {
   flex-grow: 1;
   max-width: 280px;
}

.main-features-list>li>span {
   font-size: 46px;
   color: #9c6cff;
   line-height: 1;
   font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.main-features-list>li>h4 {
   margin-bottom: 2px;
   font-size: 24px;
   color: #fff;
   font-weight: 400;
   font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.main-features-list>li>p {
   line-height: 1.6;
}

.main-begin {
   display: flex;
   justify-content: space-between;
}

.main-begin-img {
   max-width: 280px;
   flex-grow: 1;
}

.main-begin-img>img {
   width: 268px;
}

.main-begin-txt {}

.main-begin-txt>h4 {
   margin-bottom: 14px;
   line-height: 1;
   font-size: 36px;
   font-weight: 400;
   color: #fff;
   font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.main-begin-txt>p {
   line-height: 1.6;
}









/* Media query
 ========================================================================== */

@media (max-width: 1000px) {

   .side-left,
   .side-right {
      width: 1px;
   }

   .side-left:before,
   .side-right:before {
      display: none;
   }

   .main {
      padding-left: 40px;
      padding-right: 40px;
   }

   .main-content {
      width: 100%;
   }

   .main-features-list>li {
      max-width: none;
      padding-right: 15px;
   }

   .main-begin {
      position: relative;
      padding-top: 60px;
   }

   .main-begin-txt>h4 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
   }

   .main-begin-img {
      padding-right: 15px;
   }

   .main-begin-img>img {
      max-width: none;
   }

   /* 
   
   */
}

@media (max-width: 850px) {}

@media (max-width: 700px) {
   .main-features-list {
      display: block;
   }

   .main-features-list>li {
      margin-bottom: 20px;
   }
   
   .main-begin{
      display: block;
   }

   .main-begin-txt>p{
      margin-top: 16px;
   }

   .main-begin-txt>h4::before {
      content: "";
      position: absolute;
      left: 2px;
      top: -10px;
      width: 50px;
      height: 3px;
      background-color: #9c6cff;
   }
}

@media (max-width: 670px) {
   .mian-title>h2 {
      font-size: 32px;
   }
}