/*font*/

@font-face {
    font-family: Kanit-Bold;
    src: url("/font/Kanit-Bold.ttf");
}

@font-face {
    font-family: Kanit-Light;
    src: url("/font/Kanit-Light.ttf");
}

body{
    font-family: Kanit-Bold;
}

/*index*/
.bg{
    background-image: url("/src/image-bg-01.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 110vh;
}

.logo
{
    display: grid;
    margin-left: auto;
    margin-right: auto;
    padding-top: 30vh;
}

.loader{
    -webkit-mask-image: url("/src/loading-1.png");
    mask-image: url("/src/loading-1.png");
    mask-repeat: no-repeat;
    -webkit-mask-position-x: center;
    -webkit-mask-position-y: center;
    mask-size: 50vw;
}

.loader img{
    height: 30vh;
}

/* main */

.main{
    background-image: url("/src/image-MainBG.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-bottom-right-radius: 100px;
    border-bottom-left-radius: 100px;
}

.main > .col-12 {
    display: grid;
    justify-items: center;
}

.main .logo-main{
    width: 100px;
}

.campaign
{
    width: 60%;
}
.ink
{
    width: 90%;
}

.main > .col-12 > * {
    margin-top: 50px;
}

.top-content
{
    background-image: url("/src/Content.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-top: unset !important;
    padding: 75px;
    border-radius: 60px;
    color: #ffffff;
    margin-bottom: 55px;
}

.top-detail img {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 75%;
}

.top-detail p {
    font-size: 65px;
    text-align: center;
    padding: 45px 0px;
}

.top-content h1 {
    font-size: 75px;
}

.top-content h3 {
    font-family: Kanit-Light;
    font-size: 40px;
    font-weight: 200;
    margin-top: 100px;
}

.row.music-1,.row.music-2 {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    background-size: cover;
    background-position: center center;
    border-radius: 60px;
    margin-top: 50px;
}

.row.music-1 .record-cover, .row.music-2 .record-cover
{
    width: 50%;
    margin-left: 15%;
    z-index: 2;
}

.row.music-1 {
    background-image: url("/src/Card1.png");
}

.row.music-2 {
    background-image: url("/src/Card2.png");
    margin-bottom: 70px;
}

.top-content img {
    width: 100px;
    margin: 40px 0px;
}

.audio-1,.audio-2 {
    display: grid;
    justify-items: center;
}

.audio-1 > *, .audio-2 > * {
    margin-top: 30px;
}

.audio-1 a, .audio-2 > a {
    margin-bottom: 20px;
    width: 80%;
}

button.goto-player {
    background: #000000;
    width: 100%;
    font-size: 35px;
    padding: 30px 0px;
    border-radius: 30px;
    color: #ffffff;
    font-family: Kanit-Light;
}

button.goto-player span:before {
    content: "";
    background-image: url("/src/icon/icon-play-small.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    display: inline-grid;
    margin-right: 15px;
}

button.goto-player span {
    display: inline-flex;
}

img.record-disk {
    position: absolute;
    width: 40%;
    left: 50%;
}

.record {
    display: inline-grid;
    align-items: center;
}

.row.sub-title {
    width: 90%;
    margin: 70px auto;
}

.row.sub-title h1 {
    font-size: 65px;
}

/* audio */

.player{
    background-image: url("/src/player_bg1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 110vh;
    padding: 0px 5%;
}

.toolbar-top {
    display: inline-flex;
    height: 150px;
    width: 100%;
    align-items: center;
}

.toolbar-logo img {
    width: inherit;
}

.toolbar-top > div {
    width: 34%;
}

.close img {
    float: right;
}

.arrow-back img, .close img {
    width: inherit;
}

.arrow-back img {
    float: left;
}

.toolbar-logo {
    text-align: center;
}

.control-player
{
    background-image: url("/src/Rectangle_10.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 20px;
    margin-top: 50px;
    border-radius: 40px;
}

.record-title {
    text-align: center;
}

.record-title h1 {
    font-size: 58px;
}

.record-title h3 {
    font-size: 36px;
    opacity: 0.5;
}

.arrow-back a,.close a {
    height: 100px;
    display: inline-flex;
}

.close a {
    float: inherit;
}