/* Global */
 
 :root {
     /* Color */
     --color-white: #ffffff;
     --color-light-white: #eeeeee;
     --color-dark-white: #bdbdbd;
     --color-dark-grey: #1e272e;
     --color-grey: #8a8a8a;
     --color-light-grey: #d8d8d8;
     --color-mint: #34e7e4;
     --color-black: #0a0a0a;
     /* Font size */
     --font-large: 48px;
     --font-medium: 28px;
     --font-regular: 18px;
     --font-small: 16px;
     --font-micro: 14px;
     /* Font weight */
     --weight-bold: 700;
     --weight-semi-bold: 600;
     --weight-regular: 400;
     /*Size*/
     --size-border-radius: 4px;
     /*Animation*/
     --Animation-duration: 300ms;
     /*Universal tags*/
 }
 
 * {
     box-sizing: border-box;
 }
 
 body {
     margin: 0px;
     font-family: 'Roboto', sans-serif;
     cursor: default;
 }
 
 a {
     text-decoration: none;
     color: var(--color-white);
 }
 
 button {
     background-color: transparent;
     cursor: pointer;
     border: none;
     outline: none;
 }
 
 body {
     margin: 0px;
     font-family: 'Oswald', sans-serif;
     cursor: default;
 }
 
 a {
     text-decoration: none;
 }
 
 ul {
     list-style-type: none;
 }
 
 button {
     background-color: transparent;
     cursor: pointer;
     border: none;
     outline: none;
 }
 
 li {
     margin-bottom: 8px;
 }
 /* Typography */
 
 h1 {
     color: var(--color-white);
     font-size: var(--font-large);
     font-weight: var(--weight-regular);
 }
 
 h2 {
     font-size: var(--font-medium);
     font-weight: var(--weight-regular);
     color: var(--color-black);
 }
 
 h3 {
     color: var(--color-black);
     font-size: var(--font-small);
     font-weight: var(--weight-regular);
     margin: 8px 0;
 }
 
 h4 {
     font-size: 12px;
     font-weight: var(--weight-regular);
     margin: 0px;
 }
 
 p {
     font-size: var(--font-micro);
     font-weight: var(--weight-regular);
     color: var(--color-black);
     margin: 8px 0;
 }
 /* Section Common */
 
 section {
     padding: 60px 104px;
     margin: auto;
 }
 
 .section__container {
     max-width: 1200px;
 }
 /*Navbar*/
 
 #navbar {
     position: fixed;
     width: 100%;
     padding: 0px 40px;
     background-color: var(--color-black);
     display: flex;
     align-items: center;
     justify-content: space-between;
     color: white;
     z-index: 1;
     font-family: 'Oswald', sans-serif;
     border-bottom: 1px solid var(--color-dark-grey);
 }
 
 .menu__list {
     display: flex;
 }
 
 .navbar__menu__item {
     min-width: 75px;
     text-align: center;
     padding: 8px;
     margin: 0px;
     cursor: pointer;
     font-size: var(--font-micro);
 }
 
 .navbar__toggle-btn {
     position: absolute;
     right: 32px;
     top: 16px;
     font-size: 24px;
     color: var(--color-white);
     display: none;
 }
 
 .navbar__menu__item:hover {
     color: var(--color-mint);
 }
 
 .logo {
     width: 160px;
     position: relative;
     top: 4px;
 }
 /* Main */
 
 #main {
     background: url('./img/main/solution.png') center/cover no-repeat;
     text-align: center;
     padding: 160px 104px 30px 104px;
     color: var(--color-white);
 }
 
 #main .main--scroll {
     display: none;
 }
 
 .main__title {
     font-size: 60px;
     margin: 8px 0px;
 }
 
 .main__description {
     margin: 16px 0px 100px 0px;
     color: white;
     font-weight: lighter;
     font-size: 30px;
 }
 
 .main__category {
     max-width: 1000px;
     margin: auto;
 }
 
 .category__btn {
     color: var(--color-white);
     font-weight: var(--font-regular);
     cursor: pointer;
     padding-top: 20px;
     width: 160px;
 }
 
 .category__btn a:hover {
     color: var(--color-mint)
 }
 
 .category__item {
     padding: 8px 16px;
     font-weight: var(--weight-regular);
 }
 /*title*/
 
 .index__title {
     font-family: 'Oswald', sans-serif;
     margin: 0px;
 }
 
 .index__title_kor {
     margin: 0px;
 }
 
 #platform04 {
     background-color: var(--color-black);
     padding: 40px;
 }
 
 .title {
     padding: 0px 180px;
     display: flex;
 }
 
 .title__left {
     flex-basis: 50%;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     margin-right: 20px;
 }
 
 .title__right {
     flex-basis: 50%;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     margin-left: 16px;
 }
 
 .title__right p {
     color: var(--color-white);
 }
 
 .title__count {
     font-weight: var(--font-regular);
     margin-bottom: 40px;
     color: var(--color-white);
 }
 
 .title__eng {
     margin-bottom: 4px;
     color: var(--color-white);
 }
 
 .title__kor {
     color: var(--color-white);
 }
 /*functions*/
 
 #functions {
     padding-top: 0px;
 }
 
 .functions__list_1 {
     margin-top: 60px;
     padding-left: 30px;
     margin-bottom: 48px;
     border-left: 1px solid var(--color-black);
 }
 
 .functions__list_1 li {
     font-size: var(--font-micro);
     padding: 8px;
     color: var(--color-dark-grey);
 }
 /* winwaybar */
 
 #winwaybar {
     background-color: var(--color-light-grey);
     padding: 10px 200px;
 }
 
 .winwaybar {
     display: flex;
 }
 
 .winway-logo {
     font-size: var(--font-regular);
     color: var(--color-grey);
     margin-right: 60px;
     line-height: 54px;
 }
 
 .winway-description {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
 .winway-description p {
     font-size: 12px;
     color: var(--color-grey);
     margin: 0px;
 }
 
 .bar {
     max-width: 1000px;
     height: 1px;
     background-color: var(--color-dark-white);
     margin: auto;
     margin-bottom: 80px;
 }
 /* archi */
 
 #archi {
     font-family: 'Oswald', sans-serif;
     background-color: var(--color-black);
     color: var(--color-white);
     padding: 60px 100px;
 }
 
 .index__title__container {
     max-width: 1000px;
     margin: auto;
 }
 
 .archi__container {
     max-width: 700px;
     max-height: auto;
     margin: auto;
 }
 
 .archi__img {
     margin-top: 18px;
     max-width: 100%;
     max-height: 100%;
 }
 
 .index__title__black {
     color: var(--color-white);
     margin: 0px;
 }
 
 li {
     margin: 8px 0px;
 }
 /*Scroll*/
 
 .arrowUp {
     position: fixed;
     z-index: 1;
     font-size: 50px;
     bottom: 60px;
     right: 50px;
     opacity: 0;
     color: var(--color-black);
     transition: all 300ms ease-in-out;
     pointer-events: none;
 }
 
 .arrowUp.visible {
     opacity: 1;
     pointer-events: auto;
 }
 /* winwaybar */
 
 #winwaybar {
     background-color: var(--color-light-grey);
     padding: 10px 200px;
 }
 
 .winwaybar {
     display: flex;
 }
 
 .winway-logo {
     font-size: var(--font-regular);
     color: var(--color-grey);
     margin-right: 60px;
     line-height: 54px;
 }
 
 .winway-description {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
 .winway-description p {
     font-size: 12px;
     color: var(--color-grey);
     margin: 0px;
 }
 
 .bar {
     max-width: 1000px;
     height: 2px;
     background-color: var(--color-light-grey);
     margin: 100px 0px
 }
 
 .bar {
     max-width: 1000px;
     height: 1px;
     background-color: var(--color-dark-white);
     margin: auto;
     margin-bottom: 80px;
 }
 
 @media screen and (max-width:768px) {
     .navbar__toggle-btn {
         display: block;
     }
     #navbar {
         flex-direction: column;
         align-items: flex-start;
         padding: 8px 30px;
         padding-left: 12px;
         background-color: var(--color-black)
     }
     .logo {
         width: 118px;
         top: 4px;
     }
     .menu__list {
         flex-direction: column;
         display: none;
     }
     .navbar__menu__item {
         padding-bottom: 16px;
         text-align: left;
     }
     .menu__list.open {
         display: block;
     }
     /* title */
     #platform04 {
         padding: 0px;
     }
     .title {
         padding: 20px;
     }
     .title__eng {
         font-size: 33px;
     }
     .title__kor {
         padding-top: 10px;
         font-size: var(--font-micro);
         font-weight: var(--weight-regular)
     }
     .title__text {
         display: inline;
     }
     .title_p {
         padding: 0px;
         margin: 20px 0px;
     }
     /* section */
     .section {
         padding: 20px;
     }
     .section__container {
         padding: 20px;
     }
     .index__title {
         margin-top: 20px;
     }
     #main {
         padding: 120px 20px 10px 20px;
     }
     .main__category {
         width: 100%;
     }
     /*functions*/
     .functions__list_1 {
         padding-left: 10px;
     }
     .functions__list_1 li {
         margin: 4px;
     }
     /*archi*/
     #archi {
         padding: 20px;
     }
     .index__title_black {
         margin-bottom: 4px;
     }
     /* winwaybar */
     #winwaybar {
         padding: 8px 20px;
     }
     .winwaybar {
         display: flex;
     }
     .winway-logo {
         font-size: var(--font-micro);
         line-height: 20px;
         margin-right: 10px;
     }
     .winway-description p {
         font-size: 8px;
     }
     .bar {
         max-width: 1000px;
         height: 1px;
         background-color: var(--color-light-grey);
         margin: 50px 0px
     }
     .arrowUp {
         font-size: 40px;
         bottom: 60px;
         right: 24px;
     }
 }