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.
565 lines
9.7 KiB
SCSS
565 lines
9.7 KiB
SCSS
2 years ago
|
html{
|
||
|
font-feature-settings: 'ss01', 'ss02', 'ss08';
|
||
|
scroll-behavior: smooth !important;
|
||
|
}
|
||
|
body{
|
||
|
color:#212121;
|
||
|
letter-spacing: -1px;
|
||
|
font-family: "Noto Sans KR", sans-serif !important;
|
||
|
overflow-y: auto;
|
||
|
overflow-x: hidden;
|
||
|
}
|
||
|
a {
|
||
|
color:#212121 !important;
|
||
|
text-decoration: none !important;
|
||
|
}
|
||
|
.jost{
|
||
|
font-family: 'Jost', serif !important;
|
||
|
}
|
||
|
|
||
|
.open-sidebar{
|
||
|
overflow:hidden;
|
||
|
&::after{
|
||
|
content:'';
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
z-index:10;
|
||
|
background: rgba(0, 0, 0, 0.6);
|
||
|
position: fixed;
|
||
|
left: 0;
|
||
|
top:0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.page-header{
|
||
|
.menu-root{
|
||
|
font-weight: 400;
|
||
|
font-size: 16px;
|
||
|
line-height: 130%;
|
||
|
}
|
||
|
.header-title{
|
||
|
margin-top:10px;
|
||
|
font-weight: 400;
|
||
|
font-size: 50px;
|
||
|
line-height: 130%;
|
||
|
}
|
||
|
|
||
|
&.white-header{
|
||
|
color:white
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.complete-logo{
|
||
|
width:137px;
|
||
|
}
|
||
|
.word-logo{
|
||
|
width:194px;
|
||
|
}
|
||
|
|
||
|
.line-left{
|
||
|
border-left:1px solid rgba(0, 0, 0, 0.05);
|
||
|
}
|
||
|
.line-right{
|
||
|
border-right:1px solid rgba(0, 0, 0, 0.05);
|
||
|
}
|
||
|
.line-bottom{
|
||
|
border-bottom:1px solid rgba(0, 0, 0, 0.05);
|
||
|
}
|
||
|
.line-top{
|
||
|
border-top:1px solid rgba(0, 0, 0, 0.05);
|
||
|
}
|
||
|
|
||
|
.big-title{
|
||
|
font-weight: 500;
|
||
|
font-size: 40px;
|
||
|
line-height: 130%;
|
||
|
letter-spacing: -3px;
|
||
|
color:#186759;
|
||
|
}
|
||
|
|
||
|
.left-image-section{
|
||
|
min-width: 520px;
|
||
|
width:520px;
|
||
|
height: 100vh;
|
||
|
margin-left:80px;
|
||
|
}
|
||
|
|
||
|
.left-image-small-section{
|
||
|
min-width: 240px;
|
||
|
width:240px;
|
||
|
height: 100vh;
|
||
|
margin-left:80px;
|
||
|
position: relative;
|
||
|
z-index: 1;
|
||
|
}
|
||
|
|
||
|
.normal-padding-page{
|
||
|
padding:60px 80px;
|
||
|
margin-left:80px;
|
||
|
height: 100vh;
|
||
|
}
|
||
|
|
||
|
.page-section{
|
||
|
padding:80px 60px 0px;
|
||
|
width: 100%;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
.page-right-list-section{
|
||
|
padding:60px 0px 60px 80px;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
.page-body{
|
||
|
margin-top:70px;
|
||
|
display: flex;
|
||
|
overflow: hidden;
|
||
|
position:relative
|
||
|
}
|
||
|
.big-title-section{
|
||
|
max-width: 340px;
|
||
|
width: 340px;
|
||
|
}
|
||
|
.list-section{
|
||
|
display: flex;
|
||
|
overflow: hidden;
|
||
|
margin-left:140px;
|
||
|
flex:1;
|
||
|
}
|
||
|
|
||
|
/*************** List Item ***************/
|
||
|
.list-item{
|
||
|
width:324px;
|
||
|
min-width: 324px;
|
||
|
margin-right:60px;
|
||
|
|
||
|
.list-item-title{
|
||
|
font-weight: 500;
|
||
|
font-size: 20px;
|
||
|
line-height: 130%;
|
||
|
letter-spacing: -0.5px;
|
||
|
padding-top:20px;
|
||
|
padding-bottom:30px;
|
||
|
text-align: left;
|
||
|
}
|
||
|
.list-item-desc{
|
||
|
display:flex;
|
||
|
padding-top:10px;
|
||
|
font-size:16px;
|
||
|
line-height: 140%;
|
||
|
letter-spacing: -0.5px;
|
||
|
font-weight: 400;
|
||
|
text-align: left;
|
||
|
|
||
|
.list-desc-title{
|
||
|
width: 70px;
|
||
|
text-align: left;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/*************** Fonts ***************/
|
||
|
.font-14{
|
||
|
font-weight:400;
|
||
|
font-size: 14px;
|
||
|
line-height: 130%;
|
||
|
letter-spacing: -1px;
|
||
|
}
|
||
|
.font-15{
|
||
|
font-weight: 400;
|
||
|
font-size: 15px;
|
||
|
line-height: 130%;
|
||
|
letter-spacing: -1px;
|
||
|
}
|
||
|
.font-16{
|
||
|
font-weight: 400;
|
||
|
font-size: 16px;
|
||
|
line-height: 130%;
|
||
|
letter-spacing: -1px;
|
||
|
}
|
||
|
.font-18{
|
||
|
font-weight: 400;
|
||
|
font-size: 18px;
|
||
|
line-height: 140%;
|
||
|
letter-spacing: -1px;
|
||
|
}
|
||
|
.font-20{
|
||
|
font-weight: 400;
|
||
|
font-size: 20px;
|
||
|
line-height: 150%;
|
||
|
letter-spacing: -1px;
|
||
|
}
|
||
|
.font-22{
|
||
|
font-weight: 400;
|
||
|
font-size: 22px;
|
||
|
line-height: 130%;
|
||
|
letter-spacing: -1px;
|
||
|
}
|
||
|
.font-24{
|
||
|
font-weight: 400;
|
||
|
font-size: 24px;
|
||
|
line-height: 35px;
|
||
|
letter-spacing: -2.5px;
|
||
|
}
|
||
|
.font-26{
|
||
|
font-weight: 500;
|
||
|
font-size: 26px;
|
||
|
line-height: 130%;
|
||
|
letter-spacing: -2px;
|
||
|
}
|
||
|
.font-28{
|
||
|
font-weight: 500;
|
||
|
font-size: 28px;
|
||
|
line-height: 130%;
|
||
|
letter-spacing: -1px;
|
||
|
}
|
||
|
|
||
|
.font-30{
|
||
|
font-weight: 500;
|
||
|
font-size: 30px;
|
||
|
line-height: 130%;
|
||
|
letter-spacing: -2px;
|
||
|
}
|
||
|
.font-32{
|
||
|
font-weight: 500;
|
||
|
font-size: 32px;
|
||
|
line-height: 46px;
|
||
|
letter-spacing: -3px;
|
||
|
}
|
||
|
.font-40{
|
||
|
font-weight: 500;
|
||
|
font-size: 40px;
|
||
|
line-height: 130%;
|
||
|
}
|
||
|
.font-42{
|
||
|
font-weight: 500;
|
||
|
font-size: 42px;
|
||
|
line-height: 130%;
|
||
|
letter-spacing: -3px;
|
||
|
}
|
||
|
.font-54{
|
||
|
font-weight: 500;
|
||
|
font-size: 54px;
|
||
|
line-height: 130%;
|
||
|
letter-spacing: -3px;
|
||
|
}
|
||
|
|
||
|
.font-accent{
|
||
|
color:#186759;
|
||
|
}
|
||
|
.text-white{
|
||
|
color:white !important;
|
||
|
}
|
||
|
/*************** Input ***************/
|
||
|
|
||
|
.k-input{
|
||
|
font-weight: 300;
|
||
|
font-size: 18px;
|
||
|
line-height: 140%;
|
||
|
padding:20px 0px;
|
||
|
border:0;
|
||
|
border-bottom:1px solid #212121;
|
||
|
border-radius: 0;
|
||
|
width: 100%;
|
||
|
|
||
|
&.k-text-area{
|
||
|
margin-top:50px;
|
||
|
}
|
||
|
|
||
|
&:focus, &:focus-visible{
|
||
|
outline:none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.white-round-btn{
|
||
|
padding: 6px 16px;
|
||
|
border:1px solid #212121;
|
||
|
border-radius: 100px;
|
||
|
line-height: 150%;
|
||
|
}
|
||
|
.black-round-btn{
|
||
|
padding: 6px 24px;
|
||
|
background-color: #070707;
|
||
|
border-radius: 100px;
|
||
|
color:white !important;
|
||
|
line-height: 150%;
|
||
|
}
|
||
|
.black-round-small-btn{
|
||
|
display: inline-block;
|
||
|
padding: 6px 16px;
|
||
|
background-color: #070707;
|
||
|
border-radius: 100px;
|
||
|
color:white !important;
|
||
|
line-height: 150%;
|
||
|
}
|
||
|
|
||
|
/************ Group ************/
|
||
|
.group-page{
|
||
|
overflow: auto;
|
||
|
height: auto !important;
|
||
|
}
|
||
|
.group-vip{
|
||
|
margin:25px 0px;
|
||
|
}
|
||
|
.group-category{
|
||
|
margin-top:30px;
|
||
|
margin-bottom:15px;
|
||
|
}
|
||
|
.group-item{
|
||
|
margin-right:20px;
|
||
|
margin-bottom:10px;
|
||
|
text-align: center;
|
||
|
float: left;
|
||
|
|
||
|
&.vip{
|
||
|
margin-right:40px;
|
||
|
.group-head{
|
||
|
background: #E1F6F3;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&.company{
|
||
|
.group-head{
|
||
|
padding:10px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.group-head{
|
||
|
padding:10px 30px;
|
||
|
background: #F2F2F2;
|
||
|
}
|
||
|
.group-name{
|
||
|
display:flex;
|
||
|
flex-direction: column;
|
||
|
padding:10px 30px;
|
||
|
}
|
||
|
}
|
||
|
.loader-page{
|
||
|
width: 100vw;
|
||
|
height:100vh;
|
||
|
position:fixed;
|
||
|
left:0px;
|
||
|
top:0px;
|
||
|
background:#fff;
|
||
|
z-index:1000;
|
||
|
}
|
||
|
.load-item{
|
||
|
position:absolute;
|
||
|
top:50%;
|
||
|
left:50%;
|
||
|
transform:translate(-50%, -50%);
|
||
|
}
|
||
|
.typing{
|
||
|
font-size:24px;
|
||
|
color:#212121;
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
.loader {
|
||
|
border: 6px solid #cfcfcf; /* Light grey */
|
||
|
border-top: 6px solid #C29C58; /* Blue */
|
||
|
border-radius: 50%;
|
||
|
width: 60px;
|
||
|
height: 60px;
|
||
|
animation: spin 2s linear infinite;
|
||
|
}
|
||
|
|
||
|
@keyframes spin {
|
||
|
0% { transform: rotate(0deg); }
|
||
|
100% { transform: rotate(360deg); }
|
||
|
}
|
||
|
.loader-logo{
|
||
|
position:absolute;
|
||
|
left:50%;
|
||
|
top:50%;
|
||
|
transform:translate(-50%, -50%);
|
||
|
}
|
||
|
/********** footer mobile ***********/
|
||
|
.mobile-footer{
|
||
|
padding:40px 20px;
|
||
|
color:white;
|
||
|
background:#070707;
|
||
|
}
|
||
|
|
||
|
.progress-container {
|
||
|
position:fixed;
|
||
|
top:0;
|
||
|
width: 100%;
|
||
|
height: 4px;
|
||
|
background: transparent;
|
||
|
z-index:11;
|
||
|
}
|
||
|
|
||
|
/* The progress bar (scroll indicator) */
|
||
|
.custom-progress {
|
||
|
height: 4px;
|
||
|
background: #C29C58;
|
||
|
width: 0%;
|
||
|
z-index:12;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
@media (max-width: 1550px) {
|
||
|
.left-image-small-section, .left-image-section{
|
||
|
min-width: 100px;
|
||
|
width:100px;
|
||
|
}
|
||
|
.page-body{
|
||
|
margin-top:30px;
|
||
|
}
|
||
|
|
||
|
.artist-page-body{
|
||
|
margin-top:0;
|
||
|
overflow: hidden;
|
||
|
flex-direction: column;
|
||
|
}
|
||
|
.artist-list-item{
|
||
|
min-width: 100%;
|
||
|
width:100%;
|
||
|
margin-right:0;
|
||
|
margin-bottom:40px;
|
||
|
text-align: center;
|
||
|
a{
|
||
|
display:inline-block;
|
||
|
}
|
||
|
.list-item-title{
|
||
|
padding-bottom:10px;
|
||
|
}
|
||
|
}
|
||
|
.page-right-list-section{
|
||
|
padding-bottom:0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/************ BreakPoints ************/
|
||
|
// Small devices (landscape phones, 576px and up)
|
||
|
@media (max-width: 576px) {
|
||
|
.group-item{
|
||
|
width:50%;
|
||
|
padding-right:5px;
|
||
|
padding-left:5px;
|
||
|
margin-right:0;
|
||
|
&.vip{
|
||
|
margin-right:0;
|
||
|
}
|
||
|
|
||
|
&.cap{
|
||
|
width:100%;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Medium devices (tablets, 768px and up)
|
||
|
@media (max-width: 768px) {
|
||
|
|
||
|
}
|
||
|
|
||
|
// Large devices (desktops, 992px and up)
|
||
|
@media (max-width: 992px) {
|
||
|
|
||
|
}
|
||
|
|
||
|
// X-Large devices (large desktops, 1200px and up)
|
||
|
@media (max-width: 1200px) {
|
||
|
|
||
|
.left-image-section{
|
||
|
min-width: auto;
|
||
|
width:100%;
|
||
|
height:auto;
|
||
|
padding-top:100%;
|
||
|
}
|
||
|
|
||
|
.left-image-small-section{
|
||
|
margin:0;
|
||
|
width:100%;
|
||
|
height:auto;
|
||
|
}
|
||
|
|
||
|
|
||
|
.page-body{
|
||
|
margin-top:0;
|
||
|
overflow: hidden;
|
||
|
flex-direction: column;
|
||
|
}
|
||
|
|
||
|
|
||
|
.list-section{
|
||
|
flex-direction: column;
|
||
|
margin:0;
|
||
|
}
|
||
|
.list-item{
|
||
|
min-width: 100%;
|
||
|
width:100%;
|
||
|
margin-right:0;
|
||
|
margin-bottom:40px;
|
||
|
text-align: center;
|
||
|
a{
|
||
|
display:inline-block;
|
||
|
}
|
||
|
.list-item-title{
|
||
|
padding-bottom:10px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.big-title-section{
|
||
|
max-width: 100%;
|
||
|
width: 100%;
|
||
|
padding-bottom:20px;
|
||
|
}
|
||
|
|
||
|
.loader-page{
|
||
|
display:none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// XX-Large devices (larger desktops, 1400px and up)
|
||
|
@media (max-width: 1400px) {
|
||
|
.page-header{
|
||
|
.header-mobile-logo{
|
||
|
width: 194px;
|
||
|
margin: auto;
|
||
|
}
|
||
|
}
|
||
|
.left-image-section{
|
||
|
margin:0;
|
||
|
}
|
||
|
.left-image-small-section{
|
||
|
margin:0;
|
||
|
}
|
||
|
.page-section{
|
||
|
padding:30px 20px;
|
||
|
}
|
||
|
.page-right-list-section{
|
||
|
padding:30px;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
.black-round-small-btn{
|
||
|
padding:11px 26px;
|
||
|
font-weight: 200;
|
||
|
}
|
||
|
|
||
|
.big-title{
|
||
|
font-size: 32px;
|
||
|
line-height: 38px;
|
||
|
}
|
||
|
.normal-padding-page{
|
||
|
margin:0;
|
||
|
padding:20px;
|
||
|
height: auto;
|
||
|
// overflow:hidden;
|
||
|
}
|
||
|
|
||
|
.white-round-btn{
|
||
|
padding: 4px 12px;
|
||
|
border:1px solid #212121;
|
||
|
border-radius: 100px;
|
||
|
line-height: 150%;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
.black-round-btn{
|
||
|
width: 100%;
|
||
|
display: inline-block;
|
||
|
text-align: center;
|
||
|
}
|
||
|
}
|