You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
440 lines
9.7 KiB
SCSS
440 lines
9.7 KiB
SCSS
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|