.slide-container{ width: 100% !important; height: 100vh; overflow: hidden; z-index:5; } .sections-container{ width: 100%; height: 100vh; overflow: hidden; } .main-section{ height: 100vh; width: 100%; position: absolute; overflow: hidden; display: flex; float: left; padding-left:200px; padding-right:120px; align-items: center; justify-content: space-between; } .footer-section{ height: 100vh; width: 100%; position: fixed; overflow: hidden; display: flex; float: left; padding-left:200px; padding-right:120px; align-items: center; justify-content: space-between; top:0; left:0; z-index:-1; } // .main-section{ // width: 100vw; // height: 100vh; // padding-left:200px; // padding-right:80px; // overflow: hidden; // display: flex; // flex:0 0 auto; // } .main-section1{ background:url('/images/background/bg1.png'); background-repeat: no-repeat; background-size: cover; } .main-section2{ background:url('/images/background/bg2.png'); background-repeat: no-repeat; background-size: cover; } .main-section3{ background:url('/images/background/bg3.png'); background-repeat: no-repeat; background-size: cover; } .main-section4{ padding:0 !important; .section2-image{ background:url('/images/background/bg4.png' ); background-repeat: no-repeat; background-size:cover; padding-left:160px; padding-right:0; display: flex; height:100%; width:75%; z-index:5; } .section2-intro{ height:100%; width:25%; position:relative; .center-info{ background-color: white; padding:60px 0px; text-align: center; .info-title{ padding-bottom:30px; border-bottom:1px solid rgba(0, 0, 0, 0.05); } .info-operate{ padding:30px 30px; border-bottom:1px solid rgba(0, 0, 0, 0.05); .operate-item{ flex:1; padding:0px 30px; text-align: left; .operate-title{ font-size:18px; font-weight: 400; line-height: 130%; } .operate-numbers{ font-size:20px; line-height:130%; font-weight: 700; } } } .info-btns{ display:flex; padding:30px 30px 0px; .info-btn{ flex:1; .info-btn-img{ width: 60px; margin-bottom:12px; } .info-btn-title{ font-size:16px; line-height:140%; } } } } .item-page{ width:100%; height:100%; .item1{ background-image:url('/images/background/item-page1.png' ); background-color:#F2F2F2; } .item2{ background-image:url('/images/background/item-page2.png' ); background-color: white; } .item3{ background-image:url('/images/background/item-page3.png' ); background-color:#F9F2EC; } .item1, .item2, .item3{ background-repeat: no-repeat; background-size: contain; padding-top:60px; padding-left:40px; overflow: hidden; .item-title{ font-size:45px; font-weight:400; line-height: 130%; letter-spacing: -1px; } .item-desc{ margin-top:10px; font-size:20px; font-weight:350; line-height:26px; letter-spacing: -1px; } } } } } .main-section5{ background:#0D0D0D; padding:100px 200px; color:white; flex-direction: column; overflow-y:auto; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ &::-webkit-scrollbar{ display:none; } &.section-none-scroll{ overflow: hidden; } .ft-title{ font-size:36px; font-weight: 700; text-align: center; padding-bottom:60px; border-bottom:1px solid rgba(255, 255, 255, 0.1); .news{ margin-left:10px; } } .ft-board{ border-bottom: 1px solid rgba(255, 255, 255, 0.1); .notice-box, .news-box{ flex:1; border-right: 1px solid rgba(255, 255, 255, 0.1); } .board-title{ padding-top:40px; padding-bottom:40px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); .eng{ font-size:30px; font-weight: 700; letter-spacing: -0.01em; line-height: 43.35px; } .kor{ font-weight: 300; font-size: 20px; line-height: 26px; letter-spacing: -0.01em; } } .board-list{ padding-top:30px; padding-bottom:30px; .footer-list-item{ padding:10px 0px; } } } .footer{ padding:50px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } } .company-info, .copyright{ font-size:14px; letter-spacing: -0.01em; font-weight: 300; line-height:18.2px; margin-top:10px; } .copyright{ margin-top:20px; } .footer-social-link{ padding:5px; background:rgba(255, 255, 255, 0.1); border-radius: 100px; display: flex; } .sub-link-item{ width:250px; height:300px; margin:5px; color:white !important; display: flex; flex-direction: column; align-items: center; justify-content: center; } .sub-link-item1{background:url('/images/background/main-thumb1.png') no-repeat; background-size:cover;} .sub-link-item2{background:url('/images/background/main-thumb3.png') no-repeat; background-size:cover;} .sub-link-item3{background:url('/images/background/main-thumb2.png') no-repeat; background-size:cover;} .sub-link-item4{background:url('/images/background/main-thumb4.png') no-repeat; background-size:cover;} .pg-wrapper{ overflow: hidden !important; } .scroll{ position: fixed; left: 200px; bottom:100px; display: flex; font-weight: 700; z-index:10; } .arrow{ display: flex; align-items: center; } .arrow-line{ width:65px; height:2px; background:white; position:relative; overflow: hidden; &::before{ content: ''; display: inline-block; width: 20px; height: 2px; position:absolute; background: #C29C58; animation: scrollright 1.5s infinite; } } .arrow-end { border: solid white; border-width: 0 2px 2px 0; display: inline-block; padding: 2px; width:2px; height:2px; margin-left:-4px; &.black-arrow{ border-color: black; } } .right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } @keyframes scrollright{ 0%{transform:translateX(-60px)} 100%{transform:translateX(65px)} } .list-scroll-arrow{ position: absolute; left:0; bottom:0; } .mobile-scroll{ position: absolute; bottom:20px; left:50%; transform: translateX(-50%); display: flex; font-weight: 700; } .down-arrow-box{ position:relative; padding:20px 0px; } .down-arrow{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); animation: jumpInfinite 1.5s infinite; } @keyframes jumpInfinite { 0% { top: 0; } 50% { top: 20px; } 100% { top: 0; } } @media (max-width: 576px) { } // Medium devices (tablets, 768px and up) @media (max-width: 768px) { } // Large devices (desktops, 992px and up) @media (max-width: 992px) { } // XX-Large devices (larger desktops, 1400px and up) @media (max-width: 1400px) { .main-section{ margin-top:64px; padding-left: 120px; padding-right: 120px; padding-top:30px; } } // X-Large devices (large desktops, 1200px and up) @media (max-width: 1200px) { .slide-container{ height:auto; overflow: hidden; } .sections-container{ width:100%; height:auto; } .main-section{ width:100%; height:100vh; position:relative; float:none; padding:20px; margin:0; flex-direction: column; justify-content: center; } .main-section4{ height: auto; padding:0; .section2-image{ padding:20px; width:100%; height: 100vh; position: relative; } .section2-intro{ width:100%; height:100vh; .center-info{ padding:30px 0px; .info-title{ padding-bottom:20px; } .info-operate{ padding:20px; .operate-item{ text-align: center; padding:0px; } } .info-btns{ padding:20px 20px 0px; } } } } }