/*--------------------------------------------------------------
# fonts
--------------------------------------------------------------*/
@font-face {
	font-family: 'nexonL';
	src: url('https://iliberta.com/wp-content/themes/mozzirama/fonts/NEXON Lv1 Gothic OTF Light.eot');
	src: url('https://iliberta.com/wp-content/themes/mozzirama/fonts/NEXON Lv1 Gothic OTF Light.eot?#iefix') format('embedded-opentype'),
			 url('https://iliberta.com/wp-content/themes/mozzirama/fonts/NEXON Lv1 Gothic OTF Light.woff') format('woff');
}

@font-face {
	font-family: 'nexon';
	src: url('https://iliberta.com/wp-content/themes/mozzirama/fonts/NEXON Lv1 Gothic OTF.eot');
	src: url('https://iliberta.com/wp-content/themes/mozzirama/fonts/NEXON Lv1 Gothic OTF.eot?#iefix') format('embedded-opentype'),
			 url('https://iliberta.com/wp-content/themes/mozzirama/fonts/NEXON Lv1 Gothic OTF.woff') format('woff');
}

@font-face {
	font-family: 'nexonB';
	src: url('https://iliberta.com/wp-content/themes/mozzirama/fonts/NEXON Lv1 Gothic OTF Bold.eot');
	src: url('https://iliberta.com/wp-content/themes/mozzirama/fonts/NEXON Lv1 Gothic OTF Bold.eot?#iefix') format('embedded-opentype'),
			 url('https://iliberta.com/wp-content/themes/mozzirama/fonts/NEXON Lv1 Gothic OTF Bold.woff') format('woff');
}

@font-face {
	font-family: 'MontserratB';
	src: url('https://iliberta.com/wp-content/themes/mozzirama/fonts/Montserrat-Bold.eot');
	src: url('https://iliberta.com/wp-content/themes/mozzirama/fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
			 url('https://iliberta.com/wp-content/themes/mozzirama/fonts/Montserrat-Bold.woff') format('woff');
}

@font-face {
	font-family: 'NotoSansKR-L';
	src: url('https://iliberta.com/wp-content/themes/mozzirama/fonts/NotoSansKR-Light.eot');
	src: url('https://iliberta.com/wp-content/themes/mozzirama/fonts/NotoSansKR-Light.eot?#iefix') format('embedded-opentype'),
			 url('https://iliberta.com/wp-content/themes/mozzirama/fonts/NotoSansKR-Light.woff') format('woff');
}

@font-face {
	font-family: 'NotoSansKR-M';
	src: url('https://iliberta.com/wp-content/themes/mozzirama/fonts/NotoSansKR-Medium.eot');
	src: url('https://iliberta.com/wp-content/themes/mozzirama/fonts/NotoSansKR-Medium.eot?#iefix') format('embedded-opentype'),
			 url('https://iliberta.com/wp-content/themes/mozzirama/fonts/NotoSansKR-Medium.woff') format('woff');
}

@font-face {
	font-family: 'Inter-R';
	src: url('https://iliberta.com/wp-content/themes/mozzirama/fonts/Pretendard-Regular.eot');
	src: url('https://iliberta.com/wp-content/themes/mozzirama/fonts/Pretendard-Regular.eot?#iefix') format('embedded-opentype'),
			 url('https://iliberta.com/wp-content/themes/mozzirama/fonts/Pretendard-Regular.woff') format('woff');
}

:root {
  --font-size-8 : 8px;
  --font-size-10 : 10px;
  --font-size-11 : 11px;
  --font-size-12 : 12px;
  --font-size-13 : 13px;
  --font-size-14 : 14px;
  --font-size-15 : 15px;
  --font-size-16 : 16px;
  --font-size-17 : 17px;
  --font-size-18 : 18px;
  --font-size-20 : 20px;
  --font-size-23 : 23px;
  --font-size-25 : 25px;
  --font-size-28 : 28px;
  --font-size-30 : 30px;
  --font-size-32 : 32px;
  --font-size-38 : 38px;
  --font-size-42 : 42px;
  --font-size-46 : 46px;
  --font-size-48 : 48px;
  --font-size-52 : 52px;
  --font-size-54 : 54px;
  --font-size-62 : 62px;
  --font-size-68 : 68px;
  --font-size-72 : 72px;
  --font-size-84 : 84px;
  --font-size-92 : 92px;
  --size-width-s : 780px;
  --size-width-b : 550px;
  --size-width-m : 960px;
  --size-width-l : 1080px;
  --size-width-f : 100%;
  --size-width-v : 100vh;
  --size-height-f : 100%;
  --size-height-v : 100vh;
  --font-default : 'nexonL';
  --font-default-01 : 'nexon';
  --font-default-02 : 'nexonB';
  --font-Eng : 'Montserrat';
  --font-Eng-00 : 'MontserratL';
  --font-Eng-01 : 'MontserratB';
  --font-Eng-02 : 'MontserratBlack';
  --spacing-01 : 0.05em;
  --spacing-02 : 0.1em;
	}

#wpadminbar {
	top: 45px;
}

/*--------------------------------------------------------------
# Reset
--------------------------------------------------------------*/
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
	border: 0;
}

html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	margin: 0;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
  * Remove the inner padding in Chrome and Safari on macOS.
  */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * Remove the inner border and padding in Firefox.
 */
::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
body {
	background-color: var(--bg-color);
}

body,
button,
input,
select,
textarea {
	font-family: var(--font-default);
	font-weight: normal;
	text-transform: none;
	font-size: var(--font-size-15);
	line-height: 1.6;
	color: var(--colors-font-basic);
}

p {
	font-size: var(--font-size-18);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
}

pre {
	background: var(--colors-pre);
	font-family: inherit;
	font-size: inherit;
	line-height: normal;
	margin-top: 1.5em;
	margin-bottom: 10px;
	padding: 20px;
	overflow: auto;
	max-width: 100%;
	border-radius: 10px;
	color: var(--colors-pre-c);
}

blockquote {
	border-left: 5px solid var(--colors-pre);
	padding: 20px;
	font-size: 1.2em;
	font-style: italic;
	margin: 0 0 1.5em;
	position: relative;
}

blockquote p:last-child {
	margin: 0;
}

table,
th,
td {
	border: 1px solid rgba(0, 0, 0, 0.1);
}

table {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin: 0 0 1.5em;
	width: 100%;
}

th,
td {
	padding: 8px;
}

th {
	border-width: 0 1px 1px 0;
}

td {
	border-width: 0 1px 1px 0;
}

hr {
	background-color: rgba(0, 0, 0, 0.1);
	border: 0;
	height: 1px;
	margin-bottom: 40px;
	margin-top: 40px;
}

fieldset {
	padding: 0;
	border: 0;
	min-width: inherit;
}

fieldset legend {
	padding: 0;
	margin-bottom: 1.5em;
}

h1 {
	font-size: 42px;
	margin-bottom: 20px;
	line-height: 1.2em;
	font-weight: 600;
	text-transform: none;
}

h1.tit {
	line-height: 1.5;
}

h2 {
	font-size: 35px;
	margin-bottom: 20px;
	line-height: 1.5em;
	font-weight: 600;
	text-transform: none;
}

h3 {
	font-size: 29px;
	margin-bottom: 20px;
	line-height: 1.2em;
	font-weight: normal;
	text-transform: none;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 20px;
}

h4,
h5,
h6 {
	margin-bottom: 20px;
}

ul,
ol {
	margin: 0 0 0 0;
}

ul {
	list-style: none;
}

ol {
	list-style: none;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

b,
strong {
	font-weight: bold;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

address {
	margin: 0 0 1.5em;
}

code,
kbd,
tt,
var {
	
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	text-decoration: none;
}

sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

small {
	font-size: 75%;
}

big {
	font-size: 125%;
}

figure {
	margin: 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
	table-layout: fixed;
	word-break: break-all;
}

th {
	font-weight: bold;
}

img {
	height: auto;
	/* Make sure images are scaled correctly. */
	max-width: 100%;
	/* Adhere to container width. */
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background: var(--button-bg);
	color: var(--colors-font-basic);
	border: 0;
	cursor: pointer;
	-webkit-appearance: button;
	font-family: var(--font-default-01);
	font-size: var(--font-size-12);
	/* Corrects inability to style clickable 'input' types in iOS */
	padding: 10px 20px;
	border-radius: 20px;
}


button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	color: var(--colors-font-basic);
	background-color: var(--button-bg-hover);

}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	border-bottom: 1px solid var(--input-line);
	border-top: 0;
	border-left: 0;
	border-right: 0;
	width: var(--size-width-f);
	height: 45px;
	box-sizing: border-box;
	padding: 0 15px;
	resize: vertical;
	color: var(--colors-font-basic);
	background-color: transparent;
}

textarea {
	width: var(--size-width-f);
}

input:focus,
textarea:focus {
	outline: none;
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/

/*html,*/
/*body,*/
.wrap {
	width: var(--size-width-f);
	height: var(--size-height-f);
}

.smooth {
	scroll-behavior:smooth;
}

.wd-b {
	max-width: var(--size-width-b);
	width: var(--size-width-f);
	min-height: var(--size-height-v);
}

.wd-s {
	max-width: var(--size-width-s);
	width: var(--size-width-f);
	min-height: var(--size-height-v);
}

.wd-m {
	max-width: var(--size-width-m);
	width: var(--size-width-f);
	min-height: var(--size-height-v);
}

.wd-l {
	max-width: var(--size-width-l);
	width: var(--size-width-f);
	min-height: var(--size-height-v);
}

.wd-f {
	max-width: var(--size-width-f);
	width: var(--size-width-f);
	min-height: var(--size-height-v);
}

.content {
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.content-flex {
	display: flex;
	justify-content: center;
}

.vh-h {
	min-height: var(--size-height-v);
}

.vh-w {
	min-width: var(--size-width-v);
}


/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/
button,
input {
	webkit-transition: color 0.5s ease-in-out, background-color 0.5s ease-in-out;
	-moz-transition: color 0.5s ease-in-out, background-color 0.5s ease-in-out;
	-ms-transition: color 0.5s ease-in-out, background-color 0.5s ease-in-out;
	-o-transition: color 0.5s ease-in-out, background-color 0.5s ease-in-out;
	transition: color 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

button:hover {
	color: #797979;
	border: 1px solid #797979;
	background-color: var(--hover-color);
}

.hover:hover,
a.hover:hover {
	background-color: var(--hover-color);
}

.movehover:hover,
a.movehover:hover {
	position: relative;
	transform: translate(0px, -8px);
	transition: linear 300ms;
}

a {
	text-decoration: none;
	color: var(--colors-font-basic);
}
.button,
.wp-block-button .wp-block-button__link {
	padding: 10px 20px;
	display: inline-block;
}

.wp-block-button .wp-block-button__link {
	font-size: inherit;
	line-height: inherit;
}

.using-mouse :focus {
	outline: 0;
}

.using-mouse ::-moz-focus-inner {
	border: 0;
}

/*--------------------------------------------------------------
# toggle switch
--------------------------------------------------------------*/

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 20px;
}

.toggle-switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid var(--colors-font-basic);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 1px;
  bottom: 1px;
  background-color: var(--colors-font-basic);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--bg-color);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--bg-color)
}

input:checked + .slider:before {
  -webkit-transform: translateX(25px);
  -ms-transform: translateX(25px);
  transform: translateX(25px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


/*--------------------------------------------------------------
# grid
--------------------------------------------------------------*/

.grid-wrap {
	display: grid;
	/*margin-left: -480px;*/
}

.gap10 {
	grid-gap: 10px;
}

.gap20 {
	grid-gap: 20px;
}

.gap30 {
	grid-gap: 30px;
}

.gap40 {
	grid-gap: 40px;
}

._1fr-col {
	grid-template-columns: 1fr;
}

._1-4fr-col {
	grid-template-columns: 1.6fr 0.4fr;
}

._4-1fr-col {
	grid-template-columns: 0.3fr 1.7fr;
}

._2fr-col {
	grid-template-columns: 1fr 1fr;
}

._10fr-col {
	grid-template-columns: repeat(auto-fill, minmax(8%, auto));
}

._2-3fr-col {
	grid-template-columns: 0.8fr 1.2fr;
}

._3fr-col {
	grid-template-columns: 1fr 1fr 1fr;
}

.grid-item {
	position: relative;
}


._2l-3row {
	grid-area: 1/1/4;
}

._2l-2row {
	grid-area: 1/1/3;
}

._2r-3row {
	grid-template-areas: 1/2/4;
}

._2r-2row {
	grid-template-areas: 1/2/3;
}

._1t-2col {
	grid-area: 1/1/1/3;
}


._1t-3col {
	grid-area: 1/1/1/4;
}


.flex-wrap {
	display: flex;
	gap: 0;
	width: var(--size-width-f);
	flex-wrap: wrap;
	align-items: stretch;
}

.flex-item {
	width: calc(100% / 12 * var(--col-wd))
}

.__1 {
	--col-wd: 1;
}

.__2 {
	--col-wd: 2;
}

.__3 {
	--col-wd: 3;
}

.__4 {
	--col-wd: 4;
}



/*--------------------------------------------------------------
# Etc
--------------------------------------------------------------*/

.back::before {
	background-position: center;
	background-size: cover;
	background-repeat: none;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.circle {
	webkit-border-radius: 50%;
	-moz-border-radius: 50%; 
	-ms-border-radius: 50%; 
	-o-border-radius: 50%; 
	border-radius: 50%;
	overflow: hidden;
}

.radius {
	border-radius: 20px;
}

/*--------------------------------------------------------------
# thumnail
--------------------------------------------------------------*/

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

.thumb-xs {
	width: 80px;
	height: 80px;
	background-color: var(--thumb-color);
}

.thumb-s {
	width: 100px;
	height: 100px;
	background-color: var(--thumb-color);
}

.thumb-m {
	width: 130px;
	height: 130px;
	background-color: var(--thumb-color);
}

.thumb-full {
	width: 100%;
	background-color: var(--thumb-color);
}

.thumb-full::after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.thumb-book {
	width: 100%;
	background-color: var(--thumb-color);
}

.thumb-book::after {
	content: "";
	display: block;
	padding-bottom: 130%;
}

.thumb-half {
	width: 100%;
	background-color: var(--thumb-color);
}

.thumb-half::after {
	content: "";
	display: block;
	padding-bottom: 60%;
}

.imghover:hover .thumb-img img {
	width: 105%;
	height: 105%;
	transition: linear 300ms;
}

.thumb-inner {
	position: absolute;
	width: 100%;
	height: 100%;
}

.thumb-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: linear 300ms;
}

.thumb-filter {
	filter: brightness(0.9);
}

.thumb-filter-dark {
	filter: brightness(0.7);
}


/*--------------------------------------------------------------
# modal
--------------------------------------------------------------*/

.dot-modal {
	position: fixed;
	z-index: 11;
}

.modal {
	visibility: hidden;
	opacity: 0;
	transform: translate(0, 15px);
	transition: 500ms;
}
.modalclose {
	position: absolute;
	cursor: pointer;
	display: none;
}

/*--------------------------------------------------------------
# dropdown
--------------------------------------------------------------*/