*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;line-height:1.5}
@font-face {
    font-family: 'HakgyoansimBareonbatangB';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/HakgyoansimBareonbatangB.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}



html,body{color:#555;margin:0;padding:0;}

html{font-family:"Libre Baskerville","Times New Roman",Times,serif;font-size:14px}

@media (min-width: 900px){html{font-size:16px}}
body{-webkit-text-size-adjust:100%;overflow-x: hidden;}
h1,h2,h3,h4,h5,h6{color:#353535;font-family:"Libre Baskerville","Segoe UI",Helvetica,Arial,sans-serif;line-height:normal}
li,ul,p{color:#353535;font-family:'Lato',sans-serif;}
li,ul{padding:0.1rem 0.2rem 0.2rem 0.7rem;}
a{color:#1c5596;text-decoration:none; } 
    /* font-weight: bold;} */
/* p a{color:#78b1e3;text-decoration:none} */

.justify {
    text-align: justify;
  }
.justify:after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 0;
    line-height: 0;
  }

blockquote{border-left:0.25rem solid #e5e5e5;color:#979797;margin:.8rem 0;padding:.5rem 1rem}
blockquote p:last-child{margin-bottom:0}
@media (min-width: 900px){blockquote{padding:0 5rem 0 1.25rem}}
img{display:block;margin:0 0 1rem;max-width:100%}td{vertical-align:top}
pre,code{font-family:Menlo,Monaco,monospace}code{background-color:#f9f9f9;border-radius:3px;color:#bf616a;font-size:85%;padding:.25em .5em}pre{margin:0 0 1rem}pre code{background-color:transparent;color:inherit;font-size:100%;padding:0}.highlight{background-color:#f9f9f9;border-radius:3px;line-height:1.4;margin:0 0 1rem;padding:1rem}.highlight pre{margin-bottom:0;overflow-x:auto}.highlight .lineno{color:#aaa;display:inline-block;padding:0 .75rem 0 .25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.highlight .hll{background-color:#ffc}.highlight .c{color:#999}.highlight .err{color:#a00;background-color:#faa}.highlight .k{color:#069}.highlight .o{color:#555}.highlight .cm{color:#09f;font-style:italic}.highlight .cp{color:#099}.highlight .c1{color:#999}.highlight .cs{color:#999}.highlight .gd{background-color:#fcc;border:1px solid #c00}.highlight .ge{font-style:italic}.highlight .gr{color:red}.highlight .gh{color:#030}.highlight .gi{background-color:#cfc;border:1px solid #0c0}.highlight .go{color:#aaa}.highlight .gp{color:#009}.highlight .gu{color:#030}.highlight .gt{color:#9c6}.highlight .kc{color:#069}.highlight .kd{color:#069}.highlight .kn{color:#069}.highlight .kp{color:#069}.highlight .kr{color:#069}.highlight .kt{color:#078}.highlight .m{color:#f60}.highlight .s{color:#d44950}.highlight .na{color:#4f9fcf}.highlight .nb{color:#366}.highlight .nc{color:#0a8}.highlight .no{color:#360}.highlight .nd{color:#99f}.highlight .ni{color:#999}.highlight .ne{color:#c00}.highlight .nf{color:#c0f}.highlight .nl{color:#99f}.highlight .nn{color:#0cf}.highlight .nt{color:#2f6f9f}.highlight .nv{color:#033}.highlight .ow{color:#000}.highlight .w{color:#bbb}.highlight .mf{color:#f60}.highlight .mh{color:#f60}.highlight .mi{color:#f60}.highlight .mo{color:#f60}.highlight .sb{color:#c30}.highlight .sc{color:#c30}.highlight .sd{color:#c30;font-style:italic}.highlight .s2{color:#c30}.highlight .se{color:#c30}.highlight .sh{color:#c30}.highlight .si{color:#a00}.highlight .sx{color:#c30}.highlight .sr{color:#3aa}.highlight .s1{color:#c30}.highlight .ss{color:#fc3}.highlight .bp{color:#366}.highlight .vc{color:#033}.highlight .vg{color:#033}.highlight .vi{color:#033}.highlight .il{color:#f60}.css .o,.css .o+.nt,.css .nt+.nt{color:#999}.pagination{border-top:0.5px solid #e5e5e5;font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;padding-top:2rem;position:relative;text-align:center}.pagination span{color:#353535;font-size:1.1rem}.pagination .top{-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;transition:all 0.3s ease-out;color:#555;font-size:1.1rem;opacity:.6}.pagination .top:hover{opacity:1}.pagination .next{-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;transition:all 0.3s ease-out;color:#555;font-size:0.9rem;position:absolute}.pagination .next:hover,.pagination .next:focus{opacity:.6;text-decoration:none}.pagination .left{left:0}.pagination .right{right:0}

.about .profile{text-align:center;margin-top:3%}

/*.about .profile .selfie{display:block;width:200px;margin:0 auto;border-radius:100%}
.about .profile .info{margin-top:1.5%;margin-bottom:2%} */
.about .profile .info .title{font-size:1.5rem;font-weight:bold;color:black}
.about .profile .info .description{font-size:1rem;color:gray}
.about-icon{margin-left:1.3rem;line-height:2rem}
.about-icon-text{margin-left:0.8rem}

.about .profile {
    display: flex;
    flex-direction: column; /* 기본적으로 세로 정렬 */
    align-items: center;
    
  }
  
  .about .profile .info {
    text-align: justify;
    margin: 1.5rem 0;
  }
  
  .about .profile .contents {
    display: flex;
    flex-direction: column; /* Selfie와 Social Layer를 세로 정렬 */
    align-items: center;
    text-align: center;
  }
  
  .about .profile .selfie {
    width: 200px;
    border-radius: 100%;
    margin-bottom: 1rem;
  }
  
.social-layer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.3rem;
    justify-content: center; /* 가로 방향 중앙 정렬 */
    align-items: center; /* 세로 방향 중앙 정렬 */
    text-align: center;
}


@media (min-width: 900px) {
    .about .profile {
      flex-direction: row; /* 900px 이상에서는 가로 정렬 */
      justify-content: center;
    }
  
    .about .profile .info {
      order: 2; /* 왼쪽으로 배치 */
      max-width: 60%;
    }
  
    .about .profile .contents {
      order: 1; /* 오른쪽으로 배치 */
      margin-right: 2rem;
    }
  }
  

.portfolio-item{border-bottom:1px solid #e5e5e5;color:#555;display:inline-block;padding:2rem 0}
.portfolio-item:hover .portfolio-line,.portfolio-item:focus .portfolio-line{width:5rem}.portfolio-item:last-child{border:0}
.portfolio-title{color:#353535;display:block;font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-size:2rem;font-weight:bold;margin:.5rem 0}
.portfolio-line{-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;transition:all 0.3s ease-out;border-top:0.2rem solid #353535;display:block;width:2rem}.portfolio-content{margin-top:1rem;color:#353535;font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-size:1rem}.portfolio-icon{margin-left:1.3rem;line-height:2rem}.portfolio-icon-text{margin-left:0.8rem}.post{padding:3rem 0}.post-info{color:#aaa;font-family:Palatino,"Palatino LT STD","Palatino Linotype","Book Antiqua","Georgia",serif;letter-spacing:0.5px;text-align:center}

.post-info span{font-style:italic}
.post-title{text-shadow:0 1px 2px #3f3f3f;font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-size:3rem;margin:1rem 0;text-align:center}
.post-line{border-top:0.4rem solid #353535;display:block;margin:0 auto 3rem;width:4rem}
.post p{margin:0 0 1rem;text-align:justify}.post a:hover{text-decoration:underline}
.post img{margin:0 auto 0.5rem}
.post img+em{color:#aaa;display:block;font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-size:0.9rem;font-style:normal;text-align:center}

.container{margin:0 auto;max-width:none;width:80%}

main,footer,.nav-container{display:block;margin:0 auto;max-width:none;width:80%}

.nav{box-shadow:0 2px 2px -2px rgba(0,0,0, 0.2);
    background-color: white;
    position: sticky;
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    z-index: 1000;
    overflow:hidden;
}
.nav-container{margin:1rem auto;position:relative;text-align:center}
.nav-title{-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;transition:all 0.2s ease-out;color:#555;display:inline-block;margin:0;padding-right:.2rem}
.nav-title:hover,.nav-title:focus{opacity:.6}
.nav ul{list-style-type:none;margin:1rem 0 0;padding:0;text-align:center}
.nav li{-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;transition:all 0.2s ease-out;color:#555;display:inline-block;opacity:.6;padding:0 2rem 0 0}
.nav li:last-child{padding-right:0}
.nav li:hover,
.nav li:focus{opacity:1}
.nav a{color:#555;font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif}
@media (min-width: 900px){.nav-container{text-align:left}
.nav ul{bottom:0;position:absolute;right:0}}


footer{font-family:Palatino,"Palatino LT STD","Palatino Linotype","Book Antiqua","Georgia",serif;padding:2rem 0;text-align:center}
footer span{color:#555;font-size:.8rem}.social-layer{display:inline-block;text-align:center;width:100%;color:#cdcdcd;font-size:0.9em}.social-layer .social-icons ul{list-style:none}.social-layer .social-icons ul li{display:inline}

.swal2-popup {
    font-size: small !important;
    font-family: 'Roboto'
}

.swal2-styled {
    padding: 10px 32px 10px 32px !important;
    margin: 20px 10px 0px 10px !important;
    width: 170px;
    height: 45px;
}

.swal2-border-radius {
     /* -webkit-border-radius: 100 !important; 
     -moz-border-radius: 100 !important;  */
     border-radius: 50px !important; 
    }

.swal2-custom-button {
        border-radius: 15px; /* Curve the OK button */
        padding: 10px 20px; /* Optional: Adjust padding for better appearance */
        color: white;
        /* background-color: #3085d6 */
    }

ul.ul-contact li .description p {
    margin: 0;
}

.icon-with-text {
    display: flex;
    align-items: flex-start; /* Align the icon and text at the top */
    margin-bottom: 10px; /* Add spacing between list items */
}

.icon-with-text i {
    font-size: 24px; /* Adjust icon size */
    margin-right: 10px; /* Add spacing between the icon and text */
    color: #333; /* Optional: Customize icon color */
}

.icon-with-text .description {
    line-height: 1.4; /* Adjust line spacing for text */
}

.icon-with-text .course {
    margin: 0; /* Remove default margin */
}

.icon-with-text .institution {
    margin: 1px; /* Remove default margin */
    color: #666; /* Optional: Customize text color */
    font-size: 14px; /* Adjust font size */
}

.section-title {
    background-color: rgb(239, 239, 239);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    box-sizing: border-box;
}

.section-title h2 {
    width: 80%;             /* 본문 너비와 맞춤 */
    margin: 0 auto;         /* 가운데 정렬 */
    padding: 2rem 0;        /* 위아래 여백만 */
    font-family: "Libre Baskerville", "Segoe UI", Helvetica, Arial, sans-serif;
    color: #353535;
    /* font-size: 2rem; */
}

.publications {
    margin-top: 40px;
    margin-bottom: 20px;
}


#publications {
    font-size: 28px;
    margin-bottom: 20px;
    text-align: center;
}

.publication-list {
    list-style-type: none;
    padding: 0;
    
}

.publication-list li {
    padding: 1px;
    border-radius: 10px;
    display: flex;
    align-items: flex-start; /* Align items to the top */
    padding-bottom: 5px;
}

.publication-hover {
    transition: transform 0.3s ease; /* 부드러운 전환 */
}
.publication-hover:hover {
    transform: scale(1.03); /* 5% 확대 */
}


.publication-item {
    display: flex;
    gap: 20px; /* Space between image and content */

}

.paper-image {
    width: 230px; /* Adjust the width of the image */
    height: 180px; /* Maintain aspect ratio */
    border-radius: 5px; /* Optional: Add slight rounding to the image */
    object-fit: cover; /* Ensure the image fits neatly */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3);
}

.publication-content {
    flex: 1; /* Allow the text content to expand */
}

.publication-content .title {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0 0 5px 0;
    text-align: justify;

}

.publication-content .title a{
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0 0 5px 0;
    text-align: justify;
    font-family:'Lato',sans-serif;
    color: rgb(46, 57, 113)
}
/* .publication-item:hover,.publication-item:focus{	-webkit-transform: scale(1.1); transform: scale(1.1);} */

.publication-content .authors {
    font-size: 0.95rem;
    color: #313131;
    margin: 0 0 5px 0;
}

.publication-content .conference {
    font-size: 14px;
    color: #313131;
    margin: 0 0 10px 0;
}

.publication-content .award-title {
    font-size: 1.1rem;
    margin: 0 0 5px 0;
    text-align: justify;
}

.publication-content .date {
    font-size: 14px;
    font-style: italic;
    color: #888;
    margin: 0 0 5px 0;
}

.publication-content .link {
    font-size: 14px;
    color: #007bff;
    text-decoration: none;
    margin-right: 10px;
}

.publication-content .link:hover {
    text-decoration: underline;
}

.publication-content .description {
    font-size: 14px;
    color: #888;
    margin: 10px 0 10px 0;
    text-align: justify;

}

/* Rotating text */
#rotating-text-container {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }
  
.react-rotating-text-cursor {
animation: blinking-cursor 0.8s cubic-bezier(0.68, 0.01, 0.01, 0.99) infinite;
}

@keyframes blinking-cursor {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}

#typing-effect {
    display: inline;
    font-weight: bold;
    font-size: 20px;
  }
.cursor {
    display: inline;
    font-weight: normal;
    font-size: 30px;
    animation: blink 0.8s steps(2, start) infinite;
  }
  @keyframes blink {
    from, to {
      color: transparent;
    }
    50% {
      color: black;
    }
  }

/* Scroll */

.section {
    display: flex;
    justify-content: left;
    align-items: center;
    /* height: 100vh;
    width: 100%; */
    text-align: left;
    position: relative;
}
#hello {
    background-color: white;
    color: black;
    font-size: 1.2em
}
@media (max-width: 420px){.about .profile .info .title{font-size:18px;font-weight:bold;color:black}}
@media (max-width: 420px){#hello{font-size:15px; color:black}}
@media (max-width: 420px){#typing-effect {
    display: inline;
    font-weight: bold;
    font-size: 15px;
  }}
@media (max-width: 420px){.cursor {
display: inline;
font-weight: normal;
font-size: 2em;
animation: blink 0.8s steps(2, start) infinite;
}}

#about {
    background-color: #1a1a1a;
    color: white;
}

/* 스크롤 화살표 */
.scroll-arrow {
    position: absolute;
    bottom: 20px;
    font-size: 3rem;
    color: black;
    cursor: pointer;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}



.image-wrapper {
    position: relative;
    display: inline-block;
  }
  
  .image-label {
    font-family:"Libre Baskerville";
    position: absolute;
    top: 5px;
    left: 8px;
    font-size: 0.9rem;
    color: white;
    background-color: #19238399; /* 반투명 배경 */
    padding: 2px 5px;
    border-radius: 3px;
    pointer-events: none;
  }
  

.project-hover {
    transition: transform 0.3s ease; /* 부드러운 전환 */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3);
    width: 100%;
    margin-bottom: 2rem;
}
.project-hover:hover {
    transform: scale(1.03); /* 5% 확대 */
}

.project-content {
    flex: 1; /* Allow the text content to expand */
    padding-left: 1.5rem; /* 또는 16px */
    padding-top: 1rem;
    padding-right: 1.5rem;
}

.project-content .title {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0 0 5px 0;
    text-align: justify;

}

.project-content .title a{
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0 0 5px 0;
    text-align: justify;
    font-family:'Lato',sans-serif;
    color: rgb(46, 57, 113)
}
/* .publication-item:hover,.publication-item:focus{	-webkit-transform: scale(1.1); transform: scale(1.1);} */

.project-content .authors {
    font-size: 0.95rem;
    color: #313131;
    margin: 0 0 5px 0;
}

.project-content .conference {
    font-size: 14px;
    color: #313131;
    margin: 0 0 10px 0;

}
.project-link {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  
@media (max-width: 900px) {
    .publication-hover {
        margin-bottom: 2rem;
    }

    .publication-item {
        flex-direction: column;
        align-items: center; /* 가운데 정렬 */
        text-align: center;
        gap: 0px;
    }
    .publication-content {
        padding: 0 0 0 0; /* 위쪽 1rem, 좌우 0, 아래쪽 1rem */
        
    }

    .publication-content .title,
    .publication-content .authors,
    .publication-content .conference,
    .publication-content .award-title,
    .publication-content .date {
        text-align: center; /* 모바일에서 가운데 정렬 */
    }
    ul > li {
        display: flex;
        justify-content: center;
      }
}