* { margin: 0; padding: 0; }

body { /* background-color: #406397; */ /* background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%); */ font-family: serif; width: 100vw; overflow-x: hidden; background-image: url("/assets/images/background.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; }

main { width: 100vw; min-height: 100vh; background-color: #4063977e; background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png"); background-attachment: fixed; display: grid; grid-template-rows: 5vh auto auto 5vh; }

#home { grid-template-rows: 5vh auto 5vh; height: 100vh; }

#center { place-self: center; position: relative; top: -10px; }

/* Header Area */
header { padding: 36px 0; position: relative; top: 0px; animation: down 1s; }

#title-wrapper { color: white; place-self: center; text-align: center; text-rendering: optimizeLegibility; -webkit-font-smoothing: subpixel-antialiased; animation: down 1.2s; position: relative; top: 0; cursor: default; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

#title { font-size: 70px; font-family: scotch-display; line-height: 70px; font-weight: 400; font-style: normal; vertical-align: center; }

#title #title-kor { font-family: "Nanum Myeongjo"; font-size: 36px; font-weight: 400; font-style: normal; }

h2 { font-family: "Nanum Myeongjo"; font-size: 24px; font-weight: 400; }

#subtitle { font-family: "Nanum Myeongjo"; font-size: 16px; font-weight: 400; display: block; text-align: center; overflow: hidden; white-space: nowrap; width: 90%; margin: 0 auto; text-align: center; color: white; }

#subtitle span { position: relative; display: inline-block; }

#subtitle span::before, #subtitle span::after { content: ""; position: absolute; top: 50%; width: 9999px; height: 1.5px; background: white; }

#subtitle span::before { right: 100%; margin-right: 15px; }

#subtitle span::after { left: 100%; margin-left: 15px; }

.w-line { height: 0px; width: 90%; border-bottom: 1.5px solid white; }

.b-line { height: 0px; width: 90%; border-bottom: 1.5px solid black; }

.top-line { place-self: end center; }

.btm-line { place-self: start center; }

/* Home image loading */
#images { position: absolute; z-index: -100; }

#images img { position: fixed; transform: translateY(-100%); -webkit-transform: translateY(100%); }

#dk { left: 25%; width: 53%; max-width: 437px; bottom: 0; animation: slide-in 0.8s forwards ease-out; -webkit-animation: slide-in 0.8s forwards ease-out; /*  animation: fade-in 0.5s ease-out; -webkit-animation: fade-in 0.5s ease-out; */ animation-delay: 4.5s; }

#jh { right: 25%; width: 40%; max-width: 331px; bottom: 0; animation: slide-in 0.8s forwards ease-out; -webkit-animation: slide-in 0.8s forwards ease-out; animation-delay: 5s; /* animation: fade-in 0.5s ease-out; -webkit-animation: fade-in 0.5s ease-out; */ }

@media only screen and (max-width: 900px) { #dk { left: 20%; } #jh { right: 20%; } }

@keyframes slide-in { 100% { transform: translateY(0%); } }

@keyframes fade-in { 0% { opacity: 0; }
  100% { opacity: 1; } }

/* Home typing effect */
#result { color: white; margin-bottom: 32px; display: inline-block; line-height: 24px; border-right: 1px solid #000; padding-right: 2px; box-sizing: border-box; animation: cursor 0.4s infinite; animation: blink 0.5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 1px solid; font-family: "Nanum Myeongjo"; font-size: 20px; font-weight: 200; pointer-events: none; }

.clicktypetext { background: linear-gradient(to right, transparent 50%, white 50%); background-size: 210% 100%; background-position: left bottom; transition: background-position 1s ease, color 1s ease; }

.clicktypetext:hover { background-position: right bottom; color: #87a2c0 !important; }

@keyframes cursor { 0% { border-right: 1px solid #fff; }
  50% { border-right: 1px solid #000; }
  100% { border-right: 1px solid #fff; } }

@keyframes typing { from { width: 0; } }

@keyframes blink { 50% { border-color: transparent; } }

/* Nav effects */
#home-menu { color: white; font-family: "Nanum Myeongjo"; font-size: 20px; margin-top: 32px; display: flex; justify-content: center; flex-wrap: wrap; animation: up 1.5s; position: relative; top: 0; cursor: default; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

@media only screen and (max-width: 400px) { #title { font-size: 48px; line-height: 48px; } #result { font-size: 16px; } #home-menu { font-size: 18px; width: 80%; margin: 32px auto; } #subtitle { font-size: 14px; } }

nav { width: fit-content; margin: 0 auto; margin-top: 24px; }

.nav-effect { display: inline-block; padding-top: 10px; padding-bottom: 5px; overflow: hidden; position: relative; margin: 0 12px; color: white; font-family: "Nanum Myeongjo"; }

.nav-effect a { text-decoration: none; color: white; }

.nav-effect:before, .nav-effect:after { content: ""; position: absolute; transition: transform 0.2s ease; }

.nav-effect:before { left: 0; bottom: 0; width: 100%; height: 2px; background-color: #ffffff; transform: translateX(-100%); }

.nav-effect:hover:before { transform: translateX(0); }

/* List page */
#list-wrapper { display: grid; row-gap: 24px; grid-template-rows: auto 1fr; width: 80%; max-width: 700px; margin: 0 auto; margin-bottom: 24px; }

#list-wrapper, #post-wrapper { animation: up 1.2s; position: relative; top: 0; }

#title-list { font-size: 24px; font-family: scotch-display; font-weight: 400; font-style: normal; margin-top: 12px; }

#title-list a { text-decoration: none; color: white; transition: all 0.2s ease-out; }

#title-list a:hover { color: #b5b5b5; transition: all 0.2s ease-out; }

/* Post List */
#post-wrapper { display: grid; row-gap: 24px; grid-template-rows: auto 1fr; width: 80%; max-width: 700px; margin: 0 auto; margin-bottom: 24px; background-color: white; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

#post-list { /* background-color: white; */ font-family: "Noto Sans KR"; padding: 36px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; /* justify-content: stretch; */ }

#post { font-family: "Noto Sans KR"; padding: 36px; display: grid; grid-template-rows: 400px auto; place-items: center; background: linear-gradient(rgba(255, 255, 255, 0.4) 0px, white 300px, white 100%); }

#post #adultcheck-wrapper { display: grid; justify-items: center; row-gap: 24px; margin-bottom: 48px; text-align: center; }

#post #adultcheck-wrapper a { display: block; color: #406397; text-decoration: none; font-weight: 700; }

#post #adultcheck-wrapper #checker { display: grid; justify-items: center; row-gap: 12px; }

#post #adultcheck-wrapper input { background-image: none; background-color: #e6e6e6; color: #565656; border: none; padding: 12px 20px; border-radius: 21px; width: 200px; font-family: "Noto Sans KR"; }

#post #adultcheck-wrapper button { cursor: pointer; display: block; width: 240px; background-image: none; border: none; background-color: #4063977e; border-radius: 21px; padding: 12px 20px; font-weight: 700; color: white; transition: all 0.3s ease-in-out; }

#post #adultcheck-wrapper button:hover { background-color: #406397; transition: all 0.3s ease-in-out; }

.post-item { width: 90%; max-width: 600px; height: 180px; background-position: center; background-size: cover; text-decoration: none; color: black; cursor: pointer; position: relative; transition: all 0.25s ease-out; top: 0; border: 1px #406397 solid; margin-bottom: 20px; text-align: center; font-size: 14px; border-radius: 100px; }

.post-item .post-wrapper { background-color: rgba(255, 255, 255, 0.6); width: 100%; height: 100%; border-radius: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.25s ease-out; }

.post-item .post-wrapper .post-author { transition: all 0.25s ease-out; color: black; padding: 8px; height: 16px; width: fit-content; font-weight: 600; background: linear-gradient(to bottom, #80b3ff 0%, #80b3ff 100%); background-size: 100% 14px; background-repeat: no-repeat; background-position: bottom; }

.post-item .post-wrapper .post-title { padding: 8px; transition: all 0.3s ease-out; font-size: 16px; font-weight: 700; display: flex; align-items: center; }

.post-item .post-wrapper .post-title .adult { background-color: #ffb700; font-size: 8px; padding: 2px 4px; border-radius: 16px; margin-left: 8px; margin-top: 2px; font-weight: 400; color: black; }

.post-item .post-tags { display: flex; }

.post-item .post-tags .post-tag { transition: all 0.25s ease-out; color: black; border: 1px solid #406397; padding: 4px 8px; margin: 0 4px; border-radius: 16px; font-size: 12px; background-color: rgba(255, 255, 255, 0.4); }

.post-item:hover { transition: all 0.25s ease-out; }

.post-item:hover .post-wrapper { transition: all 0.25s ease-out; background-color: rgba(0, 0, 0, 0.2); }

.post-item:hover .post-author, .post-item:hover .post-title { transition: all 0.25s ease-out; color: white; }

.post-item:hover .post-author .adult, .post-item:hover .post-title .adult { color: black; }

.post-item:hover .post-author { transition: all 0.25s ease-out; background: linear-gradient(to bottom, #406397 0%, #406397 100%); background-size: 100% 26px; background-repeat: no-repeat; background-position: bottom; }

.post-item:hover .post-tag { transition: all 0.25s ease-out; border: 1px solid #406397; padding: 4px 8px; margin: 0 4px; border-radius: 16px; background-color: #406397; color: white; }

@media only screen and (max-width: 768px) { #list-wrapper, #post-wrapper { width: 90%; } #list-wrapper #post-list, #post-wrapper #post-list { padding: 36px 0; } .post-item { width: 100%; height: 150px; } }

/* Post Page */
#post-header { text-align: center; margin-top: 48px; width: fit-content; }

#post-content { word-break: break-all; width: 90%; margin: 48px auto; font-weight: 400; line-height: 1.6; }

#art-content { word-break: break-all; width: 100%; margin: 48px auto; font-weight: 400; }

#art-content img { width: 100%; display: block; }

#post-content { font-size: 14px; }

@media only screen and (max-width: 768px) { #post { padding: 36px 16px; grid-template-rows: 300px auto; background: linear-gradient(rgba(255, 255, 255, 0.4) 0px, white 200px, white 100%); } #post-content { width: 95%; margin: 48px auto; font-weight: 400; font-size: 14px; } }

#header-line { margin: 20px auto; width: 100%; }

#post-title { font-weight: 600; font-size: 18px; font-family: "Nanum Myeongjo"; }

#post-author { margin-top: 12px; color: gray; font-family: "Nanum Myeongjo"; font-size: 12px; }

#scroll, #comment { position: fixed; background-color: rgba(0, 0, 0, 0.7); width: 56px; height: 56px; line-height: 56px; text-align: center; font-size: 20px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease-in-out; color: white; }

#scroll:hover, #comment:hover { transition: all 0.3s ease-in-out; background-color: rgba(0, 0, 0, 0.9); }

#scroll { bottom: 48px; right: 48px; }

#comment { bottom: 120px; right: 48px; }

@media only screen and (max-width: 768px) { #scroll, #comment { right: 24px; font-size: 16px; width: 48px; height: 48px; line-height: 48px; } #scroll { bottom: 24px; } #comment { bottom: 80px; } }

/* Art List - gallery */
#art-list { font-family: "Noto Sans KR"; padding: 36px 0; display: grid; column-gap: 24px; row-gap: 24px; grid-template-columns: 1fr 1fr; align-items: center; }

.art-item { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; width: 100%; max-width: 550px; height: 300px; background-position: center; background-size: cover; text-decoration: none; color: black; cursor: pointer; position: relative; transition: all 0.25s ease-out; top: 0; border: 1px #406397 solid; margin-bottom: 20px; text-align: center; font-size: 14px; border-radius: 28px; }

.art-item .placeholder { height: 45%; width: 100%; }

.art-item .post-wrapper { background-color: rgba(255, 255, 255, 0.6); width: 100%; height: 100%; border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.25s ease-out; }

.art-item .post-wrapper .post-author { transition: all 0.25s ease-out; color: black; padding: 8px; height: 16px; width: fit-content; font-weight: 600; background: linear-gradient(to bottom, #80b3ff 0%, #80b3ff 100%); background-size: 100% 14px; background-repeat: no-repeat; background-position: bottom; }

.art-item .post-wrapper .post-title { padding: 8px; transition: all 0.3s ease-out; font-size: 16px; font-weight: 700; display: flex; align-items: center; }

.art-item .post-wrapper .post-title .adult { background-color: #ffb700; font-size: 8px; padding: 2px 4px; border-radius: 16px; margin-left: 8px; margin-top: 2px; font-weight: 400; }

.art-item .post-tags { display: flex; flex-wrap: wrap; justify-content: center; width: 80%; margin: 0 auto; }

.art-item .post-tags .post-tag { transition: all 0.25s ease-out; color: black; border: 1px solid #406397; padding: 4px 8px; margin: 0 4px 4px; border-radius: 16px; font-size: 12px; background-color: rgba(255, 255, 255, 0.6); }

.art-item:hover { transition: all 0.25s ease-out; }

.art-item:hover .post-wrapper { transition: all 0.25s ease-out; background-color: rgba(0, 0, 0, 0.2); }

.art-item:hover .post-author, .art-item:hover .post-title { transition: all 0.25s ease-out; color: white; }

.art-item:hover .post-author .adult, .art-item:hover .post-title .adult { color: black; }

.art-item:hover .post-author { transition: all 0.25s ease-out; background: linear-gradient(to bottom, #406397 0%, #406397 100%); background-size: 100% 26px; background-repeat: no-repeat; background-position: bottom; }

.art-item:hover .post-tag { transition: all 0.25s ease-out; border: 1px solid #406397; padding: 4px 8px; margin: 0 4px 4px; border-radius: 16px; background-color: #406397; color: white; }

@media only screen and (max-width: 768px) { #art-list { padding: 36px 0; display: grid; column-gap: 24px; row-gap: 24px; grid-template-columns: 1fr; align-items: center; } #art-list .art-item { margin: 0 auto; } }

/* Behind Speech bubble*/
#behind-bubble { position: relative; background: #406397; border-radius: 0.4em; width: 80%; font-size: 14px; padding: 16px; place-self: center; position: relative; left: 14px; color: white; font-weight: 200; }

#behind-bubble:after { content: ""; position: absolute; left: 0; top: 20%; width: 0; height: 0; border: 28px solid transparent; border-right-color: #406397; border-left: 0; border-top: 0; margin-top: -14px; margin-left: -28px; }

/* Review Sending */
#review { width: 90%; margin: 64px auto 0; }

#review #review-header { margin: 32px 0; font-size: 14px; }

#review-form { display: grid; row-gap: 8px; font-size: 14px; }

#review-form label { font-weight: 400; color: #406397; margin-top: 8px; }

#review-form input, #review-form textarea { display: block; background-image: none; background-color: #e6e6e6; color: #565656; border: none; padding: 12px 20px; border-radius: 12px; font-family: "Noto Sans KR"; }

#review-form input::placeholder { color: gray; }

#review-form button { cursor: pointer; width: 150px; background-image: none; border: none; font-weight: 700; background-color: #4063977e; border-radius: 21px; padding: 12px 20px; color: white; transition: all 0.3s ease-in-out; margin-top: 24px; }

#review-form button:hover { background-color: #406397; transition: all 0.3s ease-in-out; }

/* Behind */
#behind-list { margin-top: 48px; }

.behind-item { max-width: 480px; font-family: "Noto Sans KR"; padding: 36px; padding-top: 0; margin: 0 auto; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: left; font-size: 14px; background-color: rgba(255, 255, 255, 0.7); margin-bottom: 64px; }

.behind-name { font-weight: 700; height: 32px; width: 128px; text-align: center; line-height: 32px; background-color: #406397; color: white; position: relative; top: -32px; left: -36px; border-radius: 4px 4px 0 0; }

.behind-link { align-self: flex-end; color: #406397; font-weight: 700; margin-top: 16px; }

/* Animations */
@keyframes opacity-blur { 0% { opacity: 0;
    filter: blur(10px); }
  100% { opacity: 1;
    filter: blur(0); } }

@keyframes opacity { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes up { 0% { opacity: 0;
    top: 20px; }
  30% { opacity: 0;
    top: 20px; }
  100% { opacity: 1;
    top: 0px; } }

@keyframes down { 0% { opacity: 0;
    top: -20px; }
  100% { opacity: 1;
    top: 0px; } }

/* 404 page*/
#page_404 { margin: 0px auto 24px; max-width: 600px; text-align: center; place-self: center; font-family: "Noto Sans KR"; color: white; }

#page_404 img { max-height: 400px; width: auto; }

#page_404 h3 { margin: 24px 0; }

/*# sourceMappingURL=main.css.map */