@charset "UTF-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
@import url('https://fonts.cdnfonts.com/css/campton');
@import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css');
@font-face {
    font-family: 'AntroVectra';
    font-weight:400;
    src: url('../fonts/Antro_Vectra.woff2') format("woff2");
}

@font-face {
    font-family: 'Ramche';
    font-weight:400;
    src: url('../fonts/Ramche.woff2') format("woff2");
}

@font-face {
    font-family: 'MoviePoster';
    font-weight:400;
    src: url('../fonts/MoviePoster.woff2') format("woff2");
}

@font-face {
    font-family: 'Ghanachoco';
    font-weight: 400;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ghanachoco.woff') format('woff');
}

@font-face {
    font-family: 'Eulyoo';
    src: url('../fonts/Eulyoo1945-Regular.woff') format('woff');
    font-weight: 400;
}

@font-face {
    font-family: 'Eulyoo';
    src: url('../fonts/Eulyoo1945-SemiBold.woff') format('woff');
    font-weight: 700;
}

:root {
    --color1:#3C56FE;
    --color2:#FE9FF1;
    --color3:#FFEFB8;
    --color4:#2B293F;
    --color5:#dbf1ff;
    --color6:#fff1fe;
    --color7:#FFF2CC;
    --color8:#424977;
    --mono1:#121216;
    --mono2:#2b2b2e;
    --mono3:#5a5a5d;
    --mono4:#929295;
    --mono5:#c1c1c4;
    --mono6:#d7d7da;
    --mono7:#e7e7ea;
    --mono8:#f1f2f6;
    --mono9:#f7f8fa;
    --board1:#DB5343;
    --board2:#74CCE5;
    --lute1:#3d63ae;
    --lute2:#f293bd;
    --lute3:#e9e9e9;
    --lute4:#d2dbe4;
    --lute5:#e7d6dd;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    font-size:100%;
	padding:0;
    margin:0;
    border:0;
    word-break:keep-all;
    vertical-align:middle;
    line-height:1.4;
    letter-spacing:-0.025em;
}

html {margin:0 !important;}
body {color:var(--mono1);font-size:16px;font-family:'Ramche', sans-serif;background-color:var(--mono1) !important;}
address {font-style:normal;}
a {display:block;}
a:link, a:visited, a:active, a:hover {color:var(--mono1);text-decoration:none;}

html, body {height:100%;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display:block;}
ol, ul {list-style:none;}
li {list-style-type:none;}
blockquote, q {quotes:none;}
table {border-collapse:collapse;border-spacing:0;}

form {width:100%;box-sizing:border-box;}
input, select {vertical-align:middle;}
input:not([type=radio],[type=checkbox]), select, textarea {color:var(--mono3);font-size:1rem;font-weight:400;font-family:'Ramche', sans-serif;vertical-align:middle;padding:0 0.5rem;margin:0;border:2px solid var(--color4);border-radius:2px;background-color:#fff;box-sizing:border-box;transition:0.2s;}
select {color:var(--mono4);font-weight:300;;cursor:pointer;}
textarea {padding:10px;resize:none;}
input:not([type=radio],[type=checkbox]):hover, select:hover, textarea:hover {border:2px solid var(--color1);}
input:not([type=radio],[type=checkbox]):focus, select:focus, textarea:focus {color:var(--mono1);border:2px solid var(--color1);outline:0;}
button {font-family:'Ramche', sans-serif;padding:0;margin:0;border:0;border-radius:0;background:transparent;appearance:none;box-shadow:none;cursor:pointer;}

input[type=checkbox], input[type=radio] {width:16px;height:16px;margin:0 8px 0 0;border:1px solid var(--mono7);background-color:#fff;appearance:none;cursor:pointer;}
input[type=checkbox]:focus, input[type=radio]:focus {outline:5px solid var(--color3);}
input[type=checkbox] {border-radius:5px;}
input[type=checkbox]:checked {border-color:var(--color1);background:var(--color1) url(../images/icon-check-wh.svg) no-repeat center center / 10px;}
input[type=radio] {border-radius:50px;}
input[type=radio]:checked {border:5px solid var(--color1);}

::placeholder {color:var(--mono4);font-weight:300;}
::-webkit-input-placeholder {color:var(--mono4);font-weight:300;}
::-ms-input-placeholder {color:var(--mono4);font-weight:300;}

img {border:none;vertical-align:top;}

::selection {color:var(--color2);background-color:var(--color3);}

#wpadminbar {display:none;}

#page-wrap {position:relative;}
.skip-link {position:absolute;top:-40px;left:0;display:none;width:100%;color:#fff;text-align:center;line-height:40px;background-color:var(--mono1);}
.skip-link:focus {top:0;}
.clearfix::after {content:"";display:block;clear:both;}
.hidden {position:absolute;top:-99999px;left:-99999px;color:transparent;font-size:0;width:0;height:0;line-height:0;}

/* flex-area */
.flex-area {display:flex;}
.flex-area.row {flex-flow:row wrap;}
.flex-area.col {flex-flow:column wrap;}

/* hover-button */
.hover-button {width:48px;height:48px;}
.hover-button a {display:block;width:100%;height:100%;color:#fff;font-size:1rem;border:2px solid #fff;border-radius:4px;background:var(--color1) no-repeat center center / 20px;box-shadow:4px 4px 0 var(--color2);box-sizing:border-box;transition:0.2s;}
.hover-button a:hover {background-color:var(--color2);box-shadow:0 0 0 transparent;}

/* simple-button */
.simple-button {width:48px;height:48px;box-sizing:border-box;}
.simple-button a {position:relative;display:block;width:100%;height:100%;color:#fff;font-size:1rem;border-radius:12px;background:var(--color4) no-repeat center center / 20px;box-sizing:border-box;transition:0.2s;}
.simple-button a::after {content:"";position:absolute;top:50%;left:50%;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid #fff;border-radius:10px;box-sizing:border-box;transform:translate(-50%,-50%);}
.simple-button a:hover {background-color:var(--color8);}

.m-type {display:none;}

@media screen and (max-width:1024px){
    .hover-button {width:40px;height:40px;}
    .hover-button a {font-size:0.875rem;background-size:16px;}

    .simple-button {width:40px;height:40px;}
    .simple-button a {font-size:0.875rem;background-size:16px;}

    .pc-type {display:none;}
    .m-type {display:block;}
}

@media screen and (max-width:480px){
    html, body {font-size:14px;}
}