@charset "utf-8";

/* reset css */
@import url(./images/reset.css);

/* 웹폰트 */
@import url(//fonts.googleapis.com/css?family=Meddon);
@import url(//fonts.googleapis.com/earlyaccess/jejugothic.css);

:root {
    --fontK: 'Jeju Gothic';
    --fontN: 'Calibri', 'Jeju Gothic';
}

/* 전체 폰트 */
html,
body,
th,
td,
input,
select,
textarea,
button,
body blockquote,
body blockquote p,
body figure figcaption,
code {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
    font-family: var(--fontK), sans-serif;
    font-size: 11px;
    line-height: 1.8;
    color: var(--text);
}

/* ================ 
 *
 *   기본 설정
 *
 * ================ */
/* 링크 */
a,
a:link {
    text-decoration: none;
    color: var(--text);
    transition: color .4s;
}

a:hover,
a:focus {
    color: var(--point2);
}

/* 입력창 폰트 색상 */
::-webkit-input-placeholder {
    color: var(--text);
}

:-moz-placeholder {
    color: var(--text);
}

:-ms-input-placeholder {
    color: var(--text);
}

::placeholder {
    color: var(--text);
}

/* 마우스 드래그 블럭 */
::selection {
    background-color: var(--box);
}

::-moz-selection {
    background-color: var(--box);
}

/* 스크롤바 */
::-webkit-scrollbar {
    width: 0;
    height: 5px;
    background-color: var(--point1);
}

::-webkit-scrollbar-thumb {
    background-color: var(--point2);
}

body {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: var(--bg);
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

/* ================ 
 *
 *   스킨 시작
 *
 * ================ */
#container {
    width: var(--width);
    max-width: 100%;
    max-height: 100%;
    position: relative;
    margin: auto;
    display: block;
}

body:not(.myo-theme-tamagotchi):not(.myo-theme-switch) #container {
    background-color: var(--box);
}

.screen {
    position: relative;
}

.screen__inner {
    overflow: hidden;
    position: relative;
}

.screen__inner .scroll {
    overflow: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body:not(.myo-theme-ipod) .wheel svg:not(.music),
body:not(.myo-theme-gameboy):not(.myo-theme-music) .blog-title,
body:not(.myo-theme-switch) .joycon__cross--right,
body:not(.myo-theme-music) .repeat,
body:not(.myo-theme-music) .random,
body:not(.myo-theme-music) .music,
body:not(.myo-theme-music) .blog-title .clock,
body:not(.myo-theme-music) .blog-title > div:first-child {
    display: none !important;
}

.wheel a {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}

body:not(.myo-theme-ipod) .center a {
    display: none;
}

/* ---------------
    테마 - 다마고치
--------------- */
.myo-theme-tamagotchi #container:before {
    content: "";
    display: block;
    padding-top: 120%;
}

.myo-theme-tamagotchi #container {
    position: relative;
    background: var(--box);
    border-radius: 54%/65% 65% 47% 47%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.myo-theme-tamagotchi:not(.border) #container .box {
    box-shadow: 10px 10px 40px -20px rgba(0, 0, 0, 0.4);
}

.myo-theme-tamagotchi .tamagotchi__inner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 54%/65% 65% 47% 47%;
    overflow: hidden;
}

.myo-theme-tamagotchi .tamagotchi__shadow {
    position: absolute;
    border-radius: 54%/65% 65% 47% 47%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    box-shadow: calc(var(--width) / 25.6) calc(var(--width) / 17) calc(var(--width) / 25.6) calc(var(--width) / 25.6) rgba(0, 0, 0, 0.13);
    filter: blur(calc(var(--width) / 51.2));
}

.myo-theme-tamagotchi .tamagotchi__highlight {
    position: absolute;
    width: 12%;
    height: 30%;
    border-radius: 90% 10% 10% 90%;
    background-color: var(--box);
    filter: brightness(1.15);
    transform: rotate(40deg);
    left: 12%;
}

.myo-theme-tamagotchi .loop,
.myo-theme-tamagotchi .etc {
    width: 10%;
    background-color: var(--box);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.myo-theme-tamagotchi .loop {
    z-index: -1;
}

.myo-theme-tamagotchi .loop:before,
.myo-theme-tamagotchi .etc:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.myo-theme-tamagotchi .etc:after {
    content: "";
    position: absolute;
    width: 50%;
    height: 50%;
    background-color: var(--bg);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(0, 0, 0, 0.05);
    box-shadow: -1px -1px 2px 2px rgba(255, 255, 255, 0.2);
}

.myo-theme-tamagotchi .screenbox {
    position: relative;
    width: 100%;
    height: 100%;
}

.myo-theme-tamagotchi .screen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
}

.myo-theme-tamagotchi .screen:before {
    content: '';
    display: block;
    padding-top: 100%;
}

.myo-theme-tamagotchi .screen__inner {
    background: var(--screen);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
    overflow: hidden;
    border-bottom: 2px solid rgba(15, 15, 15, 0.3);
    border-top: 2px solid rgba(15, 15, 15, 0.3);
    box-shadow: 0 1px 1px 1px rgba(253, 253, 253, 0.3);
}

.myo-theme-tamagotchi .screen__inner,
.myo-theme-tamagotchi .screen__inner:after {
    border-radius: 13px;
    z-index: 9999;
}

.myo-theme-tamagotchi .screen .crack {
    position: absolute;
    background-color: var(--point2);
    border-radius: 3px;
}

.myo-theme-tamagotchi .screen .crack:before,
.myo-theme-tamagotchi .screen .crack:after {
    content: "";
    position: absolute;
    background-color: var(--point2);
    border-radius: 3px;
}

.myo-theme-tamagotchi .screen .crack__line {
    width: 170%;
    height: 2px;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0.3;
    position: absolute;
    z-index: -1;
}

.myo-theme-tamagotchi .screen .crack--top {
    width: 55%;
    height: 40%;
    top: -10%;
    left: 15.5%;
    transform: rotate(14deg);
}

.myo-theme-tamagotchi .screen .crack--top:before {
    width: 70%;
    height: 96%;
    left: -35%;
    bottom: -30%;
    transform: rotate(-21deg);
}

.myo-theme-tamagotchi .screen .crack--top:after {
    width: 86%;
    height: 120%;
    right: -60%;
    top: -25%;
    transform: rotate(25deg);
}

.myo-theme-tamagotchi .screen .crack--right {
    width: 48%;
    height: 48%;
    right: -10%;
    bottom: 24%;
    transform: rotate(50deg);
}

.myo-theme-tamagotchi .screen .crack--right:before {
    width: 65%;
    height: 80%;
    top: -50%;
    left: -22%;
    transform: rotate(-36deg);
}

.myo-theme-tamagotchi .screen .crack--right:after {
    width: 115%;
    height: 115%;
    left: 25%;
    bottom: -57%;
    transform: rotate(-40deg);
}

.myo-theme-tamagotchi .screen .crack--right .crack__line {
    right: -169%;
    top: 1%;
    transform-origin: left;
    transform: rotate(-40deg);
}

.myo-theme-tamagotchi .screen .crack--bottom {
    width: 39%;
    height: 39%;
    bottom: -9%;
    right: 30%;
    transform: rotate(50deg);
}

.myo-theme-tamagotchi .screen .crack--bottom:before {
    width: 100%;
    height: 100%;
    left: 0px;
    bottom: 1px;
    transform: rotate(-24deg);
    transform-origin: bottom right;
}

.myo-theme-tamagotchi .screen .crack--left {
    width: 63%;
    height: 63%;
    left: -9%;
    top: 9%;
    transform: rotate(20deg);
}

.myo-theme-tamagotchi .screen .crack--left:before {
    transform-origin: bottom left;
    bottom: 1px;
    left: 0;
    width: 61%;
    height: 61%;
    transform: rotate(30deg);
}

.myo-theme-tamagotchi .screen .crack--left:after {
    width: 61%;
    height: 61%;
    bottom: -54%;
    left: 25%;
    transform: rotate(-15deg);
}

.myo-theme-tamagotchi .screen .crack--left .crack__line {
    bottom: 25%;
    left: -125%;
    transform-origin: right;
    transform: rotate(-30deg);
}

.myo-theme-tamagotchi .buttons {
    position: absolute;
    left: 50%;
    bottom: 12%;
    width: 52%;
    height: 8%;
    transform: translateX(-50%);
    text-align: center;
}

.myo-theme-tamagotchi .button {
    display: inline-block;
    position: absolute;
    overflow: hidden;
    cursor: pointer;
    width: 21%;
    border-radius: 50%;
    background-color: var(--point2);
    border: 2px solid rgba(0, 0, 0, 0.05);
    box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.2);
    transition: 200ms ease;
}

.myo-theme-tamagotchi .button.rewind {
    left: 0;
}

.myo-theme-tamagotchi .button.ff {
    right: 0;
}

.myo-theme-tamagotchi .button:active {
    filter: brightness(0.96);
    box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.2);
}

.myo-theme-tamagotchi .button:before {
    content: '';
    display: block;
    padding-top: 100%;
}

.myo-theme-tamagotchi .button:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: calc(0px - var(--width) / 25.6);
    top: calc(0px - var(--width) / 17);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 15px 2px rgba(255, 255, 255, 1);
}

.myo-theme-tamagotchi .button--b {
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
}

.myo-theme-tamagotchi.border #container,
.myo-theme-tamagotchi.border #container .loop,
.myo-theme-tamagotchi.border .etc:after,
.myo-theme-tamagotchi.border .screen__inner,
.myo-theme-tamagotchi.border .button {
    border: 3px solid;
    border-color: var(--line);
}

.myo-theme-tamagotchi.border .etc {
    width: calc(10% - 5px);
    top: 0;
}

.myo-theme-tamagotchi.border .etc:after {
    box-shadow: none;
}

/* ---------------
    테마 - 아이팟 나노 3세대
--------------- */
.myo-theme-ipod #container {
    border-radius: 30px;
    overflow: hidden;
}

.myo-theme-ipod:not(.border) #container {
    box-shadow: 2rem 2rem 8rem rgba(0, 0, 0, 0.09), 1rem 1rem 4rem rgba(0, 0, 0, 0.09), inset 4rem 4rem 10rem rgba(0, 0, 0, 0.05);
}

.myo-theme-ipod #container:before {
    content: "";
    display: block;
    padding-top: 130%;
}

.myo-theme-ipod #container:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--box);
    z-index: -1;
}

.myo-theme-ipod #container .box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.myo-theme-ipod:not(.border) .etc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    box-shadow: calc(var(--width) / 25.6) calc(var(--width) / 17) calc(var(--width) / 25.6) calc(var(--width) / 25.6) rgba(0, 0, 0, 0.2);
    filter: blur(calc(var(--width) / 51.2));
}

.myo-theme-ipod #container .tamagotchi__inner {
    height: 100%;
    position: relative;
    z-index: 1;
}

.myo-theme-ipod #container .screenbox {
    margin: 5% auto 0%;
    width: 89%;
    height: 46%;
}

.myo-theme-ipod #container .screen {
    width: 100%;
    height: 100%;
}

.myo-theme-ipod #container .screen .screen__inner {
    width: 100%;
    height: 100%;
    background-color: var(--screen);
    border: 3px solid rgba(15, 15, 15, 0.05);
    top: 0;
}

.myo-theme-ipod #container .screen .screen__inner,
.myo-theme-ipod #container .screen .screen__inner:after,
.myo-theme-ipod.smooth-screen #loding {
    border-radius: 15px;
}

.myo-theme-ipod #container .wheel {
    width: 58%;
    border-radius: 100%;
    margin: auto;
    background-color: var(--screen);
    position: relative;
    top: 2%;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, .05);
}

.myo-theme-ipod #container .wheel:before,
.myo-theme-ipod #container .wheel .center:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.myo-theme-ipod #container .wheel .test {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.myo-theme-ipod #container .wheel > div > div > div {
    width: 10%;
    z-index: 1;
}

.myo-theme-ipod #container .wheel a {
    position: static;
}

.myo-theme-ipod #container .wheel svg {
    width: 100%;
    display: block;
}

.myo-theme-ipod #container .wheel svg path {
    fill: var(--point1);
    transition: .4s;
}

.myo-theme-ipod #container .wheel .menu:hover path,
.myo-theme-ipod #container .wheel > div > div > div:hover svg path {
    fill: var(--point2);
    transition: .4s;
}

.myo-theme-ipod #container .wheel .menu {
    position: absolute;
    left: 50%;
    top: 17.6%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    cursor: pointer;
    width: 21%;
    line-height: 1;
    z-index: 1;
}

.myo-theme-ipod #container .wheel .rewind {
    position: absolute;
    top: 50%;
    left: 16.6%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.myo-theme-ipod #container .wheel .center {
    width: 40%;
    border-radius: 50%;
    background-color: var(--box);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.myo-theme-ipod #container .wheel .center a {
    display: block;
    position: absolute;
}

.myo-theme-ipod:not(.border) #container .wheel .center:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    box-shadow: inset 8px 8px 30px rgba(0, 0, 0, .1);
    border-radius: 50%;
}

.myo-theme-ipod #container .wheel .ff {
    position: absolute;
    top: 50%;
    right: 16.6%;
    transform: translate(50%, -50%);
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.myo-theme-ipod #container .wheel .play {
    position: absolute;
    left: 50%;
    bottom: 15.5%;
    transform: translate(-50%, 50%);
    cursor: pointer;
    width: 15%;
    text-align: center;
}

.myo-theme-ipod #container .wheel .play > svg {
    display: inline-block;
    vertical-align: middle;
    width: 43%;
    margin: 0 -2px;
}

.myo-theme-ipod.border #container,
.myo-theme-ipod.border #container .screen .screen__inner,
.myo-theme-ipod.border #container .wheel,
.myo-theme-ipod.border #container .wheel .center {
    border: 3px solid;
    border-color: var(--text);
}

/* ---------------
    테마 - 게임보이
--------------- */
.myo-theme-gameboy #container {
    position: relative;
    background: var(--box);
    border-radius: 4.25%/2.5%;
    border-bottom-right-radius: 20.4% 12%;
}

.myo-theme-gameboy #container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 4.25%/2.5%;
    border-bottom-right-radius: 20.4% 12%;
}

.myo-theme-gameboy:not(.border) #container:before {
    content: '';
    position: absolute;
    box-shadow: -3px 0px 5px 0px #f6f2ee inset, 6px 0 6px 1px #e5ddd7 inset, 0 3px 3px #f6f2ee inset, 0 35px 20px -2px rgba(0, 0, 0, 0.08), 0 55px 50px -5px rgba(0, 0, 0, 0.05);
    opacity: 0.3;
}

.myo-theme-gameboy #container:after {
    content: '';
    display: block;
    padding-top: 170%;
}

.myo-theme-gameboy #container .box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
    border-radius: 4.25%/2.5%;
    border-bottom-right-radius: 20.4% 12%;
}

.myo-theme-gameboy #container .tamagotchi__inner {
    width: 100%;
    height: 100%;
}

.myo-theme-gameboy .tamagotchi__shadow {
    width: 100%;
    height: 4.3%;
    border-bottom: 4px solid rgba(255, 255, 255, 0.5);
}

.myo-theme-gameboy .tamagotchi__highlight {
    width: 83.4%;
    height: 100%;
    border-left: 4px solid rgba(255, 255, 255, 0.5);
    border-right: 4px solid rgba(255, 255, 255, 0.5);
    margin: 0 auto;
}

.myo-theme-gameboy .screenbox {
    height: 40.9%;
    width: 90.3%;
    background: var(--screen1);
    margin: 0 auto;
    margin-top: 5.3%;
    border-radius: 8%/9.6%;
    border-bottom-right-radius: 19% 23%;
}

.myo-theme-gameboy .screen {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.myo-theme-gameboy .screen__inner {
    width: 60.5%;
    height: 79.8%;
    background: var(--screen);
    box-shadow: inset 0.1em 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.2);
}

.myo-theme-gameboy .screen__inner,
.myo-theme-gameboy .screen__inner:after {
    border-radius: 6px;
}

.myo-theme-gameboy .dot {
    width: 4.5%;
    border-radius: 50%;
    background-color: var(--point2);
    position: absolute;
    top: 20%;
    left: 10%;
}

.myo-theme-gameboy .dot:after {
    content: '';
    display: block;
    padding-top: 100%;
}

.myo-theme-gameboy .wheel {
    position: relative;
    height: 30.7%;
    width: 90.3%;
    margin: 0 auto;
    margin-top: 9.9%;
}

.myo-theme-gameboy .d-pad {
    position: relative;
    width: 34.7%;
    overflow: hidden;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6%;
}

.myo-theme-gameboy .d-pad:after {
    content: '';
    display: block;
    padding-top: 100%;
}

.myo-theme-gameboy .d-pad > div {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) -10%, var(--box) 50%, rgba(255, 255, 255, 0.1) 100%);
    border-radius: 50%;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.myo-theme-gameboy .d-pad > div > div {
    background: var(--point1);
    display: flex;
    border-radius: 6px;
    width: 28%;
    height: 28%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.myo-theme-gameboy .d-pad > div .up,
.myo-theme-gameboy .d-pad > div .rewind,
.myo-theme-gameboy .d-pad > div .ff {
    border-top: 3px solid;
    border-top-color: rgba(255, 255, 255, 0.5);
    transition: .4s;
}

.myo-theme-gameboy .d-pad > div .up:active,
.myo-theme-gameboy .d-pad > div .rewind:active,
.myo-theme-gameboy .d-pad > div .ff:active {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.myo-theme-gameboy .d-pad > div .up {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transform: translate(-50%, calc(0px - 150% + 5px));
    height: calc(28% + 3px);
}

.myo-theme-gameboy .d-pad > div .rewind {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    transform: translate(calc(0px - 150% + 4px), -50%);
    width: calc(28% + 3px);
}

.myo-theme-gameboy .d-pad > div .ff {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    transform: translate(calc(50% - 4px), -50%);
    width: calc(28% + 3px);
}

.myo-theme-gameboy .d-pad > div .play {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    transform: translate(-50%, calc(50% - 5px));
    height: calc(28% + 3px);
}

.myo-theme-gameboy .d-pad > div > div:not(.center) {
    box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.myo-theme-gameboy .d-pad > div > div:not(.center):active {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

.myo-theme-gameboy .d-pad .center {
    position: relative;
    border-radius: 0;
    width: calc(28% + 3px);
    height: calc(28% + 3px);
    border: 3px solid;
    border-color: var(--point1);
}

.myo-theme-gameboy .d-pad .center:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-left: 0;
    border-bottom: 0;
    border-radius: 1000%;
    width: 85%;
    height: 85%;
    background: conic-gradient(transparent 0 30%, rgba(255, 255, 255, 0.5) 40% 60%, transparent 70%);
}

.myo-theme-gameboy .d-pad .repeat + .play + .random + .center {
    border-top: 0;
    border-bottom: 0;
    width: calc(27.851% + 6px);
    height: calc(27.851% + 6px);
    border-color: var(--line);
    box-shadow: 4px 0 2px -2px rgba(0, 0, 0, 0.3);
}

.myo-theme-gameboy .wheel .menu {
    position: absolute;
    right: 0;
    top: 11%;
    width: 38%;
    display: flex;
    justify-content: space-between;
    border-radius: 200px;
    padding: 2%;
    transform: rotate(-35deg);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) -10%, var(--box) 50%, rgba(255, 255, 255, 0.1) 100%);
}

.myo-theme-gameboy .wheel .menu > div {
    right: 0;
    width: 37.6%;
    background: var(--point2);
    border-radius: 50%;
    bottom: 53%;
    cursor: pointer;
    box-shadow: inset -1px 2px 4px rgba(255, 255, 255, .4), inset 0 0 4px var(--point2), 0 0 2px rgba(0, 0, 0, .8);
    transition: .2s;
}

.myo-theme-gameboy .wheel .menu > div:active {
    box-shadow: inset -1px 2px 4px rgba(0, 0, 0, .4), inset 0 0 4px var(--point2), 0 0 2px rgba(255, 255, 255, .3);
}

.myo-theme-gameboy .wheel .menu > div:after {
    content: '';
    display: block;
    padding-top: 100%;
}

.myo-theme-gameboy .starts {
    width: 11.5%;
    height: 3.3%;
    border-radius: 200px;
    background: var(--point3);
    margin: 0 auto;
    transform: rotate(-35deg) translateX(-100%);
    box-shadow: 0 0 2px rgba(0, 0, 0, .4);
}

.myo-theme-gameboy .starts + .starts {
    position: absolute;
    left: 55%;
    bottom: 30%;
}

.myo-theme-gameboy .bars {
    height: 8%;
    transform: rotate(-35deg);
    position: absolute;
    width: 78%;
    left: 65%;
    bottom: 13%;
}

.myo-theme-gameboy .bars > div {
    width: 2%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 200px;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2) inset;
}

.myo-theme-gameboy .bars > div:not(:first-child) {
    margin-left: 3.7%;
}

.myo-theme-gameboy .box::after {
    content: "";
    width: 50%;
    height: 10%;
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    bottom: -3%;
    right: -17%;
    transform: rotate(-35deg);
}

.myo-theme-gameboy.border #container,
.myo-theme-gameboy.border .d-pad,
.myo-theme-gameboy.border .dot,
.myo-theme-gameboy.border .wheel .menu,
.myo-theme-gameboy.border .screen__inner,
.myo-theme-gameboy.border .screenbox,
.myo-theme-gameboy.border .wheel .menu > div,
.myo-theme-gameboy.border .starts,
.myo-theme-gameboy.border .starts:after,
.myo-theme-gameboy.border .bars > div,
.myo-theme-gameboy.border .d-pad > div > div:not(.center) {
    border: 3px solid;
    border-color: var(--line)
}

.myo-theme-gameboy.border .screen__inner {
    box-shadow: none;
}

.myo-theme-gameboy.border .wheel .menu,
.myo-theme-gameboy.border .d-pad > div {
    background: transparent;
}

.myo-theme-gameboy.border .d-pad > div .up {
    border-bottom: 0 !important;
}

.myo-theme-gameboy.border .d-pad > div .rewind {
    border-right: 0 !important;
}

.myo-theme-gameboy.border .d-pad > div > .ff {
    border-left: 0 !important;
}

.myo-theme-gameboy.border .d-pad > div > .play {
    border-top: 0 !important;
}

.myo-theme-gameboy .blog-title {
    width: 90.3%;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    line-height: 1;
    font-weight: bold;
    margin-top: 1%;
}

.myo-theme-gameboy .blog-title,
.myo-theme-gameboy .blog-title a {
    color: var(--point1);
}

.myo-theme-gameboy .blog-title a:hover {
    color: var(--text);
}

.myo-theme-gameboy .blog-title .intro {
    font-size: 1.3em;
    margin-right: 5px;
    margin-bottom: 2px;
    text-transform: capitalize;
}

.myo-theme-gameboy .blog-title .title {
    font-size: 2.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
    text-transform: uppercase;
    padding-right: 5px;
}

.myo-theme-gameboy .blog-title .title img {
    max-height: 50px;
}

.myo-theme-gameboy .shadow {
    display: none !important;
}

/* ---------------
    테마 - 닌텐도 스위치
--------------- */
.myo-theme-switch #container:after {
    content: '';
    display: block;
    padding-top: 45.6%;
}

.myo-theme-switch .tamagotchi__inner > div:not(.screenbox):not(.joycon) {
    display: none;
}

.myo-theme-switch .screenbox {
    position: absolute;
    width: 70%;
    height: 100%;
    background-color: var(--box);
    box-shadow: inset 0 -0.5em 0 rgba(0, 0, 0, 0.1);
    order: 1;
    left: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2%;
}

.myo-theme-switch .screenbox .volume {
    display: block;
    width: 4%;
    height: 1%;
    position: absolute;
    top: -1%;
    left: 10%;
    background-color: var(--box);
    border-radius: 5px 5px 0 0;
    box-sizing: content-box;
}

.myo-theme-switch .screenbox .volume.up {
    left: 16.5%;
}

.myo-theme-switch .screenbox .screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 3.5%/5.5%;
    background-color: var(--screen1);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.myo-theme-switch .screenbox .screen .screen__inner {
    background-color: var(--screen);
    width: 87%;
    height: 87%;
    overflow: hidden;
}

.myo-theme-switch .joycon {
    position: absolute;
    top: 0;
    width: 15%;
    height: 100%;
    box-shadow: inset 0 0.2em 0 rgba(0, 0, 0, 0.1), inset 0 -1.5em 0 rgba(0, 0, 0, 0.1), inset 0 -0.6em 0 rgba(0, 0, 0, 0.1);
}

.myo-theme-switch .joycon--left {
    left: 0;
    background-color: var(--point1);
    border-top-left-radius: 50% 15%;
    border-bottom-left-radius: 50% 15%;
}

.myo-theme-switch .joycon__sign,
.myo-theme-switch .joycon--left:before {
    content: '';
    position: absolute;
    top: 9%;
    width: 12%;
    height: 0.8%;
    right: 10%;
    background: var(--point3);
}

.myo-theme-switch .joycon__stick {
    position: absolute;
    width: 55%;
    border-radius: 50%;
    background-color: var(--point3);
    box-shadow: 0.2em -0.2em 0 0.2em rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.myo-theme-switch:not(.solid) .joycon__stick > div:first-child:after,
.myo-theme-switch:not(.solid) .joycon__stick::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2px);
    height: 2px;
    background-color: var(--border);
    z-index: -1;
}

.myo-theme-switch:not(.solid) .joycon__stick > div:first-child:after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.myo-theme-switch:not(.solid) .joycon__stick > div:first-child {
    width: 100%;
    border-radius: 50%;
    border: 2px solid;
    border-color: var(--border);
    background-color: var(--point3);
    box-shadow: inset 0.1em -0.1em 0 rgba(255, 255, 255, 0.5);
    z-index: 1;
    transition: .4s;
}

.myo-theme-switch .joycon__stick > div:first-child:before {
    content: '';
    display: block;
    padding-top: 100%;
}

.myo-theme-switch .joycon__stick {
    top: 17%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6.5%;
}

.myo-theme-switch:not(.solid) .joycon__stick > div:active {
    box-shadow: inset -0.1em -0.1em 0 rgba(255, 255, 255, 0.2);
}

.myo-theme-switch .joycon__cross {
    position: absolute;
    width: 66%;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.myo-theme-switch .joycon__cross:after {
    content: '';
    display: block;
    padding-top: 100%;
}

.myo-theme-switch .joycon__cross--left > div > div:not(.center):not(.shadow),
.myo-theme-switch .joycon__cross--right > div {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45%;
    border-radius: 50%;
    box-shadow: inset 0.1em -0.1em 0 rgba(255, 255, 255, 0.5);
    transform: rotate(-45deg);
    background-color: var(--point3);
    cursor: pointer;
    line-height: 1;
    color: var(--text);
    transition: box-shadow .4s;
    border: 1px solid;
    border-color: var(--point3);
}

.myo-theme-switch .joycon__cross--left > div > div:not(.center):active,
.myo-theme-switch .joycon__cross--right > div:active {
    box-shadow: inset -0.1em -0.1em 0 rgba(255, 255, 255, 0.2);
}

.myo-theme-switch .joycon__cross--left > div > div:not(.center):not(.shadow):after,
.myo-theme-switch .joycon__cross--right > div:after {
    content: '';
    display: block;
    padding-top: 100%;
}

.myo-theme-switch .joycon__cross--left > div > div:not(.center):not(.shadow):before {
    content: '\f0d8';
    font-family: 'fontAwesome';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    font-size: 1.5em;
}

.myo-theme-switch .joycon__cross .joycon__button--top {
    left: 0;
    top: 0;
}

.myo-theme-switch .joycon__cross .joycon__button--left {
    left: 0;
    bottom: 0;
}

.myo-theme-switch .joycon__cross .rewind:before {
    transform: rotate(-90deg);
}

.myo-theme-switch .joycon__cross .joycon__button--right {
    right: 0;
    top: 0;
}

.myo-theme-switch .joycon__cross .ff:before {
    transform: rotate(90deg);
}

.myo-theme-switch .joycon__cross .joycon__button--bottom {
    right: 0;
    bottom: 0;
}

.myo-theme-switch .joycon__cross .play:before {
    transform: rotate(180deg);
}

.myo-theme-switch .joycon__options {
    position: absolute;
    bottom: 19%;
    right: 15%;
    width: 23%;
    background-color: var(--point3);
}

.myo-theme-switch .joycon__options + div {
    display: none;
}

.myo-theme-switch .joycon__options:before {
    content: '';
    display: block;
    padding-top: 100%;
}

.myo-theme-switch .starts:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background-color: var(--border);
}

.myo-theme-switch .joycon--right {
    right: 0;
    background-color: var(--point2);
    border-top-right-radius: 50% 15%;
    border-bottom-right-radius: 50% 15%;
    order: 2;
}

.myo-theme-switch .joycon__sign {
    right: auto;
    left: 5%;
    position: relative;
}

.myo-theme-switch .joycon__sign:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    transform: rotate(90deg);
}

.myo-theme-switch .joycon__sign a {
    display: block;
    width: 100%;
    height: 600%;
    position: absolute;
    transform: translateY(-40%);
}

.myo-theme-switch .joycon__cross--right {
    top: 29%;
}

.myo-theme-switch .joycon__cross--left > div > div:not(.center):not(.shadow):before,
.myo-theme-switch .joycon__cross--right > div > div {
    color: var(--point1);
}

.myo-theme-switch .joycon__stick--right {
    top: 49%;
    left: 50%;
    transform: translateX(-50%);
}

.myo-theme-switch .joycon__options--home {
    left: 23%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.myo-theme-switch .joycon__options--home:hover {
    color: var(--point1);
}

.myo-theme-switch .joycon__options--home::after {
    content: '\f015';
    font-family: 'fontAwesome';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--point1);
    transition: .4s;
}

.myo-theme-switch .joycon__cross--left > div > div:not(.center):active:before,
.myo-theme-switch .joycon__cross--right > div:active > div,
.myo-theme-switch .joycon__options--home:active::after {
    color: rgba(255, 255, 255, 0.3)
}

.myo-theme-switch.border:not(.lite) #container .screenbox,
.myo-theme-switch.border:not(.lite) #container .screenbox .volume,
.myo-theme-switch.border:not(.lite) #container .screenbox .screen,
.myo-theme-switch.border:not(.lite) #container .screenbox .screen .screen__inner,
.myo-theme-switch.border:not(.lite) #container .joycon,
.myo-theme-switch.border:not(.lite) #container .joycon__stick,
.myo-theme-switch.border:not(.lite) #container .joycon__stick > div:nth-child(1),
.myo-theme-switch.border:not(.lite) #container .joycon__cross .joycon__button,
.myo-theme-switch.border:not(.lite) #container .joycon__options {
    border: 3px solid;
    border-color: var(--border);
}

.myo-theme-switch.border:not(.lite) #container .screenbox .volume {
    top: calc(0px - 0.5% - 6px);
    height: 0.5%;
}

.myo-theme-switch.border:not(.lite) #container .joycon--left {
    border-right: 0;
}

.myo-theme-switch.border:not(.lite) #container .joycon--right {
    border-left: 0;
}

.myo-theme-switch.border:not(.lite) #container .joycon__stick {
    padding: 5.5%;
}

.myo-theme-switch.border:not(.lite) #container .joycon__stick > div:nth-child(1):after,
.myo-theme-switch.border:not(.lite) #container .joycon__stick:after {
    height: 3px;
}

.myo-theme-switch.lite #container {
    background-color: var(--box);
    border-radius: 7.5%/15%;
}

.myo-theme-switch.lite .screenbox,
.myo-theme-switch.lite .joycon--left,
.myo-theme-switch.lite .joycon--right {
    box-shadow: none;
    background-color: transparent;
}

.myo-theme-switch.lite .screenbox .screen__inner {
    border: 4px solid var(--screen1);
    height: 90%;
}

.myo-theme-switch.lite .screenbox .screen {
    background-color: transparent;
    border: 1px solid var(--screen1);
    height: 88%;
    border-radius: 3%/5.5%;
}

.myo-theme-switch.lite .joycon--left:before,
.myo-theme-switch.lite .joycon__options {
    right: 5%;
    bottom: 15%;
}

.myo-theme-switch.lite .joycon--left .joycon__stick,
.myo-theme-switch.lite .joycon--left .joycon__cross {
    left: 55%;
}

.myo-theme-switch.lite .joycon--right .joycon__cross,
.myo-theme-switch .joycon__stick--right {
    left: 45%;
}

.myo-theme-switch.lite .joycon__options--home {
    left: 5%;
    bottom: 14%;
}

.myo-theme-switch.lite .d-pad {
    position: absolute;
    transform: translate(-50%, -50%);
}

.myo-theme-switch.lite .d-pad > div:before,
.myo-theme-switch.lite .d-pad .shadow {
    position: absolute;
    left: 0;
    right: 0;
    content: "";
    display: block;
    width: 30%;
    height: 100%;
    border-radius: 3px;
    margin-left: auto;
    margin-right: auto;
}

.myo-theme-switch.lite .d-pad .shadow {
    transform: rotate(90deg);
}

.myo-theme-switch.lite .d-pad > div > div:not(.shadow):not(.center) {
    position: absolute;
    display: block;
    width: 28%;
    height: 50%;
    background-color: var(--point3);
    z-index: 1;
    border-radius: 3px;
    transform: none;
    box-shadow: none;
    border: 0;
}

.myo-theme-switch.lite .d-pad > div div.up {
    top: 1.5px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.myo-theme-switch.lite .d-pad > div div.ff {
    top: 50%;
    transform: translate(135%, -50%) rotate(90deg) !important;
    right: 50%;
}

.myo-theme-switch.lite .d-pad > div div.play {
    transform: rotate(180deg) !important;
    bottom: 1px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.myo-theme-switch.lite .d-pad > div div.rewind {
    top: 50%;
    transform: translate(-135%, -50%) rotate(-90deg) !important;
    left: 50%;
}

.myo-theme-switch.lite .d-pad > div > div:not(.center):not(.shadow):before {
    transform: none;
    bottom: auto;
    top: 10%;
    left: auto;
    right: auto;
    height: auto;
}

.myo-theme-switch.lite .d-pad > div div.center {
    display: none;
}

.myo-theme-switch.lite.border #container,
.myo-theme-switch.lite.border #container .screenbox .volume,
.myo-theme-switch.lite.border #container .screenbox .screen .screen__inner,
.myo-theme-switch.lite.border #container .joycon__stick,
.myo-theme-switch.lite.border #container .joycon__stick > div:nth-child(1),
.myo-theme-switch.lite.border #container .joycon__cross--right > div,
.myo-theme-switch.lite.border #container .joycon__options {
    border: 3px solid;
    border-color: var(--border);
}

.myo-theme-switch.lite.border #container .screenbox .volume {
    top: calc(0px - 0.5% - 6px);
    height: 0.5%;
}

.myo-theme-switch.lite.border .d-pad > div:before,
.myo-theme-switch.lite.border .d-pad > div:after {
    width: calc(28% + 6px);
    height: calc(100% + 3%);
    background-color: var(--border);
    top: -1.5px;
}

.myo-theme-switch.solid #container {
    box-shadow: 10px 10px 40px -20px rgba(0, 0, 0, 0.4);
}

.myo-theme-switch.lite.solid #container {
    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.03));
    box-shadow: -1px -7px 4px rgba(0, 0, 0, 0.2) inset, 6px 5px 6px rgba(0, 0, 0, 0.05) inset, 10px 10px 4px rgba(255, 255, 255, 0.3) inset, -4px 5px 4px rgba(0, 0, 0, 0.05) inset, -10px 10px 4px rgba(255, 255, 255, 0.2) inset, 0 80px 40px -70px rgba(0, 0, 0, 0.3);
}

.myo-theme-switch.lite.solid .screenbox .volume {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.05));
}

.myo-theme-switch.lite.solid .screenbox .screen {
    background-color: transparent;
    background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.02));
    box-shadow: 0 0 0.5px 0.5px rgba(255, 255, 255, 0.24), 0px -3px 4px rgba(0, 0, 0, 0) inset, 1px 1.5px 1.5px rgba(0, 0, 0, 0.05) inset, 4px 4px 2px rgba(0, 0, 0, 0.02) inset, -1px 1.5px 1.5px rgba(0, 0, 0, 0.13) inset, -4px 4px 2px rgba(0, 0, 0, 0.03) inset;
    height: 88%;
    border: 0;
}

.myo-theme-switch.lite.solid .joycon--left:before {
    box-shadow: 0 0 0.5px 0.75px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(255, 255, 255, 0.1) inset, 0 2.5px 4px -1px rgba(0, 0, 0, 0.1);
}

.myo-theme-switch.lite.solid .joycon__stick {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.0625em 100%, 100% 0.0625em, 100%;
    background-color: var(--point3);
    background-image:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)), linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3)), linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
    box-shadow: inset 0 -0.0625em 0.125em rgba(0, 0, 0, 0.3), inset 0 0.125em 0.125em -0.03125em rgba(0, 0, 0, 0.2), inset 0 0.1875em 0.125em -0.0625em rgba(255, 255, 255, 0.3), 0 0 0.09375em 0.0625em rgba(0, 0, 0, 0.25), 0 0.375em 1em 0.0625em rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    transition: box-shadow .4s;
}

.myo-theme-switch.lite.solid .joycon__stick:before,
.myo-theme-switch.lite.solid .joycon__stick:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 70%;
    height: 70%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--point3);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
    border-radius: 50%;
    box-shadow: inset 0 0 0.125em rgba(255, 255, 255, 0.08);
}

.myo-theme-switch.lite.solid .joycon__stick:before {
    width: 85%;
    height: 85%;
    background-size: 0.0625em 100%, 100% 0.0625em, 100%;
    background-color: var(--point3);
    background-image:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)), linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2));
    box-shadow: none;
}

.myo-theme-switch.lite.solid .joycon__stick:active {
    background-image:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)), linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3)), linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.25));
    box-shadow: inset 0 -0.0625em 0.125em rgba(0, 0, 0, 0.3), inset 0 0.125em 0.125em -0.03125em rgba(0, 0, 0, 0.2), inset 0 0.1875em 0.125em -0.0625em rgba(255, 255, 255, 0.3), 0 0 0.09375em 0.0625em rgba(0, 0, 0, 0.25), 0 0.375em 1em 0.0625em rgba(0, 0, 0, 0.4);
}

.myo-theme-switch.lite.solid .joycon__stick:active:before {
    background-image:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)), linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1));
}

.myo-theme-switch.lite.solid .joycon__stick:active:after {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.2));
}

.myo-theme-switch.lite.solid .d-pad > div > div:not(.shadow) {
    background-image: linear-gradient(rgba(255, 255, 255, 0.1), var(--point3) 50%);
}

.myo-theme-switch.lite.solid .d-pad > div > div:active {
    background-image: linear-gradient(rgba(0, 0, 0, 0.05), var(--point3) 50%);
}

.myo-theme-switch.lite.solid .d-pad > div:before,
.myo-theme-switch.lite.solid .d-pad .shadow {
    background-color: rgba(0, 0, 0, 0.5);
}

.myo-theme-switch.lite.solid .d-pad > div div.up {
    box-shadow: 0 2px 2px rgba(255, 255, 255, 0.1) inset, -1.5px 0 1px rgba(255, 255, 255, 0.1) inset, 1px 0 1px rgba(255, 255, 255, 0.1) inset;
}

.myo-theme-switch.lite.solid .d-pad > div div.up:active {
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset, -1.5px 0 1px rgba(0, 0, 0, 0.2) inset, 1px 0 1px rgba(0, 0, 0, 0.2) inset;
}

.myo-theme-switch.lite.solid .d-pad > div div.ff {
    box-shadow: 0 3px 2px -2px rgba(255, 255, 255, 0.1) inset;
}

.myo-theme-switch.lite.solid .d-pad > div div.ff:active {
    box-shadow: 0 3px 2px -4px rgba(0, 0, 0, 0.2) inset;
}

.myo-theme-switch.lite.solid .d-pad > div div.play {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), var(--point3) 50%);
}

.myo-theme-switch.lite.solid .d-pad > div div.play:active {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), var(--point3) 50%);
}

.myo-theme-switch.lite.solid .d-pad > div div.play,
.myo-theme-switch.lite.solid .d-pad > div div.rewind {
    box-shadow: 0 4px 2px -2px rgba(255, 255, 255, 0.1) inset;
}

.myo-theme-switch.lite.solid .d-pad > div div.play:active,
.myo-theme-switch.lite.solid .d-pad > div div.rewind:active {
    box-shadow: 0 4px 2px -4px rgba(0, 0, 0, 0.2) inset;
}

.myo-theme-switch.lite.solid .d-pad > div > div:not(.center):active:before {
    color: rgba(255, 255, 255, 0.3);
}

.myo-theme-switch.lite.solid .starts {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), (0, 0, 0, 0.03));
    box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.5), 1px 1px rgba(255, 255, 255, 0.1) inset;
}

.myo-theme-switch.lite.solid .starts:after {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset, 0 -1px 1px rgba(255, 255, 255, 0.1) inset;
    background-color: rgba(0, 0, 0, 0.1);
}

.myo-theme-switch.lite.solid .joycon__sign,
.myo-theme-switch.lite.solid .joycon__sign:after {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 0 0.5px rgba(0, 0, 0, 0.5);
}

.myo-theme-switch.lite.solid .joycon__cross--right > div,
.myo-theme-switch.lite.solid .joycon__options--home {
    border: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    box-shadow: 0 2px 0.75px rgba(255, 255, 255, 0.2) inset, 0 -2px 0.75px rgba(0, 0, 0, 0.5) inset, -2px 0 0.75px rgba(0, 0, 0, 0.01) inset, 2px 0 0.75px rgba(0, 0, 0, 0.1) inset, 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 -2px 1px 1px rgba(0, 0, 0, 0.1), 0 5px 4px -2px rgba(0, 0, 0, 0.2);
}

.myo-theme-switch.lite.solid .joycon__cross--right > div:active,
.myo-theme-switch.lite.solid .joycon__options--home:active {
    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
}

/* ---------------
    테마 - 닌텐도 스위치
--------------- */
.myo-theme-music #container:before {
    content: '';
    display: block;
    padding-top: 150%;
}

.myo-theme-music .box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.myo-theme-music .tamagotchi__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 7%;
}

.myo-theme-music .screenbox {
    position: relative;
}

.myo-theme-music .screenbox:after {
    content: '';
    display: block;
    padding-top: 100%;
}

.myo-theme-music .screenbox .screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.myo-theme-music .screen__inner {
    background-color: var(--screen);
    height: 100%;
    width: 100%;
}

.myo-theme-music .blog-title {
    display: flex;
    flex-direction: column;
    margin-top: 7%;
    text-align: center;
    cursor: default;
}

.myo-theme-music .blog-title .scrollbox {
    display: flex;
    align-items: baseline;
    margin-bottom: 10%;
    line-height: 1;
    font-size: .8em;
}

.myo-theme-music .blog-title .scrollBar {
    height: 5px;
    width: 100%;
    position: relative;
    z-index: 1;
    margin: 0 15px;
}

.myo-theme-music .blog-title .scrollBar:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--screen1);
    opacity: .5;
    z-index: -1;
}

.myo-theme-music .blog-title .scrollBar > span {
    position: relative;
    height: 100%;
    width: 0%;
    background-color: var(--screen1);
    transition: width 200ms ease;
    display: block;
}

.myo-theme-music .blog-title .scrollBar > span:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-3.5px);
    height: 12px;
    width: 3px;
    background-color: var(--point2);
}

.myo-theme-music .blog-title .title {
    font-weight: bold;
    font-size: 1.5em;
}

.myo-theme-music .blog-title .title .title-img {
    max-width: 100%;
    height: auto;
    max-height: 40px;
}

.myo-theme-music .blog-title .intro {
    order: 1;
}

.myo-theme-music .wheel {
    flex-grow: 1;
}

.myo-theme-music .wheel .d-pad,
.myo-theme-music .wheel .d-pad > div {
    height: 100%;
}

.myo-theme-music .wheel .d-pad > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.myo-theme-music .wheel .d-pad > div > div:first-child,
.myo-theme-music .wheel .d-pad > div > div:last-child {
    display: none;
}

.myo-theme-music .wheel .d-pad > div > .repeat,
.myo-theme-music .wheel .d-pad > div > .random {
    width: 7%;
}

.myo-theme-music .wheel .d-pad > div > .rewind,
.myo-theme-music .wheel .d-pad > div > .play,
.myo-theme-music .wheel .d-pad > div > .ff {
    width: 12%;
    cursor: pointer;
    transition: .4s;
}

.myo-theme-music .wheel .d-pad > div > .rewind {
    order: 1;
}

.myo-theme-music .wheel .d-pad > div > .play {
    order: 2;
}

.myo-theme-music .wheel .d-pad > div > .ff {
    order: 3;
}

.myo-theme-music .wheel .d-pad > div > .random {
    order: 4;
}

.myo-theme-music .wheel .d-pad > div > .rewind:hover,
.myo-theme-music .wheel .d-pad > div > .play:hover,
.myo-theme-music .wheel .d-pad > div > .ff:hover {
    opacity: .5;
}

.myo-theme-music .wheel .d-pad a {
    position: static;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.myo-theme-music .wheel .d-pad > div > div:not(:first-child):not(:last-child) svg.music {
    display: block;
    width: 100%;
}

.myo-theme-music .wheel .d-pad > div .shadow,
.myo-theme-music .wheel .d-pad .play svg:nth-child(2) {
    display: none !important;
}

.myo-theme-music.border #container,
.myo-theme-music.border .screen__inner {
    border: 3px solid;
    border-color: var(--line);
}

.myo-theme-music.border .blog-title .scrollBar,
.myo-theme-music.border .blog-title .scrollBar > span:after {
    border: 2px solid;
    border-color: var(--line);
}

.myo-theme-music.border .blog-title .scrollBar {
    height: 7px;
}

.myo-theme-music.border .blog-title .scrollBar > span:after {
    top: -3px;
}

/* ---------------
    카테고리
--------------- */
body .screen__inner.catebox {
    position: absolute;
    background-color: transparent !important;
    z-index: 999999999999;
    display: none;
    backdrop-filter: blur(10px);
}

body .screen__inner.catebox .scroll {
    padding: 20px;
}

body .screen__inner.catebox:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-color: var(--screen);
    opacity: 0.9;
}

.catebox .blogtitle {
    border-bottom: 1px solid;
    margin-bottom: 20px;
    padding: 0 3% 10px;
    border-color: var(--box);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.catebox .title a {
    display: flex;
    align-items: center;
}

.catebox .title span {
    font-size: 1.1em;
    font-weight: bold;
    letter-spacing: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.catebox .scroll .menubox {
    position: relative;
    flex-grow: 1;
}

.catebox .scroll .menubox > *:not(:last-child),
.catebox.all .link_tit {
    margin-bottom: 10px;
}

.catebox .owner li:first-child {
    margin-top: 10px;
}

.catebox .scroll .menubox > * {
    width: 50%;
}

.catebox .scroll .menubox a:not(.link_tit),
.catebox.all .link_tit {
    display: block;
}

.catebox .scroll .menubox a {
    cursor: pointer;
}

.catebox .scroll .menubox a.on {
    font-weight: bold;
    color: var(--point2);
    position: relative;
}

.catebox .scroll .menubox a.on:hover {
    color: var(--text);
}

.catebox.menu .tt_category,
.catebox.category .blogmenu {
    display: none;
}

.catebox .category_list > li {
    padding-right: 10px;
}

.catebox .category_list > li.mc .link_item:after {
    content: '\f0da';
    font-family: 'fontAwesome';
    float: right;
    transition: opacity .4s;
    font-size: .8em;
}

.catebox .category_list > li.mc.open .link_item {
    font-weight: bold;
}

.catebox .category_list > li.mc.close:hover .link_item:after {
    opacity: 1;
}

.catebox .category_list > li.mc.close .link_item:after {
    opacity: .3;
}

.catebox .sub_category_list {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    padding-left: 10px;
}

.catebox .link_tit,
.catebox .sub_category_list {
    display: none;
}

/* 검색 */
.search-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 10px;
    background-color: var(--box);
    padding: 5px 10px;
    margin-right: 10px;
    max-width: calc(50% - 10px);
    border-radius: 20px;
    margin-top: 20px;
}

.search-box input {
    width: 100%;
}

.search-box input:focus:-moz-placeholder {
    color: transparent;
    transition: color .4s;
}

.search-box input:focus::placeholder {
    color: transparent;
    transition: color .4s;
}

.search-box input:focus:-ms-input-placeholder {
    color: transparent;
    transition: color .4s;
}

.search-box input:focus::placeholder {
    color: transparent;
    transition: color .4s;
}

body.small .catebox .blogtitle {
    text-align: center;
    display: block;
}

body.small .catebox .blogtitle .sns,
.catebox:not(.small) .menubox .sns {
    display: none;
}

body.small .catebox .title {
    padding: 0;
}

body.small .catebox .scroll .menubox > *,
body.small .catebox .search-box {
    width: 100%;
    max-width: 100%;
}

body.small .catebox .sns {
    justify-content: flex-start;
    margin-top: 20px;
}

body.small .catebox .sns a {
    margin: 0 15px 0 0;
}

body.small .catebox .category_list > li.mc .link_item:after {
    transform: rotate(90deg);
}

body.small .catebox .sub_category_list {
    position: static;
    padding: 10px 0;
    text-align: right;
}

body.small .catebox .sub_category_list .link_sub_item {
    display: flex;
    align-items: center;
    flex-direction: row-reverse
}

body.small .catebox .sub_category_list .link_sub_item img[alt="N"],
body.small .catebox .sub_category_list .link_sub_item .new {
    float: left;
    margin: 0 5px 0 0;
    padding: 0;
}

body.small .catebox .mc:last-child .sub_category_list {
    padding-bottom: 0;

}

/* ================ 
 *
 *   콘텐츠 영역
 *
 * ================ */
#content {
    padding: 20px;
}

/* ---------------
    목록 타이틀
--------------- */
.post-header,
.post-header > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.post-header {
    padding: 0 10px 10px;
    border-bottom: 1px solid;
    margin-bottom: 10px;
    border-color: var(--box);
    cursor: default;
}

.post-header .title {
    font-size: 1.2em;
    font-weight: bold;
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logo {
    margin-right: 10px;
    border-radius: 50px;
    border: 2px solid;
    border-color: var(--box);
    width: 40px;
}

.logo + .title-img {
    max-height: 40px;
}

/* ---------------
    목록 공통
--------------- */
.myoskin ol {
    display: grid;
    grid-gap: 0;
}

.myoskin .item {
    position: relative;
    vertical-align: top;
    border: 2px solid transparent;
    padding: 2px;
    transition: .4s;
}

.myoskin .item:hover {
    border-color: var(--box);
}

.myoskin .item a {
    display: block;
}

.myoskin .item .thumbox {
    position: relative;
    vertical-align: top;
}

.myoskin .item .thumbox:before {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    content: "";
    background-color: var(--box);
    opacity: 0.1;
    transition: opacity .4s ease;
}

.myoskin .item.you .thumbox:before {
    display: none;
}

.myoskin .item:hover .thumbox:before {
    opacity: 0;
}

.myoskin .item .thumbox img {
    width: 100%;
}

.myoskin .item .info {
    word-break: keep-all;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    flex-grow: 1;
}

.myoskin .item.lock .title:before {
    content: "\f023";
    font-family: 'fontAwesome';
    margin-right: 5px
}

.myoskin .item .title img,
.myoskin .item .title .new {
    width: auto !important;
    height: auto !important;
    float: right;
}

.myoskin .item .cnt {
    font-size: .8em;
    vertical-align: middle;
    margin-left: 3px;
    font-family: var(--fontN);
}

.myoskin .item .cnt:empty {
    display: none !important;
}

.myoskin .item .cnt:not(:empty):before {
    content: '+';
    margin-right: 3px;
}

/* 노이미지 */
.noimg {
    display: none !important;
}

:not(.thum) + .noimg {
    display: inline-block !important;
}

/* 목록 없음 */
.myoskin .empty + ol,
.myoskin .empty > ul {
    display: none;
}

#tt-body-category .empty .category,
#tt-body-search .empty .search,
#tt-body-archive .empty .archive,
#tt-body-tag .empty .tag {
    display: block;
}

/* ---------------
    갤러리형
--------------- */
.myoskin.myo_gal .item {
    position: relative;
    overflow: hidden;
}

.myoskin.myo_gal .item a {
    position: relative;
    z-index: 2;
}

.myoskin.myo_gal:not(.hover) .item .info {
    position: absolute;
    bottom: 0;
    left: 0;
    min-height: 50px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px;
    z-index: 13;
    transition: top .4s;
}

.myoskin.myo_gal:not(.hover) .item .info:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--box);
    opacity: 0.8;
    z-index: -1;
    backdrop-filter: blur(10px);
}

.myoskin.myo_gal:not(.hover) .item .info .title-cnt {
    min-height: 30px;
}

.myoskin.myo_gal .item .cnt {
    font-size: .8em;
    white-space: nowrap;
    margin-left: 10px;
    line-height: 1;
}

.myoskin.myo_gal .item .title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    padding: 0;
    line-height: 1.3;
    font-weight: bold;
}

.myoskin.myo_gal .item .cate-date,
.myoskin.myo_gal .item .title-cnt .cnt,
.myoskin.myo_gal .item .text {
    display: none;
}

/* ------------------------------
    갤러리형 - 마우스 오버
------------------------------ */
.myoskin.myo_gal.hover .item:hover .thumbox:before {
    opacity: .7;
}

.myoskin.myo_gal.hover .item .info {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    z-index: 100;
    transform: translateY(0);
    transition: transform 0.28s ease, opacity .4s;
    color: var(--text);
    opacity: 0;
}

.myoskin.myo_gal.hover .item:hover .info {
    opacity: 1;
}

.myoskin.myo_gal.hover .item .info .title-cnt {
    position: relative;
    width: 100%;
    text-transform: uppercase;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.myoskin.myo_gal.hover .item .info .title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    padding: 0;
}

.myoskin.myo_gal.hover .item .cnt::before {
    display: block;
    margin: 7% auto 8% auto;
    width: 300%;
    height: 1px;
    content: "";
    background-color: var(--point3);
    opacity: 0.5;
    transform: scale(1);
    transition: transform 0.15s;
    order: -1;
}

.myoskin.myo_gal.hover .item .cnt:not(.empty):after {
    content: '\f0e5';
    font-family: 'fontAwesome';
    margin-right: 3px;
    order: -1;
}

.myoskin.myo_gal.hover .item .cnt {
    width: 100%;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.15s;
    margin: 0;
    font-size: .8em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.myoskin.myo_gal.hover .item:hover .info {
    transform: translateY(-10px);
}

.myoskin.myo_gal.hover .item:hover .title-cnt {
    opacity: 1;
}

.myoskin.myo_gal.hover .item:hover .cnt::before {
    transform: scale(1);
    opacity: 0.5;
    transition-delay: 0.15s;
    transition-duration: 0.2s;
}

.myoskin.myo_gal.hover .item:hover .cnt {
    opacity: 0.7;
    transition-delay: 0.2s;
    transition-duration: 0.2s;
}

.myoskin.myo_gal.hover .item .title-cnt .cnt,
.myoskin.myo_gal.hover .item .cate-date,
.myoskin.myo_gal.hover .item.you .info {
    display: none;
}

/* ---------------
    목록형
--------------- */
.myo_bbs .item {
    margin-right: 0;
    width: 100%;
}

.myo_bbs .item a {
    display: flex;
    align-items: center;
}

.myo_bbs .item .thumbox {
    position: relative;
    flex: 0 0 10%;
    min-width: 40px;
    margin-right: 10px;
    border-radius: 5px;
    overflow: hidden;
    border: 2px solid;
    border-color: var(--box);
    align-self: flex-start;
    transition: .4s;
}

.myo_bbs .item:hover .thumbox {
    border-color: var(--point2);
}

.myo_bbs .item .thumbox .thumbnail {
    position: relative;
    overflow: hidden;
}

.myo_bbs .item .thumbox .thumbnail {
    padding-top: 100%;
}

.myo_bbs .item .thumbox .thumbnail .centered {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
}

.myo_bbs .item .thumbox .thumbnail .centered img,
.myo_bbs .item .thumbox .thumbnail .centered .framebox {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    height: auto;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.myo_bbs .item .thumbox .thumbnail .centered img.portrait {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
}

.myo_bbs .item .thumbox .thumbnail .centered img.landscape {
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
}

.myo_bbs .item .thumbox .thumbnail .centered .framebox {
    padding-bottom: 100% !important;
}

.myo_bbs .item .thumbox .myo_bbs .item .info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding-right: 10px;
}

.myo_bbs .item .title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: bold;
    font-size: 1.1em;
    padding: 0;
}

.myo_bbs .item .info .cate-date {
    font-size: .9em;
}

.myo_bbs .item .info .cate-date .cnt {
    margin-left: 10px;
}

.myo_bbs .item .info .cate-date .date {
    float: right;
}

.myo_bbs .item .info > .cnt,
.myo_bbs .item .title-cnt .cnt,
.myo_bbs .item .text {
    display: none;
}

/* ---------------
    웹진형
--------------- */
.myo_web .item a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.myo_web .item .info {
    padding: 10px 10px 5px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.myo_web .item .title {
    font-weight: bold;
    display: -webkit-inline-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0;
    vertical-align: middle;
}

.myo_web .item .text {
    margin-top: 5px;
    font-size: .85em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    color: var(--text);
}

.myo_web .item .info > .cnt {
    margin: 3px 0 0;
    color: var(--box);
}

.myo_web .item .title-cnt .cnt,
.myo_web .item .text:empty,
.myo_web .item .cate-date {
    display: none;
}

/* ----------------------
    보호글 비밀번호 입력창
------------------------- */
body#tt-body-page .pass {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

body:not(#tt-body-page) .pass {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px !important;
}

.pass form {
    max-width: 50%;
    width: 100%;
    margin: auto;
}

.pass input,
.pass button {
    margin: 5px 0;
    padding: 5px 0;
}

.pass input {
    width: 100%;
    border: 0;
    background: transparent;
}

.pass button {
    width: 100%;
    letter-spacing: 3px;
    padding: 10px;
    transition: .4s;
    font-weight: bold;
    background-color: var(--box);
}

.pass button:hover {
    background-color: var(--point2);
}

.pass input[required] + label {
    display: block;
    height: 48px;
    margin-top: -48px;
    margin-bottom: 0;
    pointer-events: none;
    line-height: 1;
}

.pass input[required] + label:before {
    content: attr(placeholder);
    display: inline-block;
    height: 48px;
    line-height: 48px;
    -webkit-transition-duration: .15s;
    transition-duration: .15s;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: .8em;
}

.pass input[required]:focus + label:before,
.pass input[required]:valid + label:before {
    -webkit-transform: translate(0, -24px) scale(1, 1);
    transform: translate(0, -24px) scale(1, 1);
    font-style: italic;
}

/* ---------------
    본문 영역
--------------- */
#myoList + #article > .post:first-child {
    margin-top: 15px;
}

body:not(#tt-body-page) #article .post {
    padding: 10px 0;
    border: 1px solid;
    border-color: var(--box);
}

body:not(#tt-body-page) #article .post:not(:last-child) {
    margin-bottom: 15px;
}

body:not(#tt-body-page) #article .post .text-item {
    padding: 0 10px;
}

body:not(#tt-body-page) #article .post #morebox,
body:not(#tt-body-page) #article .post .write,
body:not(#tt-body-page) #article .post .lst > ul {
    padding-left: 10px;
    padding-right: 10px;
}

body:not(#tt-body-page) #article .post .tags,
body:not(#tt-body-page) #article .post .container_postbtn {
    margin: 25px -10px 0;
    padding: 10px 10px 0;
}

body:not(#tt-body-page) #article .post .tags + .container_postbtn {
    margin-top: 0;
}

/* ---------------
    본문 타이틀
--------------- */
.titlebox {
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    word-break: keep-all;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.titlebox .left {
    overflow: hidden;
}

.titlebox .title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.titlebox .right {
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
    margin-left: 10px;
    font-size: .9em;
}

.titlebox .admin a:not(:first-child) {
    margin-left: 10px;
}

/* ---------------
    본문
--------------- */
.text-item {
    word-break: keep-all;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.text-item h1,
.text-item h2,
.text-item h3,
.text-item h4 {
    font-weight: bold !important;
}

.text-item u {
    text-decoration: none;
    position: relative;
    background-image: linear-gradient(to right, var(--box) 0%, var(--box) 100%);
    background-size: 100% 2px;
    background-position: center 100%;
    background-repeat: no-repeat;
    transition: .4s ease-out;
    padding: 3px;
}

.text-item u:hover {
    color: var(--screen);
    background-image: linear-gradient(to right, var(--point2) 0%, var(--point2) 100%);
    background-size: 100% 100%;
    border-radius: 20px;
}

.text-item u:hover::before {
    transform: translateY(0);
    transition: -webkit-transform .25s ease-out;
    transition: transform .25s ease-out;
}

.text-item s,
.text-item strike {
    text-decoration: none;
    background-image: linear-gradient(to right, var(--box) 0%, var(--box) 100%);
    background-size: 100% 2px;
    background-position: center 50%;
    background-repeat: no-repeat;
}

.text-item hr,
.text-item hr[data-ke-style],
#tt-body-page hr[data-ke-style] {
    border: 0;
    border-top: 1px solid;
    border-color: var(--box) !important;
    background-image: none;
}

.text-item ul,
.text-item li {
    list-style: inherit;
}

.text-item ul {
    list-style: disc inside;
}

.text-item ol {
    list-style: inside decimal;
}

.text-item ul[data-ke-list-type='disc'] li,
#tt-body-page .text-item ul[data-ke-list-type='disc'] li,
.text-item ul[data-ke-list-type='circle'] li,
#tt-body-page .text-item ul[data-ke-list-type='circle'] li,
.text-item ol[data-ke-list-type='decimal'] li,
#tt-body-page .text-item ol[data-ke-list-type='decimal'] li {
    text-indent: -15px;
    padding-left: 15px;
}

.text-item iframe,
.text-item embed,
.text-item table {
    width: 100%;
}

.text-item table .imageblock {
    width: 100% !important;
}

.text-item table[border^='1'],
.text-item table[border^='1'] tr,
.text-item table[border^='1'] td,
.text-item table.txc-table,
.text-item .txc-table tr,
.text-item .txc-table td {
    border: 1px solid;
    border-color: var(--text);
    border-spacing: 0;
    vertical-align: middle;
}

/* 아이프레임 */
.framebox {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    margin: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}

.framebox.ver {
    padding-bottom: 177.77%;
}

.framebox iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    vertical-align: top;
}

/* 각주 */
.footnote a,
.footnotes a {
    color: var(--box) !important;
}

.footnote a {
    font-family: var(--fontN) !important;
    font-size: .8em;
}

.footnote a:before {
    content: '(' !important;
    display: inline-block !important;
    border: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    transition: none !important;
    background-color: transparent !important;
    vertical-align: baseline !important;
}

.footnote a:after {
    content: ')'
}

.footnote a:hover,
.footnotes a:hover {
    color: var(--point2) !important;
}

/* 링크 */
.text-item p a:not(:only-child),
.text-item span a:not(:only-child),
.text-item .tx-link:not(:only-child),
.text-item blockquote a:not(:only-child),
.lst .text a:not(:only-child) {
    color: var(--box);
    transition: .4s;
}

.text-item p a:not(:only-child):hover,
.text-item span a:not(:only-child):hover,
.text-item .tx-link:not(:only-child):hover,
.text-item blockquote a:not(:only-child):hover,
.lst .text a:not(:only-child):hover {
    color: var(--point2);
}

.text-item p a:not(:only-child):after,
.text-item span a:not(:only-child):after,
.text-item .tx-link:not(:only-child):after,
.text-item blockquote a:not(:only-child):after,
.lst .text a:not(:only-child):after {
    content: '\f08e';
    font-family: 'fontAwesome';
    font-size: .8em;
    margin-left: 3px;
}

.text-item p a:only-child:not(.imgblock):not([href*="foot"]),
.text-item span a:only-child:not(.imgblock):not([href*="foot"]),
.text-item .tx-link:only-child:not(.imgblock):not([href*="foot"]),
.text-item blockquote a:only-child:not(.imgblock):not([href*="foot"]),
.lst .text a:only-child {
    position: relative;
    width: auto;
    height: 30px;
    line-height: inherit;
    padding: 0 10px;
    border: 0;
    border-radius: 20px;
    background-color: var(--box);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 1rem;
    transition: background-color .4s;
}

.text-item p a:only-child:not(.imgblock):not([href*="foot"]):hover,
.text-item span a:only-child:not(.imgblock):not([href*="foot"]):hover,
.text-item .tx-link:only-child:not(.imgblock):not([href*="foot"]):hover,
.text-item blockquote a:only-child:not(.imgblock):not([href*="foot"]):hover,
.lst .text a:only-child:hover {
    background-color: var(--point2);
}

.text-item p a:only-child:before,
.text-item span a:only-child:before,
.text-item .tx-link:only-child:before,
.text-item blockquote a:only-child:before,
.lst .text a:only-child:before {
    content: '\f08e';
    font-family: 'fontAwesome';
    margin-right: 6px;
    font-size: .8em;
}

.figure.fileblock a,
#tt-body-page figure.fileblock a:before,
.text-item .tx-link.imgblock:before,
.text-item .footnote a:before,
.text-item .footnotes a:before,
.text-item .another_category a:before {
    display: none;
}

.text-item a .imageblock img,
#tt-body-page figure.imageblock img,
figure.imageblock img {
    transition: .4s;
}

.text-item a .imageblock img:hover,
#tt-body-page figure.imageblock:hover img,
figure.imageblock:hover img {
    opacity: 0.5;
}

figure[data-ke-type='opengraph'],
#tt-body-page figure[data-ke-type='opengraph'] {
    position: relative;
    z-index: 1;
    margin-top: 5px;
    margin-bottom: 5px;
}

figure[data-ke-type='opengraph'] div.og-image {
    width: 100px;
    border: 0;
    background-color: var(--box);
    border-radius: 20px;
    position: relative;
}

figure[data-ke-type=opengraph] a div.og-image::before,
#tt-body-page figure[data-ke-type=opengraph] a div.og-image::before,
#tt-body-page .blogview_content figure[data-ke-type=opengraph] div.og-image::before {
    border-radius: 20px;
}

figure[data-ke-type='opengraph'] a,
#tt-body-page figure[data-ke-type='opengraph'] a {
    overflow: hidden;
    height: 100px;
    border: 0;
    background-color: var(--box);
    border-radius: 20px;
    display: flex;
}

figure[data-ke-type='opengraph'] div.og-text,
#tt-body-page figure[data-ke-type='opengraph'] div.og-text {
    position: static;
    padding: 0 3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    word-break: keep-all;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    flex-grow: 1;
    overflow: hidden;
}

figure[data-ke-type='opengraph'] div.og-text p.og-title,
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-title {
    font-weight: bold;
    font-size: 1.2em;
    color: var(--text);
    margin-bottom: 0px !important;
    transition: .4s;
    font-family: var(--fontK);
}

figure[data-ke-type='opengraph'] a:hover div.og-text p.og-title,
#tt-body-page figure[data-ke-type='opengraph'] a:hover div.og-text p.og-title {
    color: var(--point2);
}

figure[data-ke-type='opengraph'] div.og-text p.og-desc,
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-desc {
    color: var(--text);
    font-size: inherit;
    font-family: var(--fontK);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-bottom: 5px;
}

figure[data-ke-type='opengraph'] div.og-text p.og-host,
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-host {
    color: var(--point2);
    margin-bottom: 0 !important;
    font-family: inherit;
    position: static;
    font-size: .9em;
}

/* 이미지, 동영상 설명글 */
.text-item figure figcaption,
.text-item figure[data-ke-type='video'] figcaption {
    font-size: .8rem !important;
    z-index: 1;
    color: var(--text);
    word-break: keep-all;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.text-item figure figcaption:empty,
figure[data-ke-type='video'] figcaption:empty {
    display: none;
}

.text-item .imageblock,
.text-item .imageblock .cap1,
.text-item .imageblock > span:nth-child(2) {
    width: auto !important;
    text-align: center;
    margin: 3px 0;
    font-size: .8em;
}

/* 인용구 */
.text-item blockquote,
.text-item blockquote p {
    font-style: italic;
    font-size: inherit;
    line-height: inherit;
}

.tx-quote-tistory:before,
blockquote[data-ke-style='normal']:before,
#tt-body-page blockquote[data-ke-style='normal']:before,
blockquote[data-ke-style='style2']:before,
#tt-body-page blockquote[data-ke-style='style2']:before {
    content: '\e67f';
    font-family: 'themify';
    position: absolute;
    left: 0;
    top: 0;
}

.tx-quote-tistory:after,
blockquote[data-ke-style='normal']:after,
#tt-body-page blockquote[data-ke-style='normal']:after,
blockquote[data-ke-style='style2']:after,
#tt-body-page blockquote[data-ke-style='style2']:after {
    content: '\e67e';
    font-family: 'themify';
    position: absolute;
    right: 0;
    bottom: 0;
}

.tx-quote-tistory,
blockquote[data-ke-style='normal'],
#tt-body-page blockquote[data-ke-style='normal'],
blockquote[data-ke-style='style2'],
#tt-body-page blockquote[data-ke-style='style2'] {
    position: relative;
    height: auto;
    margin: 5%;
    padding: 1em 2em;
    font-style: italic;
    font-size: inherit;
}

/* 인용구2 */
blockquote[data-ke-style='box'],
#tt-body-page blockquote[data-ke-style='box'],
blockquote[data-ke-style='style3'],
#tt-body-page blockquote[data-ke-style='style3'] {
    padding: 10px;
    background-color: var(--box);
    border-radius: 20px;
    border: 0;
    color: var(--text);
    font-size: inherit;
    line-height: inherit;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* 더보기 */
.text-item .btn_less::before {
    display: none;
}

.text-item .btn_more::before {
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    vertical-align: inherit;
}

.text-item .btn_more,
.text-item .btn_less:first-child,
#tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless,
div[data-ke-type='moreLess'] .btn-toggle-moreless {
    padding: 10px;
    border-radius: 20px;
    background-color: var(--box);
}

.text-item .btn_more,
.text-item .btn_less,
#tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless,
div[data-ke-type='moreLess'] .btn-toggle-moreless {
    font-size: inherit;
    font-family: inherit;
    height: auto;
    transition: .4s;
    margin: 0;
    width: auto;
    color: var(--text);
    line-height: 1;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}


.text-item .btn_more,
.text-item .moreless_content {
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
}

#tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless,
div[data-ke-type='moreLess'] .btn-toggle-moreless {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}

.text-item .btn_more:hover,
.text-item .btn_less:first-child:hover,
#tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless:hover,
div[data-ke-type='moreLess'] .btn-toggle-moreless:hover,
.text-item .btn_less:first-child,
#tt-body-page div[data-ke-type='moreLess'].open .btn-toggle-moreless,
.text-item div[data-ke-type="moreLess"].open .btn-toggle-moreless {
    background-color: var(--point2);
}

.text-item .btn_less:first-child,
#tt-body-page div[data-ke-type='moreLess'].open .btn-toggle-moreless,
.text-item div[data-ke-type="moreLess"].open .btn-toggle-moreless {
    border-radius: 15px 15px 0 0;
}

.text-item .btn_more:before,
.text-item .btn_less:first-child span:before,
.text-item .btn-toggle-moreless:before {
    content: '\f07b';
    font-family: 'fontAwesome';
    margin-right: 5px;
    font-size: .85em;
}

.text-item .btn_less:first-child span:before,
#tt-body-page div[data-ke-type='moreLess'].open .btn-toggle-moreless:before,
.text-item div[data-ke-type="moreLess"].open .btn-toggle-moreless:before {
    content: '\f07c';
}

.text-item .btn_less:first-child:hover,
#tt-body-page div[data-ke-type='moreLess'].open .btn-toggle-moreless:hover,
.text-item div[data-ke-type="moreLess"].open .btn-toggle-moreless:hover {
    background-color: var(--box);
}

#content.moreless-auto.full div[data-ke-type='moreLess'] .moreless-content > p:first-child,
.txt_view {
    display: none;
}

.text-item .moreless_content .more-txt,
.text-item .moreless-content,
div[data-ke-type='moreLess'] .moreless-content,
#tt-body-page div[data-ke-type='moreLess'] .moreless-content {
    position: relative;
    padding: 10px;
    line-height: inherit;
    border-radius: 0 20px 20px;
    background-color: var(--box);
    color: var(--text);
    margin-bottom: 10px;
    overflow: hidden;
}

.text-item .moreless_content .btn_less:last-child,
.text-item .moreless-content .btn_less,
div[data-ke-type='moreLess'] .moreless-content .btn_less,
#tt-body-page div[data-ke-type='moreLess'] .moreless-content .btn_less {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 3px;
    font-size: .8em;
    width: 16px;
    text-align: center;
    color: var(--bg);
}

.text-item .moreless_content .btn_less:last-child:after,
.text-item .moreless-content .btn_less:after,
div[data-ke-type='moreLess'] .moreless-content .btn_less:after,
#tt-body-page div[data-ke-type='moreLess'] .moreless-content .btn_less:after {
    content: 'x';
}

.text-item .moreless_content .btn_less:last-child:hover,
.text-item .moreless-content .btn_less:hover,
div[data-ke-type='moreLess'] .moreless-content .btn_less:hover,
#tt-body-page div[data-ke-type='moreLess'] .moreless-content .btn_less:hover {
    color: var(--text);
}

.text-item .moreless_content .btn_less:last-child span {
    display: none;
}

.text-item .moreless_content .more-txt p a:not(:only-child) {
    color: var(--point2);
}

.text-item .moreless_content .more-txt p a:not(:only-child):hover {
    color: var(--text);
}

.text-item .moreless_content .more-txt p a:only-child:not(.imgblock):not([href*="foot"]),
.text-item .moreless-content p a:only-child:not(.imgblock):not([href*="foot"]),
div[data-ke-type='moreLess'] .moreless-content p a:only-child:not(.imgblock):not([href*="foot"]),
#tt-body-page div[data-ke-type='moreLess'] .moreless-content p a:only-child:not(.imgblock):not([href*="foot"]),
.text-item .moreless_content .more-txt figure[data-ke-type='opengraph'] a,
.text-item .moreless-content figure[data-ke-type='opengraph'] a,
div[data-ke-type='moreLess'] .moreless-content figure[data-ke-type='opengraph'] a,
#tt-body-page div[data-ke-type='moreLess'] .moreless-content figure[data-ke-type='opengraph'] a,
#tt-body-page .text-item .moreless_content .more-txt figure[data-ke-type='opengraph'] a,
#tt-body-page .text-item .moreless-content figure[data-ke-type='opengraph'] a,
#tt-body-page div[data-ke-type='moreLess'] .moreless-content figure[data-ke-type='opengraph'] a {
    background-color: var(--point2);
}

.text-item .moreless_content .more-txt p a:only-child:not(.imgblock):not([href*="foot"]):hover,
.text-item .moreless-content p a:only-child:not(.imgblock):not([href*="foot"]):hover,
div[data-ke-type='moreLess'] .moreless-content p a:only-child:not(.imgblock):not([href*="foot"]):hover,
#tt-body-page div[data-ke-type='moreLess'] .moreless-content p a:only-child:not(.imgblock):not([href*="foot"]):hover,
.text-item .moreless_content .more-txt figure[data-ke-type='opengraph'] div.og-text p.og-host,
.text-item .moreless-content figure[data-ke-type='opengraph'] div.og-text p.og-host,
div[data-ke-type='moreLess'] .moreless-content figure[data-ke-type='opengraph'] div.og-text p.og-host,
#tt-body-page div[data-ke-type='moreLess'] .moreless-content figure[data-ke-type='opengraph'] div.og-text p.og-host,
#tt-body-page .text-item .moreless_content .more-txt figure[data-ke-type='opengraph'] div.og-text p.og-host,
#tt-body-page .text-item .moreless-content figure[data-ke-type='opengraph'] div.og-text p.og-host,
#tt-body-page div[data-ke-type='moreLess'] .moreless-content figure[data-ke-type='opengraph'] div.og-text p.og-host,
.text-item .moreless_content .more-txt figure[data-ke-type='opengraph'] a:hover div.og-text p.og-title,
.text-item .moreless-content figure[data-ke-type='opengraph'] a:hover div.og-text p.og-title,
div[data-ke-type='moreLess'] .moreless-content figure[data-ke-type='opengraph'] a:hover div.og-text p.og-title,
#tt-body-page div[data-ke-type='moreLess'] .moreless-content figure[data-ke-type='opengraph'] a:hover div.og-text p.og-title,
.text-item .moreless_content .more-txt figure[data-ke-type='opengraph'] a:hover div.og-text p.og-title,
.text-item .moreless-content figure[data-ke-type='opengraph'] a:hover div.og-text p.og-title,
div[data-ke-type='moreLess'] .moreless-content figure[data-ke-type='opengraph'] a:hover div.og-text p.og-title,
#tt-body-page div[data-ke-type='moreLess'] .moreless-content figure[data-ke-type='opengraph'] a:hover div.og-text p.og-title {
    color: var(--box);
}

/* 이미지 슬라이드 */
figure.imageslideblock div.image-container {
    width: auto !important;
    max-width: 100%;
    max-height: none;
    min-width: auto;
    min-height: auto;
}

/* 파일 첨부 */
figure.fileblock,
#tt-body-page figure.fileblock {
    background-color: var(--box);
    border: 0;
    z-index: 1;
    border-radius: 40px;
}

figure.fileblock a:before,
#tt-body-page figure.fileblock a:before {
    content: ''
}

figure.fileblock .desc,
#tt-body-page figure.fileblock .desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

figure.fileblock .filename,
#tt-body-page figure.fileblock .filename {
    font-size: inherit;
    margin: 0;
    height: auto;
}

figure.fileblock .name,
#tt-body-page figure.fileblock .name {
    transition: .4s;
    font-weight: bold;
    font-size: 1.1em;
}

figure.fileblock:hover .name,
#tt-body-page figure.fileblock:hover .name {
    color: var(--text);
}

figure.fileblock .size,
#tt-body-page figure.fileblock .size {
    font-size: .9em;
    font-family: inherit;
    color: var(--point2);
    height: auto;
    margin: 0;
}

.text-item span.imageblock > a:before {
    content: '\f0c7' !important;
}

.text-item .imageblock > a > img {
    display: none;
}

/* ---------------
    공감 버튼
--------------- */
body .tags + .container_postbtn {
    margin-top: 0;
}

body .container_postbtn > *:not(.postbtn_like),
body .container_postbtn .postbtn_like > * {
    margin-top: 10px !important;
}

body .tags .title,
#opencmt a,
body .container_postbtn .postbtn_like > div,
body .container_postbtn .postbtn_like + .btn_menu_toolbar {
    font-size: .8em;
    margin: 0;
    margin-right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    white-space: nowrap;
    width: auto;
    height: 30px;
}

body .tags .title,
#opencmt a,
body .container_postbtn .postbtn_like button,
body .container_postbtn .postbtn_like + .btn_menu_toolbar {
    background-color: var(--box);
    border-radius: 20px;
    padding: 0 10px !important;
    min-width: 30px;
    min-height: 100%;
    transition: background-color .4s;
}

body .tags .title:hover,
#opencmt a:hover,
body .container_postbtn .postbtn_like button:hover,
body .container_postbtn .postbtn_like + .btn_menu_toolbar:hover {
    background-color: var(--point2);
}

body .container_postbtn {
    margin-top: 15px;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

body .container_postbtn .postbtn_like {
    border: 0;
    padding: 0;
    margin: 0;
    font-size: 1rem !important;
    display: flex;
    flex-wrap: wrap;
}

body .container_postbtn .postbtn_like + .btn_menu_toolbar {
    min-width: auto;
}

body .container_postbtn .btn_post {
    padding: 0;
}

body .container_postbtn .btn_post .ico_postbtn {
    background: none !important;
    width: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

body .container_postbtn .btn_post .txt_like,
body .container_postbtn .btn_post .ico_share,
body .container_postbtn .btn_menu_toolbar .txt_state,
body .container_postbtn .btn_post .ico_etc,

body .container_postbtn .btn_post .ico_statistics {
    font-family: var(--fontK) !important;
    text-indent: inherit !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    font-size: .8rem !important;
    font-weight: bold;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

body .container_postbtn .btn_post .txt_like:before,
body .container_postbtn .btn_post .ico_share:before,
body .container_postbtn .btn_post .ico_statistics:before,
body .container_postbtn .btn_menu_toolbar .txt_state:before,
body .container_postbtn .btn_post .ico_etc:before {
    margin-right: 6px;
    font-family: 'fontAwesome';
    vertical-align: middle;
    line-height: 1;
}

body .container_postbtn .btn_post .txt_like:before {
    content: '\f004';
}

body .container_postbtn .btn_post .like_on .txt_like:before {
    content: '\f21e'
}

body .container_postbtn .btn_post .ico_share,
body .container_postbtn .btn_post .ico_etc,
body .container_postbtn .btn_post .ico_statistics,
body .container_postbtn .btn_menu_toolbar .txt_state {
    width: auto !important;
    overflow: inherit;
    max-width: inherit;
    font-size: 0 !important;
}

body .container_postbtn .btn_post .ico_share:before,
body .container_postbtn .btn_post .ico_statistics:before,
body .container_postbtn .btn_post .ico_etc:before,
body .container_postbtn .btn_post .ico_share:after,
body .container_postbtn .btn_post .ico_statistics:before,
body .container_postbtn .btn_post .ico_statistics:after,
body .container_postbtn .btn_post .ico_etc:after,
body .container_postbtn .btn_menu_toolbar .txt_state:before,
body .container_postbtn .btn_menu_toolbar .txt_state:after {
    font-size: .8rem;
    vertical-align: middle;
}

body .container_postbtn .btn_post .ico_share:before {
    content: '\f1e0';
}

body .container_postbtn .btn_post .ico_share:after {
    content: '공유';
}

body .container_postbtn .btn_post .ico_statistics:before {
    content: '\f080';
    margin: 0;
}

body .container_postbtn .btn_post .ico_etc:before {
    content: '\f141';
    margin: 0;
}

body .container_postbtn .btn_menu_toolbar .txt_state:before {
    content: '\f234';
}

body .container_postbtn .btn_menu_toolbar .txt_state:after {
    content: '구독'
}

body .container_postbtn .btn_menu_toolbar.following .txt_state:before {
    content: '\f2b9';
}

body .container_postbtn .btn_menu_toolbar.following .txt_state:after {
    content: '구독중';
}

body .container_postbtn .postbtn_ccl {
    padding: 0;
    margin-left: auto;
}

body .container_postbtn .postbtn_ccl .bundle_ccl {
    display: flex;
    align-items: center;
    justify-content: center;
}

body .container_postbtn .postbtn_ccl .bundle_ccl .ico_postbtn {
    margin-left: 0;
}

/* ---------------
    본문 하단 태그
--------------- */
.tags {
    display: flex;
    align-items: center;
    margin-top: 25px;
    cursor: default;
    border-top: 1px solid;
    border-color: var(--box);
    padding-top: 10px;
    margin-bottom: 0 !important;
}


.tags .title i {
    margin-right: 6px;
    line-height: 11px;
}

.tags .tag {
    color: transparent !important;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.tags a:not(:last-child):after {
    content: '/';
    margin-left: 9px;
    margin-right: 3px;
    color: var(--text);
    font-size: 0.8em;
}

.tags a {
    white-space: nowrap;
    transition: .4s;
    margin-right: 5px;
}

.tags a:hover {
    color: var(--point2);
}

/* ---------------
    댓글 펼침
--------------- */
#opencmt {
    width: auto;
}

#opencmt a {
    text-decoration: none;
}

#opencmt i {
    margin-right: 6px;
    vertical-align: middle;
}

#opencmt .cnt {
    font-size: .8rem;
}

#opencmt .cnt:empty:after {
    content: '댓글';
    font-weight: bold;
}

#article.cmtopen #opencmt,
#article:not(.cmtopen) #rp > div {
    display: none;
}

/* ---------------
    댓글, 방명록
--------------- */
#article.cmtopen > div {
    display: block;
}

#rp .write {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid;
    border-color: var(--box);
}

/* 댓글, 방명록 작성 */
.write textarea {
    padding: 10px;
    height: 100px;
    min-height: 100px;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    position: relative;
    z-index: 100;
    display: block;
    vertical-align: top;
    transition: height .4s;
}

.write textarea:active,
.write textarea:focus {
    height: 150px;
}

.write .textarea {
    position: relative;
}

.write textarea::-webkit-resizer {
    opacity: 0;
}

.write .textarea:after {
    content: "";
    z-index: 1;
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: none;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 7px 7px;
    border-color: transparent transparent var(--point2) transparent;
}

.write textarea,
.write button,
.write .inputbox input,
.write input[name="secret"]:after {
    border-radius: 20px;
    background-color: var(--box);
}

.write button {
    padding: 5px;
    transition: .4s;
    width: 100%;
    height: 33px;
    font-weight: bold;
}

.write button:hover {
    background-color: var(--point2);
}

.write .inputbox {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

.write .inputbox input,
.write .secret {
    overflow: hidden;
    padding: 5px;
    margin-right: 5px;
}

.write .inputbox input {
    max-width: 50%;
    width: 100%;
    text-align: center;
    height: 33px;
    font-family: 'fontAwesome', var(--fontK);
}

.write .inputbox input:-moz-placeholder {
    transition: color .4s;
}

.write .inputbox input::placeholder {
    transition: color .4s;
}

.write .inputbox input:-ms-input-placeholder {
    transition: color .4s;
}

.write .inputbox input::placeholder {
    transition: color .4s;
}

.write .inputbox input:focus:-moz-placeholder {
    color: transparent;
    transition: color .4s;
}

.write .inputbox input:focus::placeholder {
    color: transparent;
    transition: color .4s;
}

.write .inputbox input:focus:-ms-input-placeholder {
    color: transparent;
    transition: color .4s;
}

.write .inputbox input:focus::placeholder {
    color: transparent;
    transition: color .4s;
}

.write .secret {
    position: relative;
    min-width: 33px;
    height: 33px;
}

.write .inputbox input[name="secret"] {
    visibility: hidden;
}

.write input[name="secret"]:after {
    content: "\f13e";
    font-family: 'fontAwesome';
    transition: .4s;
    visibility: visible;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.write input[name="secret"]:checked:after {
    content: "\f023";
    background-color: var(--point2);
}

.small .write .inputbox {
    flex-wrap: wrap;
}

.small .write .inputbox input {
    width: calc((100% - 43px) / 2);
}

.small .write .inputbox input[type="password"] {
    margin: 0;
}

.small .write .inputbox button {
    width: 100%;
    margin-top: 10px;
}

/* 댓글, 방명록 목록 */
.small .lst .info .date {
    display: none;
}

#rp.order .lst {
    flex-direction: column-reverse;
}

.lst {
    display: flex;
    flex-direction: column;
}

.lst > ul {
    padding: 20px 0;
    border-bottom: 1px solid;
    border-color: var(--box);
}

.lst > ul > div {
    width: 100%;
}

#tt-body-guestbook .lst > ul:last-child,
#rp:not(.order) .lst > ul:last-child,
#rp.order .lst > ul:first-child {
    padding-bottom: 0;
    border-bottom: 0;
}

#tt-body-guestbook .lst > ul:first-child,
#rp:not(.order) .lst > ul:first-child,
#rp.order .lst > ul:last-child {
    padding-top: 10px;
}

.lst .guest {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.lst .info {
    width: 100%;
    justify-content: space-between;
    margin-bottom: 10px;
}

.lst .info,
.lst .info > div,
.lst .info .pro + div {
    display: flex;
}

.lst .info .pro {
    position: relative;
    flex: 0 0 33px;
    height: 33px;
    justify-content: flex-start;
    border-radius: 50px;
    overflow: hidden;
    margin-right: 10px;
    z-index: 1;
}

.lst .info .pro img {
    width: 100%;
}

.lst .info .pro img[src*="profile_default"] + div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--box);
    z-index: -1;
}

body:not(.profile) .lst .pro,
body:not(.profile) img + div:not(.title),
.lst .name img[alt="BlogIcon"],
.lst .pro img[src*="profile_default"] {
    display: none !important;
}

.lst .info .pro + div {
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
}

.lst .info .name {
    font-weight: bold;
    font-size: 1.1em;
    background-color: var(--box);
    padding: 10px;
    line-height: 1;
    border-radius: 15px;
    display: inline-block;
    vertical-align: middle;
    min-height: 33px;
    min-width: 33px;
    text-align: center;
}

.lst .info .name:before,
.lst .info .name a:before,
.lst .info .name a:after {
    font-family: 'fontAwesome';
    margin-right: 5px;
}

.lst .rp_secret .info .name:before,
.lst .guest_secret .info .name:before,
.lst .hiddenComment .info .name:before {
    content: '\f023';
}

.lst .rp_secret .info .name:empty:before,
.lst .guest_secret .info .name:empty:before,
.lst .hiddenComment .info .name:empty:before {
    margin: 0;
}

.lst li:not(.rp_admin):not(.guest_admin) .info .name a:after {
    content: '\f015';
    font-size: .8em;
    margin: 0 0 0 5px;
}

.lst .info .name .tistoryProfileLayerTrigger {
    background-image: none;
    width: auto;
    margin: 0;
    position: relative;
}

.lst .info .name .tistoryProfileLayerTrigger:after {
    content: '\f2bd';
    font-family: 'fontAwesome';
    font-size: .6em;
    color: inherit;
    transition: .4s;
    margin-left: 5px;
    display: flex;
}

.lst .info .date {
    font-size: .8em;
    opacity: 0;
    transition: .4s;
    margin-left: 10px;
    cursor: default;
}

.lst .info .pro + div > div:first-child:hover .date {
    opacity: 1;
}

.lst .info .date a {
    font-size: 0;
}

.lst .info .date a:after {
    font-size: .8rem;
    content: '\f05e';
    margin-left: 10px;
    font-family: 'fontAwesome';
}

.lst li:hover .cmt-btn {
    opacity: 1;
}

.lst .info .cmt-btn {
    opacity: 0;
    transition: .4s;
}

.lst .info .cmt-btn a {
    margin-left: 15px;
    font-size: .8em;
    cursor: pointer;
}

.lst .tt_more_preview_comments_wrap {
    cursor: default !important;
}

.lst .tt_more_preview_comments_text {
    background-color: var(--box);
    padding: 10px;
    border-radius: 20px;
    font-weight: bold;
    transition: .4s;
    cursor: pointer;
}

.lst .tt_more_preview_comments_text:hover {
    background-color: var(--point2);
}

/* 주인 */
.lst .rp_admin,
.lst .guest_admin {
    background-color: var(--box);
    border-radius: 20px;
    padding: 15px;
}

.lst .rp_admin .name,
.lst .guest_admin .name {
    background-color: var(--screen1);
}

.lst .rp_admin .name:empty:before,
.lst .guest_admin .name:empty:before,
.lst .rp_admin .info .name a:before,
.lst .guest_admin .info .name a:before {
    content: '\f005';
    margin: 0;
    font-size: .8em;
}

.lst .rp_admin .info .pro img[src*="profile_default"] + div,
.lst .guest_admin .info .pro img[src*="profile_default"] + div {
    background-color: var(--point2);
}

.lst .rp_admin .text a:only-child,
.lst .guest_admin .text a:only-child {
    background-color: var(--point2);
    transition: .4s;
}

.lst .rp_admin .text a:only-child:hover,
.lst .guest_admin .text a:only-child:hover {
    color: var(--box);
}

/* 답글 */
.lst .reply .guest {
    margin-top: 20px;
}

/* ------------------
    카테고리 글 더보기
--------------------- */
#morebox.more_off {
    display: none;
}

#morebox {
    margin-top: 10px;
    border-top: 1px solid;
    border-color: var(--box);
    padding-top: 10px;
}

#morebox > .title {
    font-size: 1.2em;
    margin-bottom: 15px;
    cursor: default;
}

#morebox ol {
    grid-template-columns: repeat(4, 1fr);
}

#morebox.myo_bbs ol {
    grid-template-columns: repeat(2, 1fr);
}

.small #morebox ol {
    grid-template-columns: repeat(2, 1fr);
}

#morebox.myo_bbs ol {
    grid-template-columns: repeat(1, 1fr);
}

/* ---------------
    태그 클라우드
--------------- */
#tagcloud {
    display: block;
    border: 0;
    margin: 0;
    padding: 0;
}

/* ================ 
 *
 *   기타
 *
 * ================ */
/* sns */
.sns {
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: .8em;
}

.sns a:not(:first-child) {
    margin-left: 10px;
}

.sns a:last-child {
    margin-right: 10px;
}

/* 테마 모드 */
.theme {
    position: fixed;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999999999;
}

.theme a {
    width: 25px;
    height: 25px;
    border-radius: 50px;
    overflow: hidden;
    background-color: var(--screen);
    color: var(--box);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.theme a:hover {
    color: var(--point2);
}

.theme-dark .theme a {
    background-color: var(--box);
    color: var(--text);
}

.theme-dark .theme a:hover {
    color: var(--point2);
}

.theme-dark .theme .false,
.theme-light .theme .true {
    display: none;
}

.theme-dark .text-item p a:not(:only-child),
.theme-dark .text-item span a:not(:only-child),
.theme-dark .text-item .tx-link:not(:only-child),
.theme-dark .text-item blockquote a:not(:only-child),
.theme-dark .lst .text a:not(:only-child) {
    color: var(--point1);
}

/* 부드러운 화면 전환 */
.smooth-screen #loding {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--screen);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    overflow: hidden;
}

.smooth-screen #loding:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 30%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0.5) 68%, transparent 68%, transparent 100%);
    transform-origin: 0 0;
    -webkit-animation: tabletShine 2s infinite;
    animation: tabletShine 2s infinite;
}

@-webkit-keyframes tabletShine {
    0% {
        transform: skewX(-30deg) translateX(-100%);
    }

    100% {
        transform: skewX(-30deg) translateX(150%);
    }
}

@keyframes tabletShine {
    0% {
        transform: skewX(-30deg) translateX(-100%);
    }

    100% {
        transform: skewX(-30deg) translateX(150%);
    }
}

/* 새 글 아이콘 */
.new {
    color: var(--point2);
    margin-left: 5px;
    font-size: .8em;
    animation: animated-cursor 1500ms steps(30, end) infinite;
    font-family: var(--fontN);
    font-weight: normal;
}

@keyframes animated-cursor {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* 탑버튼 */
.top {
    display: none;
    position: fixed;
    right: 1.5vw;
    bottom: 1.5vh;
    z-index: 999;
    font-size: 2rem;
    text-align: center;
}

/* ie */
#ie {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 1.3em;
    padding: 5px;
    background-color: #000;
    border-radius: 0 0 10px 10px;
    color: #fff;
    z-index: 9999999999999;
    text-align: center;
}

#ie a {
    font-weight: bold;
    color: #ff0;
}

/* --------------------
    카피라이트 삭제 금지
----------------------- */
.copy {
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-size: 8px;
    font-family: 'Meddon', cursive;
    text-align: center;
    color: var(--box);
}

.copy:hover {
    color: var(--point2);
}

.copy.tool {
    right: auto;
}

@media screen and (min-width: 426px) {

    /* 1열 */
    .myo-theme-music #content.n1.myo_gal.normal,
    .myo-theme-music #content.hn1.myo_gal.normal.hover,
    .myo-theme-music #content.yn1.myo_gal.you-player,
    .myo-theme-music #content.yhn1.myo_gal.you-player.hover {
        padding: 0;
    }

    .myo-theme-music #content.n1.myo_gal.normal .post-header,
    .myo-theme-music #content.hn1.myo_gal.normal.hover .post-header,
    .myo-theme-music #content.yn1.myo_gal.you-player .post-header,
    .myo-theme-music #content.yhn1.myo_gal.you-player.hover .post-header {
        display: none !important;
    }

    .myo-theme-music #content.n1.myo_gal.normal .myo_gal .item,
    .myo-theme-music #content.hn1.myo_gal.normal.hover .myo_gal.hover .item,
    .myo-theme-music #content.yn1.myo_gal.you-player .myo_gal .item,
    .myo-theme-music #content.yhn1.myo_gal.you-player.hover .myo_gal.hover .item {
        padding: 0;
        border: 0;
    }

    .myo-theme-music #content.n1.myo_gal.normal .myo_gal.normal .item .thumbox:before,
    .myo-theme-music #content.hn1.myo_gal.normal.hover .myo_gal.normal.hover .item .thumbox:before,
    .myo-theme-music #content.yn1.myo_gal.you-player .myo_gal.you-player .item .thumbox:before,
    .myo-theme-music #content.yhn1.myo_gal.you-player.hover .myo_gal.you-player.hover .item .thumbox:before {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* 2열 */
    .n2 .myo_gal.normal:not(.hover) ol,
    .hn2 .myo_gal.normal.hover ol,
    .bn2 .myo_bbs.normal ol,
    .wn2 .myo_web.normal ol,
    .yn2 .myo_gal.you-player:not(.hover):not(.normal) ol,
    .yhn2 .myo_gal.you-player.hover:not(.normal) ol,
    .ybn2 .myo_bbs.you-player:not(.normal) ol,
    .ywn2 .myo_web.you-player:not(.normal) ol {
        grid-template-columns: repeat(2, 1fr);
    }

    .bn2 .myo_bbs.normal .item .thumbox,
    .ybn2 .myo_bbs.you-player .item .thumbox {
        flex: 0 0 15%;
    }

    /* 3열 */
    .n3 .myo_gal.normal:not(.hover) ol,
    .hn3 .myo_gal.normal.hover ol,
    .wn3 .myo_web.normal ol,
    .yn3 .myo_gal.you-player:not(.hover):not(.normal) ol,
    .yhn3 .myo_gal.you-player.hover:not(.normal) ol,
    .ywn3 .myo_web.you-player:not(.normal) ol {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 4열 */
    .n4 .myo_gal.normal:not(.hover) ol,
    .hn4 .myo_gal.normal.hover ol,
    .wn4 .myo_web.normal ol,
    .yn4 .myo_gal.you-player:not(.hover):not(.normal) ol,
    .yhn4 .myo_gal.you-player.hover:not(.normal) ol,
    .ywn4 .myo_web.you-player:not(.normal) ol {
        grid-template-columns: repeat(4, 1fr);
    }

    /* 5열 */
    .n5 .myo_gal.normal:not(.hover) ol,
    .hn5 .myo_gal.normal.hover ol,
    .wn5 .myo_web.normal ol,
    .yn5 .myo_gal.you-player:not(.hover):not(.normal) ol,
    .yhn5 .myo_gal.you-player.hover:not(.normal) ol,
    .ywn5 .myo_web.you-player:not(.normal) ol {
        grid-template-columns: repeat(5, 1fr);
    }

    /* 6열 */
    .n6 .myo_gal.normal:not(.hover) ol,
    .hn6 .myo_gal.normal.hover ol,
    .wn6 .myo_web.normal ol,
    .yn6 .myo_gal.you-player:not(.hover):not(.normal) ol,
    .yhn6 .myo_gal.you-player.hover:not(.normal) ol,
    .ywn6 .myo_web.you-player:not(.normal) ol {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media screen and (max-width: 425px) {
    body {
        background-image: none;
        padding: 15px !important;
    }

    .mbg {
        position: fixed;
        display: block;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-size: cover;
        background-position: center center;
        z-index: -1;
    }

    .myo-theme-switch .theme {
        position: static;
        margin-top: 30px;
        margin-bottom: 20px;
    }

    .catebox .scroll > div:not(.blogtitle) {
        line-height: 2.5 !important;
    }

    .catebox .title a {
        justify-content: flex-start;
    }

    #content {
        padding: 10px;
    }


    /* 1열 */
    .myo-theme-music #content.mn1.myo_gal.normal,
    .myo-theme-music #content.mhn1.myo_gal.normal.hover,
    .myo-theme-music #content.myn1.myo_gal.you-player,
    .myo-theme-music #content.myhn1.myo_gal.you-player.hover {
        padding: 0;
    }

    .myo-theme-music #content.mn1.myo_gal.normal .post-header,
    .myo-theme-music #content.mhn1.myo_gal.normal.hover .post-header,
    .myo-theme-music #content.myn1.myo_gal.you-player .post-header,
    .myo-theme-music #content.myhn1.myo_gal.you-player.hover .post-header {
        display: none !important;
    }

    .myo-theme-music #content.mn1.myo_gal.normal .myo_gal .item,
    .myo-theme-music #content.mhn1.myo_gal.normal.hover .myo_gal.hover .item,
    .myo-theme-music #content.myn1.myo_gal.you-player .myo_gal .item,
    .myo-theme-music #content.myhn1.myo_gal.you-player.hover .myo_gal.hover .item {
        padding: 0;
        border: 0;
    }

    .myo-theme-music #content.mn1.myo_gal.normal .myo_gal.normal .item .thumbox:before,
    .myo-theme-music #content.mhn1.myo_gal.normal.hover .myo_gal.normal.hover .item .thumbox:before,
    .myo-theme-music #content.myn1.myo_gal.you-player .myo_gal.you-player .item .thumbox:before,
    .myo-theme-music #content.myhn1.myo_gal.you-player.hover .myo_gal.you-player.hover .item .thumbox:before {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* 2열 */
    .mn2 .myo_gal.normal:not(.hover) ol,
    .mhn2 .myo_gal.normal.hover ol,
    .mwn2 .myo_web.normal ol,
    .myn2 .myo_gal.you-player:not(.hover):not(.normal) ol,
    .myhn2 .myo_gal.you-player.hover:not(.normal) ol,
    .mywn2 .myo_web.you-player:not(.normal) ol {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 3열 */
    .mn3 .myo_gal.normal:not(.hover) ol,
    .mhn3 .myo_gal.normal.hover ol,
    .mwn3 .myo_web.normal ol,
    .myn3 .myo_gal.you-player:not(.hover):not(.normal) ol,
    .myhn3 .myo_gal.you-player.hover:not(.normal) ol,
    .mywn3 .myo_web.you-player:not(.normal) ol {
        grid-template-columns: repeat(3, 1fr);
    }

    #morebox ol {
        grid-template-columns: repeat(2, 1fr);
    }

    #morebox.myo_bbs ol {
        grid-template-columns: repeat(1, 1fr);
    }

    body.small .catebox .blogtitle {
        text-align: left;
    }

    body.small .titlebox {
        flex-direction: column;
        align-items: baseline;
    }

    body.small .titlebox .right {
        margin: 10px 0 0 auto;
    }

    body.small figure[data-ke-type='opengraph'] a,
    body#tt-body-page.small figure[data-ke-type='opengraph'] a {
        height: 90px;
    }

    body.small figure[data-ke-type='opengraph'] div.og-image {
        display: none;
    }

    body.small figure[data-ke-type='opengraph'] div.og-text,
    body#tt-body-page.small figure[data-ke-type='opengraph'] div.og-text {
        padding: 0 10px;
    }

    .myo-theme-tamagotchi .screen {
        width: 57%;
    }

    .myo-theme-switch #container:after {
        padding-top: 200%;
    }

    .myo-theme-switch .tamagotchi__inner {
        flex-direction: column;
    }

    .myo-theme-switch .tamagotchi__inner .screenbox,
    .myo-theme-switch .tamagotchi__inner .joycon {
        width: 100%;
    }

    .myo-theme-switch .screenbox .volume {
        width: 1%;
        height: 4% !important;
        left: auto !important;
        top: 7% !important;
        right: -1%;
    }

    .myo-theme-switch .screenbox .volume.up {
        top: 13.5% !important;
    }

    .myo-theme-switch .joycon {
        height: 15%;
    }

    .myo-theme-switch .tamagotchi__inner .screenbox {
        left: 0;
        height: 70%;
        top: 15%;
        box-shadow: none;
    }

    .myo-theme-switch .screenbox .screen {
        border-radius: 5.5%/3.5%;
    }

    .myo-theme-switch .joycon--left {
        border-top-left-radius: 15% 50%;
        border-top-right-radius: 15% 50%;
        border-bottom-left-radius: 0;
        box-shadow: inset 0 0.2em 0 rgba(0, 0, 0, 0.1);
    }

    .myo-theme-switch .joycon__sign,
    .myo-theme-switch .joycon--left:before {
        width: 0.8%;
        height: 12%;
    }

    .myo-theme-switch .joycon--left:before {
        top: auto;
        right: 9%;
        bottom: 10%;
    }

    .myo-theme-switch .joycon__stick {
        width: 17.5%;
        top: 50%;
        transform: translateY(-50%);
        left: auto !important;
        right: 17%;
        padding: 1.5%;
    }

    .myo-theme-switch .joycon__cross {
        width: 20%;
        top: 50%;
        left: auto !important;
        right: 56%;
        transform: translate(50%, -50%) rotate(45deg);
    }

    .myo-theme-switch .joycon__options {
        width: 7%;
        right: auto !important;
        left: 20%;
        bottom: 9%;
    }

    .myo-theme-switch .joycon--right {
        border-top-right-radius: 0;
        border-bottom-left-radius: 15% 50%;
        border-bottom-right-radius: 15% 50%;
        bottom: 0;
        top: auto;
    }

    .myo-theme-switch .joycon__sign {
        right: 9%;
        left: auto;
        position: absolute;
    }

    .myo-theme-switch .joycon__sign a {
        height: 100%;
        transform: translateX(-40%);
        width: 600%;
    }

    .myo-theme-switch .joycon__stick--right {
        right: 49%;
    }

    .myo-theme-switch .joycon__cross--right {
        right: 29%;
    }

    .myo-theme-switch .joycon__options--home {
        top: 23%;
        bottom: auto !important;
    }

    .myo-theme-switch .joycon__cross--right > div > div,
    .myo-theme-switch .joycon__options--home::after {
        transform: rotate(90deg)
    }

    .myo-theme-switch.lite #container {
        border-radius: 15%/7.5%;
    }

    .myo-theme-switch .screenbox .volume {
        border-radius: 0 5px 5px 0;
    }

    .myo-theme-switch.lite .screenbox .screen {
        border-radius: 5.5%/4%;
        height: 100%;
        width: 88%;
    }

    .myo-theme-switch.lite .joycon--left .joycon__stick,
    .myo-theme-switch.lite .joycon--left .joycon__cross {
        top: 55%;
    }

    .myo-theme-switch.lite .d-pad {
        transform: translate(50%, -50%);
    }

    .myo-theme-switch.lite .joycon--left:before {
        bottom: 5%;
        right: 9%;
    }

    .myo-theme-switch.lite .joycon__options {
        bottom: 5%;
        left: 15%;
    }

    .myo-theme-switch.lite .joycon--right .joycon__cross,
    .myo-theme-switch .joycon__stick--right {
        top: 45%;
    }

    .myo-theme-switch.lite .joycon__options--home {
        left: 14%;
        top: 5%;
    }

    .myo-theme-switch.lite.border #container .screenbox .volume {
        right: calc(0px - 0.5% - 6px) !important;
        width: 0.5%;
    }

    .copy {
        margin-top: 15px;
        position: static;
    }
}