@charset "utf-8";

/*!
 * Yuuto CSS v1.0 (https://yuuto.kr)
 * 2025.04.10
 */

/* Initialize */
html {width:100%;height:100%}
html *, html *::before, html *::after {box-sizing:border-box}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset,img {border:0}
dl,ul,ol,menu,li {list-style:none}
blockquote,q {quotes:none}
blockquote::before, blockquote::after, q::before, q::after {content:''}
input,select,textarea,button {vertical-align:middle}
button {border:0 none;background-color:transparent;color:#fff;cursor:pointer}
button:not(:disabled):not(.disabled) {cursor:pointer}
body {background:#fff}
body,th,td,input,select,textarea,button {font-size:1rem;line-height:1.5;font-family:Pretendard,'맑은 고딕','Malgun Gothic','돋움',dotum,sans-serif}
a {color:#fff;text-decoration:none}
a:hover, a:active, a:focus {text-decoration:underline}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}

/* body */
body {overflow-x:hidden;width:100%;height:100%;-webkit-transition:.5s ease-in;transition:.5s ease-in}
.yuuto_on {background:#036}
.blind {display:block;overflow:hidden;position:absolute;top:-99999px;width:0;height:0}

/* main */
main {display:block;width:100%;height:100%}
main .on {display:table;opacity:1}
main .off {display:table;opacity:0}
section {display:table;width:100%;height:100%;-webkit-transition:.5s ease;transition:.5s ease}
article {display:table-cell;padding:1.5rem 0;color:#fff;text-align:center;vertical-align:middle}
.wrap_article {-webkit-animation:show_article 0.5s linear 0s both;animation:show_article 0.5s linear 0s both}

.section_intro {display:none}
.section_intro button {overflow:hidden;position:relative;width:26.25rem;height:26.25rem;padding:.625rem;border-radius:50%;background:#fff;box-shadow:0 0 20px rgba(0,0,0,.5)}
.section_intro img {width:25rem;height:25rem;border-radius:50%}
.section_intro h1 {margin:2rem 0 0;font-weight:700;font-size:3rem;color:#fba}
.section_intro p {margin:0.5rem 0 0;font-weight:500;font-size:2rem;color:#ccc}
.section_intro ul {display:inline-block;overflow:hidden;margin:1rem 0 0}
.section_intro li {display:block;float:left}
.section_intro li + li {margin-left:1rem}
.section_intro li a {overflow:hidden;display:block;width:2.5rem;height:2.5rem;font-weight:500;text-align:center;color:#fff}
.section_intro li span {display:block;text-indent:100%}

.section_about {display:none}
.section_about .wrap_article {display:inline-block;position:relative;width:40rem;padding:1.25rem;background-color:#fdc;font-weight:500;font-size:1.25rem;text-align:left;color:#333;box-shadow:0 0 20px rgba(0,0,0,.5)}
.section_about h2 {font-weight:700;font-size:2rem;color:#258}
.section_about small {font-size:1rem}
.section_about .txt_profile {display:block}
.section_about button {overflow:hidden;position:absolute;top:1rem;right:1rem;width:2rem;height:2rem;font-weight:500;color:#333}
.section_about ul {margin:1rem 0 0;padding:1rem 0 0;border-top:2px dashed #999}
.section_about ul li {overflow:hidden;color:#333}
.section_about ul li + li {margin-top:1.5rem}
.section_about ul li span {display:block}
.section_about ul li span:nth-child(2n+1) {font-weight:700;color:#258;text-transform:uppercase}
.section_about ul li span:nth-child(2n) {font-weight:500}
.section_about a {color:#333}

@-webkit-keyframes show_article {
    0% {opacity:0;transform:scale(0.7)}
    70% {transform:scale(1.1)}
    100% {opacity:1;transform:scale(1)}
}

@keyframes show_article {
    0% {opacity:0;transform:scale(0.7)}
    70% {transform:scale(1.1)}
    100% {opacity:1;transform:scale(1)}
}

@media screen and (max-width:767px) {
    article {padding:1.5rem}
    .section_intro button {width:16.25rem;height:16.25rem}
    .section_intro p {font-size:1.5rem}
    .section_intro img {width:15rem;height:15rem}
    .section_about .wrap_article {width:100%;max-width:40rem}
}