/* 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: 'NanumSquare', sans-serif;
     cursor: default;
 }
 
 a {
     text-decoration: none;
     color: var(--color-white);
 }
 
 button {
     background-color: transparent;
     cursor: pointer;
     border: none;
     outline: none;
 }
 
 ul {
     list-style-type: none;
 }
 /* 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 80px;
     margin: auto;
 }
 
 .section__container {
     max-width: 1200px;
 }
 
 .arrow {
     width: 200px;
     height: 200px;
     border: solid 1px var(--color-black);
 }
 /*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/main.jpg') center/cover no-repeat;
     text-align: center;
     padding: 160px 104px 30px 104px;
     color: var(--color-white);
     font-family: 'Oswald', sans-serif;
 }
 
 #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:hover {
     color: var(--color-mint)
 }
 
 .category__item {
     padding: 8px 16px;
     font-weight: var(--weight-regular);
 }
 /* title */
 
 #winway01,
 #winway02,
 #winway03,
 #winway04,
 #winway05 {
     text-align: center;
     background-color: var(--color-black);
     padding: 36px 104px;
     color: var(--color-white);
     font-family: 'Oswald', sans-serif;
 }
 
 .title {
     padding: 0px 100px;
 }
 
 .title__count {
     color: var(--color-white);
     font-weight: var(--font-regular);
     margin-bottom: 18px;
 }
 
 .title__eng {
     color: var(--color-white);
     font-size: var(--font-medium);
     font-weight: var(--font-regular);
     font-family: 'Oswald', sans-serif;
     margin: 0px;
     margin-bottom: 4px;
 }
 
 .title__kor {
     color: var(--color-white);
     font-size: var(--font-small);
     margin: 0px;
 }
 
 .bar {
     max-width: 1200px;
     height: 1px;
     background-color: var(--color-dark-white);
     margin: auto;
     margin-bottom: 70px;
     margin-top: 70px;
 }
 /* history */
 
 .history-container {
     position: relative;
     margin-top: 20px;
     margin-left: 40px;
 }
 
 .history-box {
     display: flex;
     margin-bottom: 18px;
 }
 
 .year {
     margin-top: 0;
     font-size: 34px;
     line-height: 32px;
     width: 140px;
     font-family: 'Oswald', sans-serif;
 }
 
 .project {
     margin-top: 0;
     margin-left: 42px;
     width: 620px;
 }
 
 .project li {
     margin-bottom: 10px;
 }
 
 .dot {
     top: 3px;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background-color: black;
 }
 
 .line {
     position: absolute;
     top: 6px;
     left: 149px;
     width: 500px;
     height: 1555px;
     border-left: 1.5px solid black;
 }
 /* WINWAY */
 
 #winway {
     padding: 0px;
 }
 
 .winway__left {
     flex-basis: 50%;
     position: relative;
 }
 
 .winway-img {
     width: 100%;
     height: auto;
 }
 
 .winway-title {
     text-align: center;
 }
 
 h1.winway-main-title {
     color: var(--color-white);
     margin: 0px;
 }
 
 h3.winway-subtitle {
     color: var(--color-white);
 }
 
 .title-message {
     max-width: 900px;
     padding: auto;
     margin: auto;
     margin-bottom: 70px;
     margin-top: 30px;
     font-size: 26px;
     font-weight: var(--weight-semi-bold);
     text-align: center;
 }
 
 h3.content {
     font-size: 17px;
     margin: 38px 0;
     line-height: 34px;
     text-align: center;
 }
 
 p.content {
     font-size: 16px;
     text-align: center;
 }
 
 .cruit__title {
     margin-top: 0px;
     font-weight: var(--weight-semi-bold);
     text-align: center;
 }
 
 .cruit__content {
     text-align: center;
 }
 
 .cruit-index {
     color: black;
     border-bottom: 1px solid black;
     margin: auto;
     margin-bottom: 30px;
     max-width: 700px;
     padding: 6px;
     font-size: 18px;
     font-weight: 700;
 }
 
 .cruit-description {
     margin-top: 16px;
     margin-bottom: 10px;
 }
 
 .container {
     display: flex;
     justify-content: space-between;
 }
 
 .winway-systems {
     color: var(--color-black);
 }
 
 .winway__right {
     padding: 40px;
     padding-top: 0;
 }
 
 .winway__items {
     display: flex;
     margin-bottom: 18px;
 }
 
 .winway__items h3 {
     position: relative;
     top: 10px;
     margin-left: 40px;
     width: 600px;
 }
 
 .winway__item {
     position: relative;
     font-size: 20px;
     font-weight: var(--weight-regular);
     margin-left: 40px;
     margin-bottom: 20px;
     width: 200px;
     height: 100px;
     line-height: 80px;
     background-color: black;
     color: white;
     text-align: center;
     padding: 8px;
 }
 
 .img-container {
     max-width: 900px;
     height: auto;
     margin: auto;
 }
 
 .years {
     width: 100%;
     height: auto;
 }
 
 .img1__container {
     position: absolute;
     max-width: 500px;
     height: auto;
     margin-right: 20px;
     top: 10%;
 }
 
 .img1 {
     width: 100%;
     height: auto;
 }
 
 .winway-info {
     text-align: right;
     font-size: var(--font-micro);
 }
 
 .winway-info div {
     margin-bottom: 8px;
 }
 /* contact */
 
 #contact {
     padding-top: 50px;
 }
 
 .contact {
     padding: 0px;
 }
 
 .contact__left h2 {
     margin-bottom: 30px;
 }
 
 .contact-info {
     margin-bottom: 10px;
     display: flex;
 }
 
 .mapp {
     display: flex;
 }
 
 .map {
     max-width: 400px;
 }
 
 .map-container {
     display: flex;
     text-align: right;
     align-items: flex-end;
     justify-content: space-between;
 }
 
 .map-txt h3 {
     font-weight: var(--weight-semi-bold);
 }
 
 .contact__key {
     font-weight: var(--weight-semi-bold);
     width: 100px;
 }
 
 .bus {
     margin-top: 40px;
 }
 
 .contact-right {
     margin-top: 40px;
     text-align: right;
 }
 
 .contact h2 {
     font-weight: var(--weight-semi-bold);
 }
 
 .map h3 {
     font-size: 18px;
     font-weight: var(--weight-semi-bold);
 }
 
 .map-img {
     width: 100%;
 }
 
 .contact__value {
     font-size: var(--font-micro);
 }
 /* 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;
 }
 /*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;
 }
 /* For below 768px screen width */
 
 @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 */
     #platform01 {
         padding: 0px;
     }
     .title {
         padding: 0px;
     }
     .title__eng {
         font-size: 33px;
     }
     .title__kor {
         padding-top: 10px;
         font-size: var(--font-micro);
         font-weight: var(--weight-regular)
     }
     .title__text {
         display: inline;
     }
     /* section */
     .section {
         max-width: 1000px;
         padding: 20px;
     }
     .section__container {
         padding: 20px;
     }
     #main {
         padding: 120px 20px 10px 20px;
     }
     .main__category {
         width: 100%;
     }
     .index__title {
         padding-bottom: 4px;
         margin-bottom: 0px;
     }
     .index__title_kor {
         margin-bottom: 40px;
     }
     .container {
         display: inline;
     }
     /* 01 */
     .title-message {
         font-size: var(--font-regular);
     }
     h3.content {
         font-size: var(--font-micro);
     }
     /*02*/
     .line {
         display: none;
     }
     .dot {
         display: none;
     }
     ul.project {
         padding: 0px;
     }
     .history-container {
         margin: 0px;
         padding: 16px;
     }
     /*03*/
     .winway__right {
         padding: 10px;
     }
     .winway__items {
         display: inline;
     }
     .winway__item {
         font-size: 15px;
         margin: auto;
         height: 50px;
         line-height: 30px;
         margin-bottom: 10px;
     }
     .winway__items h3 {
         max-width: 100%;
         margin: 0px;
         margin-bottom: 40px;
         font-size: var(--font-micro);
         text-align: center;
     }
     /*05*/
     .contact {
         display: inline;
     }
     .map-container {
         display: inline;
     }
     .map-img {
         margin-bottom: 20px;
     }
     /* winwaybar */
     #winwaybar {
         padding: 8px 20px;
     }
     .winwaybar {
         display: flex;
     }
     .winway-logo {
         font-size: var(--font-micro);
         line-height: 20px;
     }
     .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;
     }
 }