* {
/* font-family: 'Gothic A1', sans-serif;
*/
font-family: 'Junggothic HBB1';
/* font-family: Malgun Gothic;
*/
word-break: keep-all;
box-sizing: border-box;
margin: 0;
padding: 0;
/* cursor: url(https://azikazinmagicworld.com/wp-content/uploads/2024/01/mouse1.png) 4 5, default; */
/*cursor: url(https://azikazinmagicworld.com/wp-content/uploads/2024/01/cursor-1.png) 4 5, pointer;*/
/* cursor:none;
*/
}
@font-face {
font-family: 'HakgyoansimBareondotumB';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/HakgyoansimBareondotumB.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap; /* swap, fallback, optional 등 옵션 가능 */
}
/* @font-face {
font-family: 'Galmuri14';
src: url('/wp-content/themes/azikazin/assets/font/Galmuri14.ttf')
format('woff2');
font-weight: normal;
font-style: normal;
}*/
* h1, h3{
font-family: 'HakgyoansimBareondotumB';
letter-spacing:1.5px;
font-size: 24px !important;
}
a, a:hover, a:active, a:visited, a:link {
text-decoration: none;
color: inherit
}
.max {
width: 100%;
height: auto
}
.icon {
width: 16px;
height: auto
}
img {
max-width: 100%;
height: auto;
}
span.new {
width: 10px;
height: 10px;
position: absolute !important;
right: -12px;
top: -2px;
background-repeat: no-repeat;
background-size: contain;
background-image: url(../images/icon_new.png)
}
figure {
max-width: 100%;
height: auto;
margin-bottom: 20px
}
figcaption * {
font-size: 13px !important;
line-height: 1.4 !important
}
/* Chrome, Safari, Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none;
}
/* IE, Edge */
html, body {
-ms-overflow-style: none;
}
/* Firefox */
html, body {
scrollbar-width: none;
}
html {
background: #31a2f2
}
body {
background: #f5f5f5;
transition: background-color 1.5s ease;
}
body {
}
@media screen and (min-width: 1024px) {
body {
display: flex;
flex-direction: column;
min-height: 100vh;
/* 최소한 화면 높이만큼의 높이를 가짐 */
}
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
body {background: #31a2f2
}
}
@media screen and (max-width: 767px) {
body {background: #31a2f2
}
}
.page {
max-width: 1680px;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
opacity: 0;
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.page {
background-color: #f5f5f5
}
}
@media screen and (max-width: 767px) {
.page {
background-color: #f5f5f5
}
}
ul, li {
list-style: none
}
.aligncenter {
clear: both;
display: block;
float: none;
margin-left: auto;
margin-right: auto;
text-align: center
}
.alignleft {
text-align: left;
margin-top: 0
}
.alignright {
margin-top: 0
}
.video-wrapper {
width: 100%
}
.video-wrapper .video-area {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin: 0
}
.video-wrapper .video-area iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100% !important;
min-height: unset !important
}
.content *, .detail-content * {
word-break: normal;
line-height: 2.0
}
.content iframe, .detail-content iframe {
width: 100% !important;
/* height: auto !important;*/
min-height: 30vw !important ;
margin: 0 auto !important;
}
.detail-content iframe {
width: 100% !important;
/* height: auto !important;*/
min-height: 30vw !important
}
/* .content .instagram-media {
height:84vh !important;
border-radius: 15px !important;
}
*/
@media screen and (max-width: 767px) {
.content iframe, .detail-content iframe {
/* height: 52.5vw !important */
}
}
/* Small devices (portrait tablets and large phones, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
.content iframe, .detail-content iframe {
height: 42.4vw !important
}
}
/* Medium devices (landscape tablets, 992px and up) */
@media (min-width: 992px) and (max-width: 1023px) {
.content iframe, .detail-content iframe {
height: 43vw !important
}
}
.content>p, .detail-content>p {
line-height: 2.0;
width: 100%
}
.content>p .editor-name, .detail-content>p .editor-name {
color: #029d2a;
font-weight: 700;
display: block;
width: 100%
}
.content>p .editor-text, .detail-content>p .editor-text {
color: #000;
width: 100%;
display: block
}
@media screen and (max-width: 767px) {
.content>p .editor-text, .detail-content>p .editor-text {
width: 100%;
margin-left: 0;
margin-top: 0
}
}
@media screen and (max-width: 767px) {
.container, .container-fluid {
padding-left: 25px;
padding-right: 25px
}
.page-music .container, .container-fluid {
padding-left: 12.5px;
padding-right: 12px
}
.container .row, .container-fluid .row {
margin-right: -12.5px;
margin-left: -12.5px
}
.container .row>*, .container-fluid .row>* {
padding-left: 12.5px;
padding-right: 12.5px
}
}
@media screen and (min-width: 1024px) {
@-webkit-keyframes marquee {
from {
-webkit-transform: translateX(100%)
}
99%,to {
-webkit-transform: translateX(-100%)
}
}
@keyframes marquee {
from {
transform: translateX(100%)
}
99%,to {
transform: translateX(-100%)
}
}
}
@media screen and (max-width: 1024px) {
@-webkit-keyframes marquee {
from {
-webkit-transform: translateX(100%)
}
99%,to {
-webkit-transform: translateX(-150%)
}
}
@keyframes marquee {
from {
transform: translateX(100%)
}
99%,to {
transform: translateX(-150%)
}
}
}
@keyframes changeBg {
0%, 100% {
background-image: url(../images/megaphone_off.png)
}
50% {
background-image: url(../images/megaphone_on.png)
}
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100
}
header .header-wrapper {
max-width: 1680px;
margin-left: auto;
margin-right: auto;
flex: 0 0 auto;
display: flex;
width: 100%
}
header .top-bar {
/** background: #198cb7;
**/
background: #31a2f2;
height: 38px;
border-bottom: 1px solid #000;
padding: 8px 15px;
display: flex ;
}
header .top-bar .logo {
width: 100px;
margin-right: 10px;
flex: 0 0 auto;
transition: filter 0.2s;
display: flex;
justify-content: center; /* 수평 가운데 정렬 */
align-items: center; /* 수직 가운데 정렬 */
}
header .top-bar .logoside {
width: 70px;
margin-right: 20px;
flex: 0 0 auto;
transition: filter 0.2s;
display: flex;
justify-content: center; /* 수평 가운데 정렬 */
align-items: center; /* 수직 가운데 정렬 */
}
.logo img {
width: 90px; /* 이미지 가로 길이 고정 */
height: auto; /* 세로 비율 유지 */
display: block;
}
@media screen and (max-width: 767px) {
header .top-bar .logo {
width: 95px;
margin-right: 5px
}
}
header .top-bar .notice {
flex: 0 0 auto;
display: flex;
width: calc(100% - 330px)
}
header .top-bar .notice .notice-icon {
flex: 0 0 auto;
width: 25px;
margin-top: 2px
}
@media screen and (max-width: 767px) {
header .top-bar .notice .notice-icon {
display: none
}
}
header .top-bar .notice .notice-icon.mobile {
display: none;
flex: 0 0 auto;
width: 30px;
height: 20px;
margin-top: 0px;
background-image: url(../images/megaphone_on.png);
background-size: contain;
animation: changeBg .8s step-end infinite
}
@media screen and (max-width: 767px) {
header .top-bar .notice .notice-icon.mobile {
display: none;
}
}
header .top-bar .notice .notice-icon.mobile.active {
animation: none;
background-image: url(../images/megaphone_off.png)
}
header .top-bar .notice .notice-text {
flex: 0 0 auto;
width: 98%;
margin-left: 10px;
overflow: hidden;
position: relative
}
header .top-bar .notice .notice-text>div {
color: #fff;
font-size: 14px;
font-weight: 200;
margin-top: 3px;
white-space: nowrap;
display: inline-block;
-webkit-animation-name: marquee;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
animation-name: marquee;
animation-timing-function: linear;
animation-duration: 25s;
animation-iteration-count: infinite;
width:100%;
}
header .top-bar .notice .notice-text>div p {
color: #fff;
display: inline-block ;
letter-spacing: -0.01em;
}
header .top-bar .notice .notice-text>div strong, header .top-bar .notice .notice-text>div em {
font-weight: normal;
color: #ff0000;
font-style: normal
}
header .top-bar .notice .notice-text>div:after {
content: '';
white-space: nowrap
}
@media screen and (max-width: 767px) {
header .top-bar .notice .notice-text {
display: none;
position: absolute;
z-index: 1000;
min-width: 150px;
width: 40%;
left: 200px;
top: 8px;
height: auto;
padding: 6px 8px;
background: #202121;
border: solid 1px #fff;
border-radius: 12px
}
header .top-bar .notice .notice-text.active {
display: block
}
header .top-bar .notice .notice-text:after {
content: '';
position: fixed;
left: 249px;
top: 128px;
width: 0;
height: 0;
border: 12px solid transparent;
border-right-color: #202121;
border-left: 0;
border-top: 0;
margin-top: -110px;
margin-left: -50px;
filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)
}
header .top-bar .notice .notice-text>div {
animation: none;
-webkit-animation: none;
white-space: normal;
line-height: 1.5;
font-size: 12px
}
header .top-bar .notice .notice-text>div p {
display: inline
}
header .top-bar .notice .notice-text>div p:first-child {
font-weight: 700;
display: block
}
}
header .top-bar .lang-navi {
margin-left: auto
}
header .top-bar .lang-navi .lang-list {
display: flex
}
header .top-bar .lang-navi .lang-list .lang-item {
flex: 0 0 auto;
width: 26px;
margin-top: 3px;
margin-left: 8px
}
header .top-bar .lang-navi .lang-list .lang-item img {
transition:filter 0.2s;
}
@media screen and (max-width: 767px) {
header .top-bar .lang-navi .lang-list .lang-item.current {
display: none
}
}
header .menu-navi {
height: 48px;
background: rgba(92, 89, 81, 0.2);
position: fixed;
top: 38px;
left: 0;
width: 100%;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px)
}
@media screen and (max-width: 767px) {
header .menu-navi {
height: 50px;
overflow-x: scroll
}
}
header .menu-navi .menu-list {
margin: 11px 20px;
white-space: nowrap
}
header .menu-navi .menu-list .menu-item {
cursor: pointer;
margin-right: 40px;
display: inline-block;
text-transform: uppercase;
font-weight: 200;
line-height: 1.2;
font-size: 16px;
padding: 2px 10px;
border-radius: 20px;
border: double 1px black;
background: #F0ECDE;
transition: filter 0.3s;
box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.8);
position: relative;
}
header .menu-navi .menu-list .menu-item:last-child {
margin-right: 0
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
header .menu-navi .menu-list .menu-item {
margin-right: 30px
}
}
@media screen and (max-width: 767px) {
header .menu-navi .menu-list {
white-space: nowrap;
margin: 12px 14px
}
header .menu-navi .menu-list .menu-item {
font-size: 14px;
padding: 4px 8px 2px;
margin-right: 10px;
font-weight: 400;
background: #F0ECDE
}
header .menu-navi .menu-list .menu-item:last-child {
margin-right: 15px
}
}
footer {
position: relative;
padding: 12px 0;
font-size: 14px;
text-align: right;
color: #fff;
background-color: #202121;
flex-shrink: 0;
/* 풋터가 남은 공간을 차지하지 않도록 함 */
width: 100%;
overflow-x: hidden ;
}
footer .footer-wrapper {
max-width: 1680px;
margin-left: auto;
margin-right: auto;
flex: 0 0 auto;
width: 100%;
position: relative
}
footer .footer-wrapper:after {
content: '';
pointer-events: none;
background-image: url(../images/footer_star_left.png), url(../images/footer_star_right.png);
background-repeat: no-repeat;
background-size: 8%, 8%;
background-position: 40px calc(100% - 10px), calc(100% - 40px) calc(100% - 10px);
opacity: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}
@media screen and (max-width: 767px) {
footer .footer-wrapper:after {
z-index: 0;
background-size: 20%, 20%;
background-position: 20px calc(100% - 110px), calc(100% - 20px) calc(100% - 110px)
}
}
@media screen and (max-width: 767px) {
footer * {
z-index: 10;
position: relative;
text-align: center;
}
}
footer .footer-logo {
margin: 50px auto;
display: flex;
justify-content: center
}
footer .footer-logo .logo {
flex: 0 0 auto;
width: 15%;
height: auto;
margin: 0 35px;
max-width: 230px
}
footer .footer-logo .logo:last-child {
width: 5%;
max-width: 80px
}
footer .credit {
font-size: 12px;
font-weight: 500;
padding-right: 15px;
}
footer .credit p {
font-weight: 400;
font-size: 14px
}
footer .credit p a {
color: #fff
}
@media screen and (max-width: 767px) {
footer {
font-size: 13px;
padding: 20px 20px 15px
}
.footer-wrapper {
display: flex;
justify-content: center;
/* 수평 중앙 정렬 */
align-items: center;
/* 수직 중앙 정렬 */
}
footer .footer-text {
line-height: 1.6;
word-break: keep-all
}
footer .footer-text br {
display: none
}
footer .footer-logo {
margin: 40px auto
}
footer .footer-logo .logo {
width: 120px;
margin: 0 15px;
display: flex;
align-items: center
}
footer .footer-logo .logo:last-child {
width: 55px
}
footer .credit {
font-size: 11px;
white-space: nowrap;
width: 100vw;
position: relative;
text-align: center;
padding-right:0;
}
footer .credit .mail {
display: none
}
}
@media screen and (max-width: 767px) {
.page~footer {
padding: 15px 20px !important
}
.page~footer .footer-text, .page~footer .footer-logo {
display: none !important
}
}
@media screen and (max-width: 767px) {
.page.page-main~footer .footer-text {
display: block !important
}
.page.page-main~footer .footer-logo {
display: flex !important
}
}
.page-main {
display: flex;
min-height: 100vh;
height: auto;
max-width: unset;
}
@media screen and (max-width: 767px) {
.page-main {
max-height: unset
}
}
.page-main .main-navi {
flex: 0 0 auto;
width: 30%;
min-width: 400px;
background-image: url(../images/main_bg.png);
background-repeat: no-repeat;
background-size: contain;
background-position: 101.5% 0;
max-height: 100%
}
@media screen and (max-width: 767px) {
.page-main .main-navi {
min-width: unset
}
}
.page-main .main-navi .logo {
margin: 130px auto 30px;
text-align: center
}
.page-main .main-navi .logo img {
max-width: 260px;
width: 70%
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.page-main .main-navi {
min-width: 300px
}
.page-main .main-navi .logo img {
width: 65%
}
}
.page-main .main-navi .recent-post .recent-item {
border-bottom: solid 1px #000;
display: flex;
padding: 13px 20px 5px
}
.page-main .main-navi .recent-post .recent-item .cate {
color: #ff0000;
font-size: 13px;
margin-top: -3px;
min-width: 55px;
margin-right: 10px
}
.page-main .main-navi .recent-post .recent-item .title {
font-weight: 600;
color: #5c5951;
font-size: 18px;
width: calc(100% - 55px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.page-main .main-navi .recent-post .recent-item .title a {
position: relative
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.page-main .main-navi .recent-post .recent-item .title {
width: calc(100% - 70px)
}
}
.page-main .main-navi .recent-post .recent-item>* {
flex: 0 0 auto
}
.page-main .main-navi .music-card {
margin: 30px auto;
width: 65%;
max-width: 280px
}
.page-main .main-navi .music-card img {
margin-left: -2px
}
@media screen and (max-width: 767px) {
.page-main .main-navi .music-card img {
margin-left: 0
}
}
@media screen and (min-width:768px) {
.page-main .main-image {
flex: 0 0 auto;
width: 70%;
max-width: calc(100% - 400px);
height: 100vh;
/* background-image: url(../images/azikazin_main.jpg);
*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* background-attachment: fixed;
배경 이미지를 고정 */
}
}
.page-main .main-image {
flex: 0 0 auto;
width: 75%;
max-width: calc(100% - 400px);
height: 100vh;
/* background-image: url(../images/azikazin_main.jpg);
*/
background-repeat: no-repeat;
background-position: center top;
background-size: auto 100%;
}
.page-main .main-image img.main {
opacity: 0;
display: none
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.page-main .main-image {
max-width: calc(100% - 300px)
}
}
@media screen and (max-width: 767px) {
.page-main {
width: 100%;
flex-wrap: wrap
}
.page-main .main-navi {
width: 100%;
display: flex;
order: 2;
flex-wrap: wrap;
background-image: none
}
.page-main .main-navi .music-card {
width: 60%
}
.page-main .main-navi .logo {
display: none
}
.page-main .main-navi .recent-post {
border-top: solid 2px #000
}
.page-main .main-navi .recent-post .recent-item {
padding: 13px 20px 8px
}
.page-main .main-navi .recent-post .recent-item .cate {
font-size: 12px;
min-width: 50px;
margin-top: 0;
font-weight: 600
}
.page-main .main-navi .recent-post .recent-item .title {
font-size: 15px
}
.page-main .main-navi>* {
flex: 0 0 auto;
width: 100%
}
.page-main .main-image {
width: 100%;
/*height: 70vh;
*/
height: calc(var(--vh, 1vh) * 70);
min-height: 475px;
background-size: cover;
display: flex;
max-width: 100%;
order: 1;
flex: 0 0 auto
}
}
@media screen and (min-width:2048px) {
.page{
min-width:130vh;
}
.content iframe{
min-height:25vw !important;
}
}
.page-character {
max-height: unset;
height: auto;
/* background-image: url(../images/character_bg.png);*/
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
position: relative;
min-height:100vh;
}
@media screen and (max-width: 767px) {
.page-character {
min-height: unset;
max-height: unset;
background-repeat: repeat;
background-position: top;
/*background-image: url(../images/character_bg_mo.png) */
}
}
.page-character:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
/* background-image: url(../images/character_character.png);*/
background-size: 10%;
background-position: 97% 97%;
background-repeat: no-repeat;
pointer-events: none
}
@media screen and (max-width: 767px) {
.page-character:after {
background-size: 30%;
background-position: calc(100% - 30px) calc(100% - 30px)
}
}
.page-character .main-container {
padding-top: 20vh;
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.page-character .main-container {
padding-top: 350px
}
}
@media screen and (max-width: 767px) {
.page-character .main-container {
padding-top: 110px
}
}
.page-character .main-container .character-wrap:last-child .character-main {
flex-direction: row-reverse;
margin-left: 0;
margin-right: 100px
}
.page-character .main-container .character-wrap:last-child .character-main .text .dot {
margin-right: 6%;
margin-left: 6%;
min-width: 60px
}
.page-character .main-container .character-wrap:last-child .character-main .image {
width: 20vh;
margin: 0 0 0 9%
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.page-character .main-container .character-wrap:last-child .character-main {
margin-right: 30px
}
.page-character .main-container .character-wrap:last-child .character-main .image {
width: 30%;
margin: 0
}
.page-character .main-container .character-wrap:last-child .character-main .image img {
max-width: 180px
}
.page-character .main-container .character-wrap:last-child .character-main .text {
width: 70%
}
.page-character .main-container .character-wrap:last-child .character-main .text .desc {
margin-right: 30px
}
}
@media screen and (max-width: 767px) {
.page-character .main-container .character-wrap:last-child .character-main {
margin-right: 0;
margin-top: 85px
}
.page-character .main-container .character-wrap:last-child .character-main .image {
width: 50%;
margin: 0 0 30px;
max-width: 250px
}
.page-character .main-container .character-wrap:last-child .character-main .text .dot {
right: 0;
width: 60px;
margin-left: 0;
margin-right: 0
}
}
.page-character .main-container .character-main {
display: flex;
margin-left: 100px
}
.page-character .main-container .character-main .text {
flex: 0 0 auto;
width: 60%;
display: flex;
align-items: end
}
.page-character .main-container .character-main .text .dot {
flex: 0 0 auto;
width: 14%;
margin-right: 6%;
min-width: 70px
}
.page-character .main-container .character-main .text .about {
flex: 0 0 auto;
width: 80%
}
.page-character .main-container .character-main .text .about .name {
background: #fff;
border-radius: 20px;
line-height: 1;
padding: 8px 20px 6px;
font-weight: 600;
display: inline-block
}
.page-character .main-container .character-main .text .about .desc {
margin-top: 20px;
margin-left: 8px;
line-height: 1.45
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.page-character .main-container .character-main .text .about .desc {
margin-right: 65px
}
}
.page-character .main-container .character-main .image {
flex: 0 0 auto;
width: 20%;
margin: 0 20% 0 0;
align-items: end;
display: flex
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.page-character .main-container .character-main {
margin-left: 30px
}
.page-character .main-container .character-main .text {
width: 75%
}
.page-character .main-container .character-main .text .dot {
margin-right: 10px
}
.page-character .main-container .character-main .image {
width: 25%;
margin: 0 0 0 -30px
}
.page-character .main-container .character-main .image img {
max-width: 100px
}
}
@media screen and (max-width: 767px) {
.page-character .main-container .character-main {
margin-left: 0;
flex-wrap: wrap-reverse;
justify-content: center
}
.page-character .main-container .character-main .text {
width: 100%;
position: relative;
margin-left: auto;
margin-right: auto
}
.page-character .main-container .character-main .text .dot {
width: 70px;
position: absolute;
top: -30px;
min-width: unset
}
.page-character .main-container .character-main .text .about {
width: 100%;
text-align: center;
font-size: 14px
}
.page-character .main-container .character-main .text .about .name {
font-size: 15px
}
.page-character .main-container .character-main .text .about .desc {
text-align: center;
margin: 22px 0 0
}
.page-character .main-container .character-main .image {
width: 35%;
max-width: 170px;
margin: 0 auto 30px
}
}
.page-character .sub-container {
margin-top: 225px;
padding-bottom: 100px
}
@media screen and (max-width: 767px) {
.page-character .sub-container {
margin-top: 100px
}
}
.page-character .sub-container .character-sub {
display: flex;
align-items: center
}
.page-character .sub-container .character-sub .image {
flex: 0 0 auto;
width: 20%
}
@media screen and (max-width: 767px) {
.page-character .sub-container .character-sub .image {
width: 45px
}
}
.page-character .sub-container .character-sub .about {
flex: 0 0 auto;
width: 80%;
padding-left: 20px;
line-height: 1.45
}
@media screen and (max-width: 767px) {
.page-character .sub-container .character-sub .about {
padding-left: 30px;
width: calc(100% - 45px)
}
}
.page-character .sub-container .character-sub .about .name {
font-weight: 600
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.page-character .sub-container .character-sub {
margin: 0 40px 80px
}
.page-character .sub-container .character-sub .image {
width: 60px
}
.page-character .sub-container .character-sub .about {
padding-left: 30px
}
}
@media screen and (max-width: 767px) {
.page-character .sub-container .character-sub {
align-items: start;
font-size: 14px;
margin-bottom: 30px
}
}
@media screen and (min-width:1024px) {
.page-music {
background: #202121;
height: 100vh;
flex: 1;
/* 남은 공간을 모두 차지함 */
}
}
@media screen and (max-width: 767px) {
.page-music {
height: auto;
background: #202121;
}
.page-music .page-list {
background-color:#202121;
}
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
}
#musicList {
background-color: #202121;
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.page .page-music .page-list {
background-color:#202121 !important;
}
}
.page-music~footer {
background: #303030
}
.page-music .mobile-music-list {
/* display: none; */
width: 100%;
border-top: solid 1px #fff;
margin-bottom: 80px
}
.page-music .mobile-music-list .list-item {
padding: 13px 20px 8px;
border-bottom: solid 1px #fff
}
.page-music .mobile-music-list .list-item .cate {
color: #198cb7;
font-size: 12px;
min-width: 55px;
font-weight: 600;
display: inline-block
}
.page-music .mobile-music-list .list-item h3.title {
font-weight: 600;
display: inline-block;
font-size: 15px
}
@media screen and (max-width: 767px) {
.page-music .mobile-music-list {
display: block
}
}
.page-music .music-list-container {
display: flex;
height: 100vh;
margin: 0 auto;
align-items: center
}
@media screen and (max-width: 767px) {
.page-music .music-list-container {
height: 70vh;
margin: 60px 0 40px;
max-width: unset
}
}
.page-music .music-list-container .music-list {
overflow: hidden;
position: relative;
margin-top: 60px
}
@media screen and (max-width: 767px) {
.page-music .music-list-container .music-list {
margin-left: -25px;
margin-right: -25px
}
}
.page-music .music-list-container .music-list:before {
content: '';
pointer-events: none;
z-index: 10;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 5%;
background: linear-gradient(to right, #202121, rgba(32, 33, 33, 0));
-webkit-background: linear-gradient(to right, #202121, rgba(32, 33, 33, 0))
}
@media screen and (max-width: 767px) {
.page-music .music-list-container .music-list:before {
/* display: none; */
}
}
.page-music .music-list-container .music-list:after {
content: '';
pointer-events: none;
z-index: 10;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 5%;
background: linear-gradient(to left, #202121, rgba(32, 33, 33, 0));
-webkit-background: linear-gradient(to left, #202121, rgba(32, 33, 33, 0))
}
@media screen and (max-width: 767px) {
.page-music .music-list-container .music-list:after {
/* display: none; */
}
}
.page-music .music-list-container .music-list .music-list-swiper>.swiper-wrapper {
transition-timing-function: linear !important
}
.page-music .music-list-container .music-list .music-list-swiper .swiper-slide {
width: 20%;
margin: 0 2.5%
}
.page-music .music-list-container .music-list .music-list-swiper .swiper-slide h3.title {
text-align: center;
margin-top: 15px;
padding: 0px 0px;
font-weight: 400;
font-size: 14px;
}
@media screen and (max-width: 767px) {
.page-music .music-list-container .music-list .music-list-swiper .swiper-slide {
width: 70%
}
.page-music .music-list-container .music-list .music-list-swiper .swiper-slide h3.title {
font-size: 16px
}
}
.page-music.page-detail {
position: relative;
height: auto;
min-height: 100vh;
background-color:#ffffff00;
/* background-image: url(../images/stories_bg.png); */
background-repeat: space;
}
/* .page-music.page-detail * {
z-index: 1;
position: relative
}
*/
.page-music.page-detail:before {
content: '';
pointer-events: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: .1;
z-index: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center
}
@media screen and (max-width: 767px) {
.page-music.page-detail:before {
background-size: contain;
background-repeat: repeat
}
}
.page-music.page-detail:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
mix-blend-mode: luminosity;
/* background-image: url(../images/music_character.png); */
background-size: 10%;
background-position: 97% calc(100% - 50px);
background-repeat: no-repeat;
pointer-events: none
}
@media screen and (max-width: 767px) {
.page-music.page-detail:after {
background-size: 30%;
background-position: calc(100% - 30px) calc(100% - 30px)
}
}
.page-music.page-detail .music-list {
padding-top: 110px;
margin: 0 0px
}
.page-music.page-detail .music-list .music-item {
/* font-size: 14px; */
/* text-align: center; */
/* padding: 0 15px; */
/* margin-bottom: 50px */
}
.music-item div a img.max {
border:solid 0.1px gray;
display:none
}
.page-music.page-detail .music-list .music-item.active .image {
-webkit-filter: drop-shadow(4px 4px 0 #fefefe);
filter: drop-shadow(2px 2px 0 lightblue);
}
.page-music.page-detail .music-list .music-item .title {
margin-top: 10px;
font-weight: 400
}
@media screen and (max-width: 1400px) and (min-width: 1024px) {
.page-music.page-detail .music-list {
margin: 0
}
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.page-music.page-detail .music-list {
margin: 0 20px
}
.page-music.page-detail .music-list .music-item {
padding: 0 20px
}
}
@media screen and (max-width: 768px) {
.page-music.page-detail .music-list {
/* display: none */
}
.page-music.page-detail .music-content .content-container .content-wrap {
margin-top:15px !important;
}
}
.page-music.page-detail .music-content p .editor-text {
}
.page-music.page-detail .music-content .content-container {
padding: 0 150px 100px ;
}
.page-music.page-detail .music-content .content-container .music-info {
margin-top: 60px
}
.page-music.page-detail .music-content .content-container .music-info .cover {
margin-bottom: 20px
}
.page-music.page-detail .music-content .content-container .music-info .cover img {
/* border-radius:3px; */
opacity:0;
/* box-shadow:5px 5px 0px 0px rgba(0, 0, 0, 0.8); */
/* rotate:-3deg; */
border: solid 0.01px #80808057;
}
.page-music.page-detail .music-content .content-container .music-info .info {
text-align: left;
margin-bottom: 60px;
line-height: 1.5;
font-size:14px;
text-shadow:1px 1px aliceblue;
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.page-music.page-detail .music-content .content-container .music-info {
margin-right: 30px;
margin-left: -20px
}
.page-music.page-detail .music-content .content-container .music-info .cover {
margin-left: 10px
}
}
@media screen and (max-width: 767px) {
.page-music.page-detail .music-content .content-container {
padding: 0 0 100px
}
.page-music.page-detail .music-content .content-container .music-info {
margin-top: 20px;
display: flex;
margin-bottom: 40px
}
.page-music.page-detail .music-content .content-container .music-info .cover {
width: 30%;
min-width: 120px;
margin: 0;
margin-right: 20px;
margin-bottom: 0
}
.page-music.page-detail .music-content .content-container .music-info .info {
margin-bottom: 0;
font-size: 14px;
text-align: left
}
}
.page-music.page-detail .music-content .content-container .side-navi {
background-image: url(../images/stories_side_box_bg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding-top: 20px;
padding-bottom: 25px;
display: flex;
flex-wrap: wrap-reverse
}
.page-music.page-detail .music-content .content-container .side-navi.reverse-navi {
flex-wrap: wrap
}
.page-music.page-detail .music-content .content-container .side-navi.reverse-navi .list-item:first-child {
/* border-bottom: solid 1px #000;*/
font-weight: 500
}
.page-music.page-detail .music-content .content-container .side-navi.reverse-navi .list-item:last-child {
border-bottom: none;
font-weight: 500
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.page-music.page-detail .music-content .content-container .side-navi {
margin-right: 30px;
margin-left: -20px
}
}
.page-music.page-detail .music-content .content-container .side-navi.music-list-navi.reverse-navi {
flex-wrap: wrap
}
.page-music.page-detail .music-content .content-container .side-navi.music-list-navi.reverse-navi .list-item:first-child {
/*border-bottom: solid 1px #000;*/
font-weight: 700
}
.page-music.page-detail .music-content .content-container .side-navi.music-list-navi.reverse-navi .list-item:last-child {
/* border-bottom: none;*/
font-weight: 500
}
.page-music.page-detail .music-content .content-container .side-navi.music-list-navi .list-item:last-child {
font-weight: 700
}
.page-music.page-detail .music-content .content-container .side-navi .list-item {
/* border-bottom: solid 1px #000;*/
/* margin-right: 35px; */
text-align: right;
/* padding: 15px 0 10px 10px; */
color: #5c5951;
font-weight: 500;
flex: 0 0 auto;
width: calc(100% - 5px)
}
.page-music.page-detail .music-content .content-container .side-navi .list-item a {
position: relative
}
@media screen and (max-width: 767px) {
.page-music.page-detail .music-content .content-container .side-navi .list-item a {
display: inline-block
}
}
.page-music.page-detail .music-content .content-container .side-navi .list-item.active {
font-weight: 700 !important
}
.page-music.page-detail .music-content .content-container .side-navi .list-item:first-child {
/* border-bottom: none */
}
@media screen and (max-width: 767px) {
.page-music.page-detail .music-content .content-container .side-navi {
padding-top: 10px;
padding-bottom: 15px;
margin-left: -5px;
margin-right: -5px
}
.page-music.page-detail .music-content .content-container .side-navi .list-item {
text-align: left;
font-size: 14px;
padding: 12px 0 8px 20px
}
}
.page-music.page-detail .music-content .content-container .content-wrap {
margin-top: 50px;
margin-bottom: 200px;
line-height:2.0;
}
.page-music.page-detail .music-content .content-container .content-wrap .swiper-container {
overflow: hidden;
position: relative;
width: 100%
}
.page-music.page-detail .music-content .content-container .content-wrap .swiper-container .swiper-wrapper {
height: 30vw
}
@media screen and (max-width: 767px) {
.page-music.page-detail .music-content .content-container .content-wrap .swiper-container .swiper-wrapper {
height: 50vw
}
}
.page-music.page-detail .music-content .content-container .content-wrap .swiper-container .swiper-wrapper .swiper-slide {
background-size: contain;
background-repeat: no-repeat;
background-position: center top
}
.page-music.page-detail .music-content .content-container .content-wrap .swiper-container .swiper-button-prev:after, .page-music.page-detail .music-content .content-container .content-wrap .swiper-container .swiper-button-next:after {
content: '';
width: 32px;
height: 32px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-image: url(../images/swiper_arrow_right.png)
}
@media screen and (max-width: 767px) {
.page-music.page-detail .music-content .content-container .content-wrap .swiper-container .swiper-button-prev:after, .page-music.page-detail .music-content .content-container .content-wrap .swiper-container .swiper-button-next:after {
width: 20px;
height: 20px
}
}
.page-music.page-detail .music-content .content-container .content-wrap .swiper-container .swiper-button-prev:after {
background-image: url(../images/swiper_arrow_left.png)
}
.page-music.page-detail .music-content .content-container .content-wrap .swiper-container .swiper-button-next {
right: 15px;
margin-top: -48px
}
@media screen and (max-width: 767px) {
.page-music.page-detail .music-content .content-container .content-wrap .swiper-container .swiper-button-next {
right: 0;
margin-top: -50px
}
}
.page-music.page-detail .music-content .content-container .content-wrap .swiper-container .swiper-button-prev {
left: 15px;
margin-top: -48px
}
@media screen and (max-width: 767px) {
.page-music.page-detail .music-content .content-container .content-wrap .swiper-container .swiper-button-prev {
left: 0;
margin-top: -50px
}
}
.page-music.page-detail .music-content .content-container .content-wrap .swiper-container .swiper-pagination {
position: relative;
margin-top: 20px
}
.page-music.page-detail .music-content .content-container .content-wrap .swiper-container .swiper-pagination .swiper-pagination-bullet {
background: #fff;
opacity: 1
}
.page-music.page-detail .music-content .content-container .content-wrap .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
background: #5c5951
}
@media screen and (max-width: 767px) {
.page-music.page-detail .music-content .content-container .content-wrap {
margin-bottom: 100px
}
}
.page-music.page-detail .music-content .content-container .content-wrap .thumbnail {
width: 60%;
margin: 0 auto 60px
}
.page-music.page-detail .music-content .content-container .content-wrap h3.title {
font-weight: 600;
font-size: 32px;
margin-bottom: 48px;
opacity:0;
}
.page-music.page-detail .music-content .content-container .content-wrap .content {
line-height: 1.5
}
.page-music.page-detail .music-content .content-container .content-wrap .page-navi {
display: flex;
justify-content: space-between;
margin-top: 100px
}
.page-music.page-detail .music-content .content-container .content-wrap .page-navi .next {
margin-left: auto
}
.page-music.page-detail .music-content .content-container .content-wrap .page-navi .next .arrow {
text-align: right
}
.page-music.page-detail .music-content .content-container .content-wrap .page-navi .prev {
margin-right: auto
}
.page-music.page-detail .music-content .content-container .content-wrap .page-navi .arrow {
font-size: 60px
}
.page-music.page-detail .music-content .content-container .content-wrap .page-navi .title {
margin-top: -5px;
font-size: 14px;
font-weight: 600
}
@media screen and (max-width: 767px) {
.page-music.page-detail .music-content .content-container .content-wrap .page-navi {
display: none
}
.page-music.page-detail .music-content .content-container .content-wrap .thumbnail {
width: 100%;
margin: 0 auto 30px
}
.page-music.page-detail .music-content .content-container .content-wrap h3.title {
font-size: 20px !important;
margin-bottom: 30px ;
}
.page-music.page-detail .music-content .content-container .content-wrap .content {
font-size: 15px;
line-height: 1.6;
}
.page-music.page-detail .music-content .content-container .content-wrap .content p {
line-height: 2.0
}
.page-music.page-detail .music-content .content-container .content-wrap .content span {
line-height: 2.0;
font-size: 16px
}
}
.page-music.page-detail .side-navi.mobile-music-navi {
display: none;
background-image: url(../images/stories_side_box_bg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding-top: 20px;
padding-bottom: 25px
}
.page-music.page-detail .side-navi.mobile-music-navi.music-list-navi .list-item:first-child {
font-weight: 700
}
.page-music.page-detail .side-navi.mobile-music-navi .list-item {
/* border-bottom: solid 1px #000;*/
margin-right: 35px;
text-align: right;
padding: 15px 0 10px 10px;
color: #5c5951;
font-weight: 500
}
.page-music.page-detail .side-navi.mobile-music-navi .list-item.active {
font-weight: 700
}
.page-music.page-detail .side-navi.mobile-music-navi .list-item:last-child {
/* border-bottom: none */
}
@media screen and (max-width: 767px) {
.page-music.page-detail .side-navi.mobile-music-navi {
display: block;
padding-top: 10px;
padding-bottom: 15px;
margin-left: -5px;
margin-right: -5px;
margin-top: 100px
}
.page-music.page-detail .side-navi.mobile-music-navi .list-item {
text-align: right !important;
font-size: 14px
}
}
.page-project {
background-image: url(../images/project_bg.png);
background-size: 98% calc(98% - 100px);
background-repeat: no-repeat;
background-position: center 100px
}
@media screen and (max-width: 767px) {
.page-project {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
background-size: calc(100% - 30px) calc(98% - 100px);
overflow: hidden
}
.page-project .container-fluid {
height: calc(100vh - 165px);
height: calc((var(--vh, 1vh) * 100) - 165px);
margin-left: 10px;
margin-top: 118px;
margin-right: 0;
width: auto;
overflow-y: auto;
padding-left: 0
}
}
.page-project .project-list-row {
margin: 0 3%;
padding: 180px 0
}
@media screen and (max-width: 767px) {
.page-project .project-list-row {
padding: 20px 0 0;
width: calc(100% - 20px);
margin: 0 10px
}
}
.page-project .project-list-row .side-navi {
font-size: 20px;
margin-top: 30px;
font-style: italic
}
.page-project .project-list-row .side-navi .project-list .list-item {
color: #5c5951;
border-bottom: solid 2px #000;
padding: 7px 0 5px;
font-weight: 600
}
.page-project .project-list-row .side-navi .project-list .list-item>a {
position: relative
}
.page-project .project-list-row .side-navi .project-list .list-item>a span.new {
right: -14px
}
.page-project .project-list-row .side-navi .project-list .list-item.active {
color: #000
}
.page-project .project-list-row .side-navi .project-list .list-item .client {
display: none
}
@media screen and (max-width: 767px) {
.page-project .project-list-row .side-navi .project-list .list-item {
border-bottom: solid 1px #000;
padding: 10px 0 7px;
position: relative
}
.page-project .project-list-row .side-navi .project-list .list-item:first-child.active {
display: none
}
.page-project .project-list-row .side-navi .project-list .list-item .client {
display: block;
font-size: 12px;
position: absolute;
right: 0;
bottom: 10px
}
}
@media screen and (max-width: 767px) {
.page-project .project-list-row .side-navi .project-list {
border-top: solid 1px #000;
margin-bottom: 20px
}
}
@media screen and (max-width: 767px) {
.page-project .project-list-row {
flex-wrap: wrap-reverse
}
.page-project .project-list-row .side-navi {
font-size: 16px;
margin-top: 40px
}
}
.page-project .project-list-row .project-list-cont {
margin-left: 50px
}
@media screen and (max-width: 1400px) and (min-width: 1024px) {
.page-project .project-list-row .project-list-cont {
margin-left: 30px
}
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.page-project .project-list-row .project-list-cont {
margin-left: 15px
}
}
@media screen and (max-width: 767px) {
.page-project .project-list-row .project-list-cont {
margin-left: 0
}
}
.page-project .project-list-row .project-list-cont .project-list .list-item {
display: flex;
flex-wrap: wrap;
margin-bottom: 30px
}
.page-project .project-list-row .project-list-cont .project-list .list-item:last-child {
margin-bottom: 0
}
.page-project .project-list-row .project-list-cont .project-list .list-item .title {
flex: 0 0 auto;
width: 100%;
font-size: 20px;
font-weight: 600;
padding: 0 10px 5px 20px;
border-bottom: solid 2px #000;
margin-bottom: 20px;
font-style: italic;
position: relative
}
.page-project .project-list-row .project-list-cont .project-list .list-item .title>span {
position: relative
}
.page-project .project-list-row .project-list-cont .project-list .list-item .title>span>span.new {
right: -14px
}
.page-project .project-list-row .project-list-cont .project-list .list-item .title .client {
right: 0;
font-style: normal;
position: absolute;
margin-bottom: 5px;
font-size: 17px
}
@media screen and (max-width: 767px) {
.page-project .project-list-row .project-list-cont .project-list .list-item .title {
font-size: 16px;
padding: 0 10px 5px 5px;
margin-bottom: 10px;
border-bottom: solid 1px #000
}
.page-project .project-list-row .project-list-cont .project-list .list-item .title .client {
font-size: 12px;
top: 3px
}
}
.page-project .project-list-row .project-list-cont .project-list .list-item .thumb {
width: 70%;
flex: 0 0 auto
}
.page-project .project-list-row .project-list-cont .project-list .list-item .thumb img {
border-radius: 10px
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.page-project .project-list-row .project-list-cont .project-list .list-item .thumb {
width: 65%
}
}
@media screen and (max-width: 767px) {
.page-project .project-list-row .project-list-cont .project-list .list-item .thumb {
width: 100%
}
}
.page-project .project-list-row .project-list-cont .project-list .list-item .btn-wrap {
display: flex;
align-items: end;
width: 30%;
flex: 0 0 auto;
font-size: 18px;
font-weight: 500;
justify-content: right;
margin-bottom: 10px
}
.page-project .project-list-row .project-list-cont .project-list .list-item .btn-wrap a {
display: flex;
align-items: end;
justify-content: right;
font-weight: 700
}
.page-project .project-list-row .project-list-cont .project-list .list-item .btn-wrap p {
border-bottom: solid 1px #000;
display: inline-block
}
.page-project .project-list-row .project-list-cont .project-list .list-item .btn-wrap span {
font-size: 24px;
display: inline-block;
margin-right: 8px;
position: relative;
top: 5px
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.page-project .project-list-row .project-list-cont .project-list .list-item .btn-wrap {
font-size: 16px;
width: 35%
}
.page-project .project-list-row .project-list-cont .project-list .list-item .btn-wrap span {
font-size: 20px
}
}
@media screen and (max-width: 767px) {
.page-project .project-list-row .project-list-cont .project-list .list-item .btn-wrap {
width: 100%;
font-size: 12px
}
.page-project .project-list-row .project-list-cont .project-list .list-item .btn-wrap span {
font-size: 18px
}
}
.page-project .project-list-row .project-list-cont .project-list .list-item .btn-wrap.project-single-btn {
margin-bottom: -8px
}
.page-project .project-list-row .project-list-cont .project-list .list-item .btn-wrap.project-single-btn .detail-menu {
margin-top: 10px;
width: 100%;
display: flex;
flex-wrap: wrap
}
.page-project .project-list-row .project-list-cont .project-list .list-item .btn-wrap.project-single-btn .detail-menu.single li:first-child a {
font-weight: 700
}
.page-project .project-list-row .project-list-cont .project-list .list-item .btn-wrap.project-single-btn .detail-menu li {
flex: 0 0 auto;
width: 100%
}
.page-project .project-list-row .project-list-cont .project-list .list-item .btn-wrap.project-single-btn .detail-menu li a {
justify-content: left;
padding-left: 50px;
font-weight: 500
}
@media screen and (max-width: 767px) {
.page-project .project-list-row .project-list-cont .project-list .list-item .btn-wrap.project-single-btn .detail-menu li {
width: 50%;
padding-right: 10px
}
.page-project .project-list-row .project-list-cont .project-list .list-item .btn-wrap.project-single-btn .detail-menu li a {
padding-left: 0
}
}
.page-project .project-list-row .project-list-cont .project-list .list-item .btn-wrap .detail-menu li {
font-size: 16px;
width: 100%;
flex: 0 0 auto;
margin-bottom: 8px;
font-weight: 500;
color: #000;
cursor: pointer
}
.page-project .project-list-row .project-list-cont .project-list .list-item .btn-wrap .detail-menu li.active a {
font-weight: 700
}
@media screen and (max-width: 767px) {
.page-project .project-list-row .project-list-cont .project-list .list-item .btn-wrap .detail-menu li {
font-size: 14px
}
}
.page-project.page-detail .project-list-cont .project-list .list-item {
padding-bottom: 40px;
border-bottom: dotted 3px #000
}
@media screen and (max-width: 767px) {
.page-project.page-detail .project-list-cont .project-list .list-item {
padding-bottom: 10px;
border-bottom: dotted 2px #000
}
}
.page-project.page-detail .detail-wrap {
margin-top: 50px
}
.page-project.page-detail .detail-wrap .video-text {
margin-top: 40px;
line-height: 1.5
}
.page-project.page-detail .detail-wrap .interview {
line-height: 1.5
}
@media screen and (max-width: 767px) {
.page-project.page-detail .detail-wrap {
margin-top: 20px
}
.page-project.page-detail .detail-wrap .video-text, .page-project.page-detail .detail-wrap .interview {
font-size: 14px
}
}
.page-project.page-detail .detail-wrap .credit .credit-wrap {
display: flex
}
.page-project.page-detail .detail-wrap .credit .credit-wrap .credit-col {
margin-right: 25px;
line-height: 1.5;
font-size: 14px
}
@media screen and (max-width: 767px) {
.page-project.page-detail .detail-wrap .credit .credit-wrap {
flex-wrap: wrap
}
.page-project.page-detail .detail-wrap .credit .credit-wrap .credit-col {
flex: 0 0 auto;
width: 100%;
font-size: 12px
}
}
.page-project.page-detail .detail-wrap .swiper-container {
overflow: hidden;
position: relative
}
.page-project.page-detail .detail-wrap .swiper-container .swiper-wrapper {
height: 30vw;
max-height: 500px
}
@media screen and (max-width: 767px) {
.page-project.page-detail .detail-wrap .swiper-container .swiper-wrapper {
height: 50vw
}
}
.page-project.page-detail .detail-wrap .swiper-container .swiper-wrapper .swiper-slide {
background-size: contain;
background-repeat: no-repeat;
background-position: center top
}
.page-project.page-detail .detail-wrap .swiper-container .swiper-button-prev:after, .page-project.page-detail .detail-wrap .swiper-container .swiper-button-next:after {
content: '';
width: 32px;
height: 32px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-image: url(../images/swiper_arrow_right.png)
}
@media screen and (max-width: 767px) {
.page-project.page-detail .detail-wrap .swiper-container .swiper-button-prev:after, .page-project.page-detail .detail-wrap .swiper-container .swiper-button-next:after {
width: 20px;
height: 20px
}
}
.page-project.page-detail .detail-wrap .swiper-container .swiper-button-prev:after {
background-image: url(../images/swiper_arrow_left.png)
}
.page-project.page-detail .detail-wrap .swiper-container .swiper-button-next {
right: 15px;
margin-top: -48px
}
@media screen and (max-width: 767px) {
.page-project.page-detail .detail-wrap .swiper-container .swiper-button-next {
right: 0;
margin-top: -50px
}
}
.page-project.page-detail .detail-wrap .swiper-container .swiper-button-prev {
left: 15px;
margin-top: -48px
}
@media screen and (max-width: 767px) {
.page-project.page-detail .detail-wrap .swiper-container .swiper-button-prev {
left: 0;
margin-top: -50px
}
}
.page-project.page-detail .detail-wrap .swiper-container .swiper-pagination {
position: relative;
margin-top: 20px
}
.page-project.page-detail .detail-wrap .swiper-container .swiper-pagination .swiper-pagination-bullet {
background: #fff;
opacity: 1
}
.page-project.page-detail .detail-wrap .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
background: #5c5951
}
.page-project.page-detail .detail-wrap .swiper-text-content {
margin-top: 30px
}
.page-project.page-detail .detail-wrap .page-navi {
display: flex;
justify-content: space-between;
margin-top: 100px
}
.page-project.page-detail .detail-wrap .page-navi .next {
margin-left: auto
}
.page-project.page-detail .detail-wrap .page-navi .next .arrow {
text-align: right
}
.page-project.page-detail .detail-wrap .page-navi .prev {
margin-right: auto
}
.page-project.page-detail .detail-wrap .page-navi>div {
cursor: pointer
}
.page-project.page-detail .detail-wrap .page-navi .hide {
opacity: 0;
pointer-events: none
}
.page-project.page-detail .detail-wrap .page-navi .arrow {
font-size: 60px
}
.page-project.page-detail .detail-wrap .page-navi .title {
margin-top: -5px;
font-size: 14px;
font-weight: 600
}
@media screen and (max-width: 767px) {
.page-project.page-detail .detail-wrap .page-navi {
margin-top: 50px
}
.page-project.page-detail .detail-wrap .page-navi .title {
display: none
}
.page-project.page-detail .detail-wrap .page-navi>div {
display: flex;
flex-direction: row-reverse;
align-items: center
}
.page-project.page-detail .detail-wrap .page-navi>div.prev {
flex-direction: row
}
.page-project.page-detail .detail-wrap .page-navi .arrow {
font-size: 25px;
flex: 0 0 auto;
margin-top: 3px
}
.page-project.page-detail .detail-wrap .page-navi .title {
font-size: 12px;
flex: 0 0 auto;
margin: 0 8px
}
}
.page-creators {
background: white !important;
background-size: 100%;
/* background-image: url(https://azikazinmagicworld.com/wp-content/uploads/2024/01/IMG_8152.png);
background-attachment: fixed;
*/
position: relative;
}
@media screen and (min-width:1024px) {
.page-creators {
flex: 1;
/* 남은 공간을 모두 차지함 */
}
}
@media screen and (max-width: 767px) {
.page-creators h1 {
font-size: 20px !important;
}
}
.page-creators:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
background-image: url(../images/creators_character.png);
background-size: 10%;
background-position: 97% 97%;
filter: grayscale(1);
-webkit-filter: grayscale(1);
background-repeat: no-repeat;
pointer-events: none;
z-index: 0
}
@media screen and (max-width: 767px) {
.page-creators:after {
background-size: 20%;
filter: grayscale(1);
-webkit-filter: grayscale(1);
background-position: calc(90%) calc(100% - 30px);
}
}
@media screen and (max-width: 1024px) {
.page-creators .col-md-4 {
display: none;
}
}
.page-creators .creators-container {
/* background: #f0f0f0 */
/* background: #f0f0f096; */
max-width: 100%;
padding-bottom:150px;
}
.page-creators .creators-container .fixed-content {
position: relative;
padding-bottom: 40px;
background-color: #f0f0f0;
justify-content: center
}
@media screen and (max-width: 767px) {
.page-creators .creators-container .fixed-content {
font-size: 16px;
line-height: 2.0
}
}
.page-creators .creators-container .fixed-content:after {
content: '';
background-image: url(../images/creators_bar.png);
background-repeat: no-repeat;
pointer-events: none;
background-size: contain;
background-position: center bottom;
bottom: 0;
left: 0;
right: 0;
position: absolute;
height: 50px
}
@media screen and (max-width: 767px) {
.page-creators .creators-container .fixed-content:after {
display: none
}
}
@media screen and (max-width: 767px) {
.page-creators .creators-container .fixed-content {
margin: 0 -37.5px;
padding: 20px 12.5px 30px;
border-bottom: solid 2px #000
}
.page-creators .creators-container .fixed-content * {
font-size: 16px !important;
line-height: 2.0
}
}
.page-creators .creators-container .info {
min-height: 48vh;
height: auto;
background-color: #f0f0f0;
background-image: url(../images/creators_info_bg.png);
background-size: 60%;
background-repeat: no-repeat;
background-position: 50px 130px;
justify-content: right;
align-items: end;
position: relative
}
.page-creators .creators-container .info .title {
font-size: 16px;
color: #4a4a4a;
font-weight: 900;
margin-bottom: 20px;
margin-left: 30px
}
.page-creators .creators-container .info .link {
margin-bottom: 90px;
margin-left: 30px
}
.page-creators .creators-container .info .link li {
font-weight: 900;
margin-bottom: 6px;
color: #9b9b9b;
position: relative
}
.page-creators .creators-container .info .link li .icon {
width: 13px;
position: absolute;
top: 2px;
margin-left: 8px
}
.page-creators .creators-container .info .link li .icon.mail {
width: 25px;
top: -5px;
margin-left: 3px
}
@media screen and (max-width: 767px) {
.page-creators .creators-container .info {
background-image: url(../images/creators_info_bg_mo2.png);
background-size: contain;
background-position: center 110px;
margin-left: -25px;
margin-right: -25px;
min-height: 410px
}
.page-creators .creators-container .info .title {
margin-left: 12.5px;
font-size: 14px;
margin-bottom: 15px
}
.page-creators .creators-container .info .link {
margin-left: 12.5px;
margin-bottom: 20px;
font-size: 14px
}
}
.page-creators .creators-container .content-wrap {
justify-content: center;
padding-top: 4%;
flex-direction: row;
}
@media screen and (max-width: 1024px) {
.page-creators .creators-container .content-wrap {
/* flex-direction: column-reverse;
*/
}
}
.page-creators .creators-container .content-wrap .content-container .content {
margin-top: 75px;
margin-bottom: 35px;
line-height: 1.5
}
.page-creators .creators-container .content-wrap .content-container .content .creators-item {
margin-bottom: 35px;
/* padding-bottom: 50px;
border-bottom: solid 1px #000 */
}
.page-creators .creators-container .content-wrap .content-container .content .creators-item:last-of-type {
border-bottom: none
}
.page-works img, .single-work img,.page-creators .creators-container .content-wrap .content-container .content img {
max-width: 100%;
height: auto;
transition: filter 0.5s;
}
.fullwidthimage {
width:100% !important ;
image-rendering: pixelated;
}
.width50 {
width:45% !important ;
image-rendering: pixelated;
}
.nopaddingtop {
padding-top: 0px !important;
}
figure {
width:100% !important;
}
@media screen and (max-width: 767px) {
.page-creators .creators-container .content-wrap .content-container .content {
margin-left: -12.5px;
margin-right: -12.5px;
margin-top: 100px;
font-size: 16px;
line-height: 2.0
}
}
.page-creators .creators-container .content-wrap .page-navi, .page-creators .creators-container .content-wrap .wp-pagenavi {
display: flex;
justify-content: space-between;
margin-top: 100px;
margin-bottom: 50px
}
.page-creators .creators-container .content-wrap .page-navi .arrow, .page-creators .creators-container .content-wrap .wp-pagenavi .arrow, .page-creators .creators-container .content-wrap .page-navi .nextpostslink, .page-creators .creators-container .content-wrap .wp-pagenavi .nextpostslink, .page-creators .creators-container .content-wrap .page-navi .previouspostslink, .page-creators .creators-container .content-wrap .wp-pagenavi .previouspostslink {
font-size: 60px;
flex: 0 0 auto
}
.page-creators .creators-container .content-wrap .page-navi .nextpostslink, .page-creators .creators-container .content-wrap .wp-pagenavi .nextpostslink {
margin-left: auto;
text-align: right
}
.page-creators .creators-container .content-wrap .page-navi .previouspostslink, .page-creators .creators-container .content-wrap .wp-pagenavi .previouspostslink {
margin-right: auto
}
@media screen and (max-width: 767px) {
.page-creators .creators-container .content-wrap .page-navi, .page-creators .creators-container .content-wrap .wp-pagenavi {
margin-top: 50px;
margin-bottom: 160px
}
.page-creators .creators-container .content-wrap .page-navi .arrow, .page-creators .creators-container .content-wrap .wp-pagenavi .arrow, .page-creators .creators-container .content-wrap .page-navi .nextpostslink, .page-creators .creators-container .content-wrap .wp-pagenavi .nextpostslink, .page-creators .creators-container .content-wrap .page-navi .previouspostslink, .page-creators .creators-container .content-wrap .wp-pagenavi .previouspostslink {
font-size: 30px
}
}
.page-shop {
height: 100vh
}
@media screen and (max-width: 767px) {
.page-shop {
height: calc(100vh - 46px)
}
}
.page-shop .temp {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center
}
.page-shop .temp img {
max-width: 250px;
width: 15%;
height: auto
}
@media screen and (max-width: 767px) {
.page-shop .temp img {
width: 150px;
margin-top: 50px
}
}
.editorInfo {
display: flex;
align-items: center;
color: black;
margin-bottom:30px;
/* flex-direction: row-reverse;*/
}
.editorIcon {
overflow: hidden;
width: 10%;
}
.editorName {
margin-top: 10px;
/* rotate: 3deg; */
/* padding: 0 15px; */
margin-bottom: 18px;
font-size: 14px;
color: gray;
/* text-align: right; */
}
.div-round {
overflow: hidden;
position: relative;
z-index: 10;
-webkit-border-radius: 20px;
border-radius: 20px;
width:60vw;
height:30vw;
}
.creatorRight {
}
.creatorRight{
margin-top: 8%;
margin-left: 3%;
padding-bottom:30px;
}
@media (min-width: 768px) and (max-width: 1024px) {
.creatorLeft {
/* display: none;
*/
margin:0 0;
width:80%;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.creators-container {
max-width: 1024px !important;
}
}
@media (max-width: 1024px) {
.creatorRight {
width:100%;
}
}
ul.creators-list {
list-style: none;
padding: 0;
text-align: left;
}
ul.creators-list li {
margin-bottom: 10px;
}
.creators-list {
list-style: none;
padding: 0;
margin: 0;
}
.textsize12px {
font-size:12px;
}
.commentborder {
border-radius: 10px 10px 10px 10px !important;
}
.commentborder p{
color:#808080;
}
.creators-list .list-item {
background-color: #fff;
/* 흰색 배경 색상 */
/* border: 1px solid #ccc; */
/* 회색 테두리 색상 */
margin-bottom: 10px;
/* 리스트 간 간격 설정 */
padding: 10px;
/* 내부 여백 설정 */
transition: background-color 0.3s;
/* border-radius: 0 0 10px 10px; */
}
.music-content {
padding-top: 110px;
}
.music-content .creators-list .list-item {
/* box-shadow:2px 2px 0px 0px rgba(0, 0, 0, 0.8); */
/* position:relative; */
/* border-radius: 10px 10px 10px 10px; */
}
.music-content .creators-list .readinghere {
position: absolute;
width: 3.5vh;
left: 8px;
bottom: 13px;
display: none;
}
.creators-list .list-item a {
text-decoration: none;
color: #333;
/* 링크 텍스트 색상 */
display: block;
}
.creators-list .list-item:hover {
background-color: #f5f5f5;
/* 마우스 호버 시 배경 색상 변경 */
}
.creators-list .list-item + .list-item {
/* border-top: 1px solid #ccc; */
/* 리스트 간 회색 선 추가 */
margin-top: 10px;
/* 리스트 간 간격 설정 */
}
.creators-list .new {
background-color: #ff0000;
/* 새로운 항목을 나타내는 빨간색 마크의 배경색상 */
color: #fff;
/* 새로운 항목의 텍스트 색상 */
padding: 3px 5px;
margin-left: 5px;
/* 마크와 텍스트 사이 여백 설정 */
}
.creators-list .list-item.bold {
font-weight: bold;
}
.diary-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 0 auto;
max-width: 1660px;
/* 중앙 정렬 및 최대 너비 설정 */
}
.diary-container.pc {
padding-bottom:30px;
}
.diary-container .col-md-3 {
width: calc(25% - 30px);
/* 4개의 상자가 한 줄에 들어가도록 너비 설정 */
margin: 0 15px 30px;
/* 아래쪽 여백 설정 */
}
.diary-container .col-md-2 {
width: calc(20% - 30px);
/* 4개의 상자가 한 줄에 들어가도록 너비 설정 */
margin: 0 15px 30px;
/* 아래쪽 여백 설정 */
}
.diary-container .list-item {
border-radius: 0 0 2px 2px;
/* 테두리의 둥글기 설정 */
overflow: hidden;
/* 내부 내용이 넘칠 때 가려지도록 설정 */
border: 1px solid #ccc;
background-color: #ffffff;
/* 배경색 설정 */
opacity: 0;
transition: background-color 0.3s; /* 배경색 변경에 부드러운 전환 효과 추가 */
}
.diary-container .list-item:hover {
background-color: #f0f0f0;
/* hover 시 list-item의 배경색 변경 */
}
.diary-container .list-item:hover .content {
background-color: #f0f0f0;
/* hover 시 content의 배경색도 변경 */
}
.diary-container .list-item a {
display: flex;
/* 링크 요소를 Flex 컨테이너로 설정하여 내부 아이템을 가로 정렬 */
text-decoration: none;
/* 링크에 밑줄 제거 */
flex-direction: column;
/* 내부 아이템을 세로로 쌓도록 설정 */
height: 380px;
/* 최소한의 높이를 유지하여 박스가 일정한 높이를 가지도록 함 */
}
.diary-container .list-item .content {
padding: 20px;
/* 내부 여백 설정 */
background-color: #ffffff;
/* 기본 배경색 설정 */
transition: background-color 0.3s;
}
.diary-container .list-item .content .category {
font-size: 12px;
/* 카테고리 글꼴 크기 설정 */
margin-bottom: 5px;
/* 아래쪽 간격 설정 */
color: #0073aa;
/* 카테고리 글꼴 색상 설정 */
text-transform: uppercase;
/* 카테고리 글자를 대문자로 변환 */
}
.diary-container .list-item .content .client {
font-size: 12px;
/* 카테고리 글꼴 크기 설정 */
margin-bottom: 5px;
/* 아래쪽 간격 설정 */
color: #0073aa;
/* 카테고리 글꼴 색상 설정 */
}
.diary-container .list-item .content .title {
font-size: 12px;
/* 제목 글꼴 크기 설정 */
margin-bottom: 5px;
/* 아래쪽 간격 설정 */
font-weight: bold;
/* 제목 글꼴을 볼드체로 설정 */
letter-spacing:-0.04em;
}
.diary-container .list-item .content .date {
font-size: 10px;
/* 날짜 글꼴 크기 설정 */
color: #999;
/* 날짜 글꼴 색상 설정 */
}
.diary-container .list-item .image {
overflow: visible;
/* 이미지가 넘치는 경우 가려지도록 설정 */
text-align: center;
/* 이미지를 가운데로 정렬 */
height: 200px;
/* 이미지의 기본 높이 설정 */
}
.diary-container .list-item .image img {
width: 100% !important;
/* 이미지의 너비 자동 설정 */
height: 100%!important;
/* 이미지의 높이를 100%로 설정하여 상자에 꽉 차도록 함 */
object-fit: cover !important;
/* 이미지 비율을 유지하면서 상자에 맞게 설정 */
}
.diary-container .content .excerpt {
font-size:10px;
margin-bottom: 5px;
letter-spacing: -0.05em;
/* 아래쪽 간격 설정 */
}
@media screen and (max-width: 1024px) {
.pc {
display: none;
}
.diary-container .list-item {
max-width: 480px;
}
}
@media screen and (max-width: 1024px) {
.instagram-media {
display: none !important;
}
}
@media screen and (min-width: 1025px) {
.mobile {
display: none;
}
}
.diary-more {
padding-top: 140px;
padding-bottom:30px;
font-size: 18px;
text-align: center;
}
.diary-more-all {
padding-top: 80px;
padding-bottom:30px;
font-size: 18px;
text-align: center;
}
.diary-container::before {
content: '';
display: block;
width: 100%;
height: 1px;
/* 선의 두께를 조절할 수 있습니다 */
background-color: gray;
/* 선의 색상을 조절할 수 있습니다 */
margin: 0px auto 40px;
/* 상단 여백을 조절하고 중앙 정렬합니다 */
}
.diary-more-footer {
padding-bottom:0px;
}
/* Load More */
.LoadMoreflex {
}
@media screen and (max-width:1024px){
.LoadMorecontent {
display: none;
}
}
#loadMore {
width: 200px;
color: #fff;
display: block;
text-align: center;
margin: 20px auto;
padding: 10px;
border-radius: 10px;
border: 1px solid transparent;
background-color: blue;
transition: .3s;
display:none;
}
@media screen and (max-width:1024px){
#loadMore {
width: 200px;
color: #fff;
display: block;
text-align: center;
margin: 20px auto;
padding: 10px;
border-radius: 10px;
border: 1px solid transparent;
background-color: black;
transition: .3s;
}
}
#loadMore:hover {
color: blue;
background-color: #fff;
border: 1px solid blue;
text-decoration: none;
}
.noContent {
color: #000 !important;
background-color: transparent !important;
pointer-events: none;
}
.creators-container .diagonal-line {
width: 100%;
border-bottom: 1px solid #8080807d;
margin-bottom: 36px;
}
.diagonal-line-2 {
width: 100%;
border-bottom: 1px solid #8080807d;
}
.page-works img:hover, .single-work img:hover, .page-creators .creators-container .content-wrap .content-container .content img:hover {
filter: brightness(115%);
/* 밝기를 150%로 조정하여 밝게 만듭니다. */
}
header .menu-navi .menu-list .menu-item:hover {
filter: invert(80%);
/* 밝기를 150%로 조정하여 밝게 만듭니다. */
}
header .menu-navi .menu-list .menu-item li:hover {
filter: blur(10px);
/* 밝기를 150%로 조정하여 밝게 만듭니다. */
}
header .top-bar .logo:hover {
filter: brightness(115%);
}
header .top-bar .lang-navi .lang-list .lang-item img:hover{
filter: brightness(115%);
}
.page-stories .container div {
transition: filter 0.2s ease-in-out;
}
.page-stories .container div:hover {
filter: brightness(115%);
animation: wiggle 0.5s ease-in-out infinite alternate;
}
@keyframes wiggle {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
75% {
transform: rotate(2deg);
}
100% {
transform: rotate(0deg);
}
}
.page-music .music-item div {
transition: filter 0.2s ease-in-out;
}
.page-music .music-item div:hover {
filter: brightness(115%);
animation: wiggle 0.5s ease-in-out infinite alternate;
}
.music-list-swiper a img {
transition: filter 0.2s ease-in-out;
}
.music-list-swiper a img:hover {
filter: brightness(115%);
animation: wiggle 0.5s ease-in-out infinite alternate;
}
.page-works p span, .single-work p span,.content p span{
opacity:0; /*로드 문제로 opacity 조정*/
}
.page-works img, .single-work img,.content img {
opacity:0;
}
iframe {
opacity:0;
border-radius: 3px !important;
margin-bottom:15px;
/* transition: filter 0.2s ease-in-out; */
}
iframe:hover {
/* filter: brightness(115%); */
}
.stories-list .active img {
animation: flicker 1s linear infinite alternate ease-in-out;
/* 반짝이는 애니메이션 적용 */
filter: brightness(110%);
/* 초기 상태는 110% 밝기로 설정 */
}
@keyframes flicker {
0% {
filter: brightness(120%);
/* 시작 시 110% 밝기 */
}
100% {
filter: brightness(100%);
/* 끝 시 100% 밝기 */
}
}
.main-image {
opacity: 1;
transition: opacity 0.4s ease;
}
.main-image.hidden {
opacity: 0;
transition: opacity 0.4s ease;
background-color: rgb(48, 162, 242);
}
.menu-item a {
/* pointer-events: none; */
/* font-family: 'PixelFont'; */
}
.creators-list .active{
font-weight: bolder;
background-color: #e6e6e6;
}
.pc iframe{
border-radius:15px !important;
opacity:1 !important;
}
.pc iframe:hover {
}
.page-music.page-detail .music-content .content-container .side-navi {
/* background-color: #f2f2f2; 배경색 */
padding: 20px; /* 패딩 설정 */
display: flex; /* 플렉스 레이아웃 사용 */
flex-wrap: wrap-reverse; /* 줄 바꿈 방식 설정 */
}
.page-music.page-detail .music-content .content-container .side-navi .list-item {
margin-right: 15px; /* 각 아이템 사이의 오른쪽 여백 설정 */
margin-bottom: 15px; /* 각 아이템 사이의 아래 여백 설정 */
}
.page-music.page-detail .music-content .content-container .side-navi .list-item a {
text-decoration: none; /* 링크 밑줄 제거 */
color: #333; /* 텍스트 색상 설정 */
font-size: 16px; /* 폰트 크기 설정 */
}
.page-music.page-detail .music-content .content-container .side-navi .list-item a:hover {
color: #007bff; /* 호버시 텍스트 색상 변경 */
}
.page-music.page-detail .music-content .content-container .side-navi .parent-title {
font-size: 12px; /* 부모 포스트 제목 폰트 크기 설정 */
color: #666; /* 부모 포스트 제목 색상 설정 */
margin-bottom: 5px; /* 부모 포스트 제목과 자식 포스트 제목 사이 여백 설정 */
}
.stories-content .swiper-wrapper {
/* width: 65% !important; */
}
.page-stories{
min-height:100vh;
}
@media screen and (max-width: 767px){
.page-music .container {
padding-left: 25px;
padding-right: 25px;
overflow-x: scroll;
}
}
@media screen and (max-width: 767px) {
.page-music .container .music-list {
width:250%;
flex-wrap: nowrap;
margin: 0 -5px;
justify-content: left !important;
padding-bottom: 10px;
padding-top:110px;
}
}
@media screen and (max-width: 767px) {
.stories-list :first-child {
margin-right:7px;
}
}
.image {
position: relative;
}
.image .frame {
position: absolute;
top: 0;
left: 0;
z-index: 1;
box-shadow: 5px 5px 0px 0px rgba(0, 0, 255, 0.8);
}
.image .max {
z-index: 2;
}
.music-item .image .frame {
box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.8);
display: none;
}
.readinghere {
visibility: hidden;
}
.active .readinghere {
visibility: visible;
box-shadow: none !important;
}
@font-face {
font-family: 'PixelFont';
src:url('/wp-content/themes/azikazin/assets/font/PixelFont.ttf') format('woff');
font-weight: 400;
}
@font-face {
font-family: 'Moneygraphy-Pixel';
src:url('/wp-content/themes/azikazin/assets/font/Moneygraphy-Pixel.otf') format('woff');
font-weight: 400;
}
.info, .postdate {
font-family: 'PixelFont';
}
@font-face {
font-family: 'FFVII';
src:url('https://file.notion.so/f/f/bba3d030-290e-48aa-83de-08f5763b2536/4e2d0026-d4b2-4172-8e36-21883ef7829f/FFVII.ttf?id=63b8b3f6-0f17-4e59-9a5a-115847068b94&table=block&spaceId=bba3d030-290e-48aa-83de-08f5763b2536&expirationTimestamp=1710352800000&signature=XNf7p2t24CnxYyMjQVoqaqd-8O4ye5bCMzn8b5xaosw&downloadName=FFVII.ttf');
font-weight: 400;
}
.chat-bubble {
font-size: 12px;
}
.chat-bubble-end {
font-size: 12px;
padding: 0px 15px;
}
.chat-bubble-opacity {
font-size: 12px;
opacity: 0; /* 초기에는 요소가 투명하도록 설정 */
transition: opacity 0.5s ease; /* 투명도 변화를 부드럽게 만들기 위한 transition 추가 */
}
.chat-bubble-opacity.visible {
opacity: 1; /* 스크롤이 위로 올라갈 때 투명도가 1이 되도록 설정 */
}
.chatcontainer {
display:flex;
padding:7.5px 10px;
margin:10px 0px;
}
.chatcontainer-column {
display:flex;
display: flex;
align-items: center;
flex-direction: column;
}
.chatcontainer-end {
display: flex;
justify-content: end;
}
.membericon-container{
min-width: 120px;
margin-right: 20px;
padding-left: 20px;
display: flex;
align-items: center;
}
.page-works img, .single-work img,.content-wrap .content img {
transition: filter 0.5s;
}
.page-works img:hover, .single-work img:hover, .content-wrap .content img:hover {
filter: brightness(115%);
/* 밝기를 150%로 조정하여 밝게 만듭니다. */
}
.wp-caption-text {
text-align: center;
color:#808080;
font-size:13px;
padding-bottom:30px;
}
.creators-albumcover{
border-radius: 3px;
opacity: 0;
box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.8);
rotate: -3deg;
}
.creators-cd{
rotate: 3deg;
opacity: 1;
z-index: 1;
position: absolute;
bottom: 0;
right: 15px;
width: 20%;
}
.pixelfont {
font-family: 'PixelFont';
src:url('/wp-content/themes/azikazin/assets/font/PixelFont.ttf') format('woff');
}
.img_table td {
line-height: 0;
}
.comment-notes, .comment-form-author, .comment-form-email, .comment-form-url {display:none};
.required-field-message{ font-size: 12px;
margin-top: 15px;
color: #9E9E9E;}
.comment-list .children {
display: flex;
flex-direction: column;
}
.comment-list .children > li {
width: 90%;
margin-left: auto; /* 자식 요소를 오른쪽에 배치합니다. */
}
.viewallnewsbutton {
border-radius: 20px;
color: white;
background-color: #30a2f2;
padding: 12px;
font-size: 14px;
}
.comment .comment-text {
line-break: anywhere;
}
.comment .comment-text a {
color:#007bff
}
.creator-list-comments {
font-size: 10px;
color: #808080;
margin-top: 6px;
}
.comment-list .children > li {
border-radius: 35px 0 10px 10px !important;
}
/* PC (기본 상태) */
@media screen and (min-width: 768px) {
.hidden-desktop {
display: none !important; /* 모바일용 iframe 숨김 */
}
}
/* 모바일 */
@media screen and (max-width: 767px) {
.hidden-mobile {
display: none !important; /* PC용 iframe 숨김 */
}
img {
filter: brightness(100%) !important;
}
}
.wavy-line {
margin: 30px 0px;
width: 100%; /* 가로로 100% 맞춤 */
height: 20px; /* 물결 모양의 높이 설정 */
background: url('data:image/svg+xml;utf8,');
background-size: 100px 20px; /* 물결 모양의 반복 주기 설정 */
background-repeat: repeat-x; /* 가로 방향으로 반복 */
}
.wavy-line-2 {
margin: 30px 0px;
width: 100%;
height: 54px;
background: url('data:image/svg+xml;utf8,');
background-size: 7px 29px;
background-repeat: repeat-x;
}
.wavy-line-3 {
margin: 30px 0px;
width: 100%;
height: 24px;
background: url('data:image/svg+xml;utf8,');
background-size: 7px 29px;
background-repeat: repeat-x;
}
iframe#gameFrame,
#mobileGameImage,
#pcGameImage {
border-radius: 30px !important;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.product-item {
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
transition: box-shadow 0.3s ease;
}
.product-item:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.product-image img {
width: 100%;
height: auto;
display: block;
}
.product-content {
padding: 15px;
text-align: center;
}
.product-title {
font-size: 16px;
margin-bottom: 8px;
font-weight: bold;
}
.product-price {
color: #0073aa;
font-size: 14px;
}
.excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 최대 줄 수 설정 */
overflow: hidden;
text-overflow: ellipsis;
/* 선택사항: 두 줄 이상일 때 "···" 대신 ... 표시 */
white-space: normal;
}
.submit {
background-color: #30a2f2 !important;
color: white !important;
border: none !important;
border-radius: 20px !important;
padding: 10px 20px !important;
cursor: pointer !important;
margin-top: 15px !important;
}
#sparkle-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.sparkle {
position: absolute;
width: 10px;
height: 10px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: sparkle-animation 2s ease-in-out;
}
@keyframes sparkle-animation {
0% {
transform: scale(0.5);
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
.page-works ul.creators-list {
text-align: left;
}
.page-works .works-list .list-item {
font-size:14px;
border-bottom: 1px dotted #333333;
padding-bottom: 5px;
margin-bottom: 5px;
}
.worksLeft{
margin-top: 8%;
margin-right: 11%;
padding-bottom: 30px;
width: 20%;
}
.page-works {
background: white;
background-size: 100%;
}
@media screen and (min-width:1024px) {
.page-works {
flex: 1;
/* 남은 공간을 모두 차지함 */
}
}
@media (max-width: 1024px) {
.col-md-6 {
width:100%
}
}
.comment-form-wrapper.typesquare_tags {
margin-top:30px !important;
}
@media screen and (max-width: 767px) {
.content iframe[src*="instagram"]{
height: revert-layer !important;
}
}
.fp-watermark {
display: none;
}
@media screen and (max-width: 1024px){
header .menu-navi .menu-list .menu-item.pc {
display:none
}
}
@media screen and (min-width: 1025px) {
#fullpage .fp-table {
margin-top: 0;
}
}
#fp-nav ul {
display: none;
}
.list_title {
font-size:12px;
margin-top:5px;
line-height: 18px;
}
.page-music .creators-list{
text-align: left;
}
#reply-title {
font-size: 12px;
margin-bottom: 15px;
}
.latestnews{
font-size:18px;
display: inline-block;
transform: scaleX(1.1);
transform-origin: left center;
}
@media screen and (max-width: 768px){
.latestnews{
font-size:14px;
display: inline-block;
transform: scaleX(1.1);
transform-origin: left center;
}
.side-navi-wrap {
overflow-x: hidden !important;
overflow-y: hidden !important;
overflow: hidden !important;
}
}
.sticky-inner {
position: -webkit-sticky;
position: sticky;
top: 13%;
max-height: calc(100vh - 106px); /* 상단 간격 반영 */
overflow-y: auto;
z-index: 10;
}
@media screen and (min-width: 1025px){.page-music {
overflow:initial
}}
@media screen and (max-width: 768px){
#comments {
margin: -10px -10px !important
}
}
/* 기본 스타일 (PC) */
.conversation {
display: flex;
align-items: flex-start;
margin-bottom: 2em;
}
.conversation-speaker {
/*font-weight: bold;*/
padding-right: 1em;
border-right: 1px solid #ccc;
margin-right: 1em;
min-width: 146px;
align-self: stretch;
}
.conversation-content {
flex: 1;
font-size: 16px;
letter-spacing: 0.2px;
}
/* 대화창 내부 텍스트 및 하위 태그 줄간격 통일 */
.conversation-content {
line-height: 2.0 !important; /* 전체 기본 줄간격 설정 */
}
/* p 태그 및 div 태그의 문단 간격 강제 고정 */
.conversation-content p,
.conversation-content div,
.conversation-content .typesquare_tags {
line-height: inherit !important;
margin-top: 0 !important;
margin-bottom: 0px !important; /* 문단 사이의 여백 (필요에 따라 픽셀 조절) */
}
/* 연속된 Shift+Enter 또는 Enter로 생성된 빈 문단 숨김 처리 */
.conversation-content p:empty,
.conversation-content div:empty {
display: none !important;
}
/* PC에서 이름 숨김 (이미지가 있는 경우) */
.conversation-speaker .speaker-name {
display: inline;
}
/* 이미지가 없는 경우엔 이름 텍스트 표시 */
.conversation-speaker .speaker-name.text-only {
display: inline;
}
/* 모바일 스타일 */
@media (max-width: 768px) {
.conversation {
display: block;
}
.conversation-speaker {
display: inline;
font-weight: bold;
padding-right: 0;
border-right: none;
margin-right: 0.5em;
}
.conversation-speaker .speaker-image {
display: none; /* 모바일에서 이미지 숨김 */
}
.conversation-speaker .speaker-name {
display: inline; /* 모바일에서 이름 표시 */
}
.conversation-content {
display: inline;
}
.conversation-speaker::after {
content: ": "; /* 이름 뒤에 ": " 추가 */
}
}
h4 {
font-size:18px;
margin-bottom: 30px;
font-weight: normal;
}
@media (max-width: 768px) {
h4 {
font-size:16px;
margin-bottom: 20px;
}
}
h5 {
font-family: 'HakgyoansimBareondotumB';
letter-spacing: 1.5px;
font-size: 24px !important;
}
h6 {
font-family: 'HakgyoansimBareondotumB' !important;
}
.conversation-content p {
line-height: 1;
}
ul.series-list {
list-style: none;
padding-top:30px;
text-align: left;
}
ul.series-list li {
margin-bottom: 10px;
}
.series-list {
list-style: none;
margin: 0;
}
.series-list .list-item {
background-color: transparent !important;
border-bottom: 1px solid #ccc !important;
margin-bottom: -35px !important;
padding: 10px !important;
}
.series-list .list-item a {
display: block !important;
text-decoration: none;
}
.series-list .list_title {
color: dimgray;
display: block !important;
width: 100% !important; /* 상위 요소의 전체 너비를 차지 */
transition: color 0.5s;
}
.series-list .list-item:not(:first-child) {
transform: translateY(-30px);
}
.series-list .list-item:first-child {
margin-top: 30px !important;
}
.series-list .list-item:hover .list_title {
color: dodgerblue; /* hover 시 색상 변경 */
}
.hidden {
display: none;
}
.diary-container-works .list-item a, .diary-container .list-item a {
padding: 0px 0px 5px 0px;
}
@media (max-width: 1024px) {
/* 모바일에서 li나 a에 width:100%를 강제 */
.diary-container-works .mobile .creators-list .list-item,
.diary-container-works .mobile .creators-list .list-item a {
display: block; /* 혹은 inline-block */
width: 100% !important;
box-sizing: border-box; /* padding 포함해서 100% */
margin: 0;
padding: 0;
height:40px;
}
}
@media screen and (max-width: 1024px) {
.diary-container-works .list-item {
display:block;
max-width:none;
}
}
.diary-container-works .creator-list-comments {
margin-bottom: -6px;
}
a {
word-wrap: break-word;
}
p.center-inline-images {
display: flex;
justify-content: center;
gap: 10px;
}
.center-inline-images img {
display: block;
}