/* variable */
:root {
    --main-color: #f5c56d;
    --main-color-rgb: 245, 197, 109;

    --text-color-1: #283600;
    --text-color-2: #719900;

    --side-space: max(5%, 4rem);
}

/* reset */
html{ box-sizing: border-box; font-size: clamp(40%, calc(35% + .2vw), 62.5%); scroll-behavior:smooth; }
*,*:before,*:after{ box-sizing: inherit; outline: none; -webkit-tap-highlight-color:transparent; }
body { margin:0; padding:0; font-family:'Pretendard'; font-weight: inherit; color: #000; font-size: 1.6rem; line-height: 1.4; letter-spacing: -.1em; word-break: keep-all; }
ul,ol,li,dl,dt,dd{ margin: 0; padding: 0; list-style: none; }
p,h1,h2,h3,h4,h5,h6,figure,form,fieldset{ margin: 0; padding: 0; border: 0; font-size: inherit; font-weight: inherit; }
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
a { color: inherit; text-decoration: none; }
img { border: 0; vertical-align: middle; font-size: 0; max-width: 100%; }
table{ border-collapse: collapse; border-spacing: 0; width: 100%; }
button, select, input, textarea{ font-size: inherit; font-family: 'Pretendard'; }
b, strong{ font-weight: normal; }
address,em,i{ font-style: normal; }
button{ color: inherit; border:0; background:none; cursor:pointer; }
hr{ margin: 0; padding: 0; border: none; display: block; }
header, footer, article, section, aside, nav, main { display: block; }
button, input, select, textarea {  font-family: inherit; font-size: inherit; font-weight: inherit; margin: 0; padding: 0; }

/* text shadow */
.txt-shadow { text-shadow: -.1em .1em .1em rgba(0, 0, 0, .6); }

/* str cut */
.str-cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.str-cut2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: calc(1em * 1.4 * 2) !important; line-height: 1.4 !important; }
.str-cut3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height: calc(1em * 1.4 * 3) !important; line-height: 1.4 !important; }
.str-cut4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; height: calc(1em * 1.4 * 4) !important; line-height: 1.4 !important; }

/* none & block */
.block1200{ display: none; }
.block1100{ display: none; }
.block1000{ display: none; }
.block900{ display: none; }
.block800{ display: none; }
.block768{ display: none; }
.block700{ display: none; }
.block600{ display: none; }
.block500{ display: none; }
.block400{ display: none; }
@media screen and (max-width:1200px) {
    .none1200 { display: none; }
    .block1200 { display: block; }
}
@media screen and (max-width:1100px) {
    .none1100 { display: none; }
    .block1100 { display: block; }
}
@media screen and (max-width:1000px) {
    .none1000 { display: none; }
    .block1000 { display: block; }
}
@media screen and (max-width:900px) {
    .none900 { display: none; }
    .block900 { display: block; }
}
@media screen and (max-width:800px) {
    .none800 { display: none; }
    .block800 { display: block; }
}
@media screen and (max-width:768px) {
    .none768 { display: none; }
    .block768 { display: block; }
}
@media screen and (max-width:700px) {
    .none700 { display: none; }
    .block700 { display: block; }
}
@media screen and (max-width:600px) {
    .none600 { display: none; }
    .block600 { display: block; }
}
@media screen and (max-width:500px) {
    .none500 { display: none; }
    .block500 { display: block; }
}
@media screen and (max-width:400px) {
    .none400 { display: none; }
    .block400 { display: block; }
}