::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(238, 174, 202, 0.1) 0%,
    #101010 75%, #101010 100%);
}

::-webkit-scrollbar-track {
    background: linear-gradient(180deg, rgba(238, 174, 202, 0.1) 0%,
    rgba(238, 174, 202, 0.3) 50%, rgba(148,187,233,1) 100%);
}
@keyframes fadeIn{
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeOut{
100% {opacity: 1;}
0% {opacity: 0;}
}
@keyframes shake {
    10% {
        transform: rotate(15deg);
    } 
    20% {
        transform: rotate(-15deg);
    }
    30% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-15deg);
    }

}
#Pa3 {
    grid-column-end: 4;
    grid-column-start: 3;
    grid-row-end: 2;
    grid-row-start: 1
}
body {
    color: #101010;
    line-height: 22px;
    font-family: 'Noto Sans KR', sans-serif;
}
.header {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: auto;
    z-index: 90;
    opacity: 0;
    }
.hact{
    animation: fadeIn  0.3s forwards ease-in;
    transition: 0.3s ease-in-out;
}
.header-position {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: auto;
    z-index: 1;
    padding-right: 64px;
    padding-left: 64px
}
#headhidden {
    overflow: hidden;
}
.headerWrap {
    position: relative;
    width: 100%;
    max-width: 1312px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
}
.Gmr {
    display: flex;
    justify-content: center;
    flex: 1
}
.header_logo {
    transition-property: none;
}
.lines {
    position: absolute;
    top: auto;
    bottom: 0;
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    background-image: url("https://assets.website-files.com/61b711f830d358f225addd55/61b9f11e15003c6858a005f9_ico_star2.svg");
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat
}

.lines__line {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 1px;
    height: 1px;
    background-color: #101010
}

.lines.gmo {
    right: 250px;
}

.lines__line.mod--header-1 {
    position: absolute;
    right: 20px;
    bottom: 20px;
    height: 160px;
}

.lines__line.mod--header-2 {
    position: absolute;
    width: 1090px;
}

.lines__line.mod--header-3 {
    position: absolute;
    left: 20px;
    right: auto;
    width: 310px;
}

.section {
    padding: 64px;
}

.section.mod--hero {
    position: relative;
    z-index: 2;
    margin-bottom: -84px;
    padding-top: 150px;
    padding-bottom: 0;
}

.heading1 {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-bottom: 56px;
    margin-left: 50px;
    font-size: 81px;
    line-height: 1.1em;
    text-transform: uppercase;
    white-space: nowrap
}

.heading1__span1 {
    position: relative;
    
    display: inline-block;
    font-weight: 500
}

.heading1__span2 {
    position: relative;
    left: 132px;
    display: inline-block
}

.home__lecture {
    position: relative;
    z-index: 2;
    display: flex;
    padding-left: 76px;
    align-items: center
}

.heading1__span2.mod--2 {
    left: 280px;
}

.heading1__span-ico {
    position: relative;
    bottom: -2px;
    display: inline-block;
    width: 62px;
    margin-right: 16px;
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

.home__lecture-img {
    display: block
}

.home__lecture-img.mod--2 {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    transform: translate(95px, -104px)
}
.home__lecture-img.mod--3 {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3
}
.home__img {
    position: relative;
    display: block;
    height: 100%;
    max-width: none;
    flex: 1;
}
.home__lecture-txt {
    position: relative;
    z-index: -1;
}
.home__lecture-txt-1 {
    display: inline-block;
    margin-bottom: 16px;
    color: rgba(16, 16, 16, .6);
}
.home__lecture-txt-2 {
    display: inline-block;
    font-size: 22px;
    line-height: 1.2em;
    font-weight: 600;
    letter-spacing: .05em;
}
.home__img-wrap {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    padding-right: 76px;
    justify-content: flex-end;
    align-items: center;
    font-size: 16px;
}
.home__content {
    position: relative;
    display: flex;
    overflow: hidden;
    padding-top: 120px;
    padding-bottom: 120px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.grid {
    width: 100%;
    justify-content: space-between;
    grid-column-gap: 40px;
    grid-row-gap: 0px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
}
.mod--home {
    position: relative;
    margin-bottom: 54px;
}
.w-layout-grid {
    display: grid;
    grid-auto-columns: 1fr;

}
.home__img {
    position: relative;
    display: block;
    height: 100%;
    max-width: none;
    flex: 1;
}
.home__img.mod--1 {
    max-height: 520px;
    max-width: 112px;
    margin-left: -152px;
    background-image: url("img/1202_2.jpg");
    background-position: 20% 80%;
    background-size: cover;
    background-repeat: no-repeat;
}
.home__img.mod--2 {
    max-height: 632px;
    max-width: 336px;
    margin-left: 40px;
    background-image: url("img/1202_2.jpg");
    background-position: 100% 0%;
    background-size: cover;
    background-repeat: no-repeat;
}
.home__star-wrap {
    position: absolute;
    top: 145px;
    right: -40px;
    z-index: 2;
    display: flex;
    width: 80px;
    align-items: center;
}
.home__star {
    width: 100%;
    transform: none;
    transition: .5s;
    transform-style: preserve-3d;
}
.home__star-wrap:hover img {
                transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
            }
.home__star:hover {
transform: translate(0,0)
}
.main {
    background: linear-gradient(180deg, rgba(238, 174, 202, 0.1) 0%,
    rgba(238, 174, 202, 0.3) 50%, rgba(148,187,233,1) 100%);
}

.content {
    position: relative;
    width: 100%;
    max-width: 1312px;
    margin-right: auto;
    margin-left: auto;
}
.grid.mod--home {
    position: absolute;
    left: 0;
    top: 20px;
    right: 0;
    bottom: 20px;
    z-index: 0;
}
[data-anim="img-hover"] div {
    mix-blend-mode: multiply;
}
.img__hover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: auto;
    z-index: 1;
    width: 100%;
    height: 0%;
    background-color: skyblue;
    -webkit-transition: .4s;
    transition: .4s
}

.img__hover.active {
    height: 100%;
}

.Gmheader_section {
    display: flex;
    padding-top: 28px;
    padding-bottom: 52px;
}
.Gmnav {
    display: flex;
    align-items: center;
    gap: 50px;
}
.Gmnav li .Gmnav_list {
display: block;
width: 100%;
height: 24px;
color: #101010;
font-weight: 700;
overflow: hidden;
text-align: center;
transition: 0.35s;

}
.Gmnav li b {
display: block;
}

.Gmnav li span {
width: 100%;
height: 100%;
position: relative;
top: -22px;
transition: 0.3s;
}

.Gmnav li:hover .Gmnav_list span {
top: 2px;
color: steelblue;
}

.Gmnav li:hover .Gmnav li::after {
display: block;
}
/* --------------------------- */

.sec3 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    width: 10.5%;
}
.Rsns {
width: 100%;
font-size: 25px;
font-weight: bold;
text-align: center;
line-height: 40px;
color: #ffd43b;
background: transparent;
border-radius: 100%;
transition: .3s;
transition-duration: 0.25s;
}
.Rsns:hover {
color: #83b9ff;
background: #fff;
border-color: #fff;
border: 1px solid #fff;
} 
.Rsns:hover i{
animation: shake 0.25s;
} 


.SMN_effect-31 li {
position: relative;

}
.SMN_effect-31 li a {
position: relative;
overflow: hidden;
display: block;
text-align: center;
flex-grow: 1;
animation-duration: 1s;
animation-fill-mode: both;
padding: 0;
}

.SMN_effect-31 a span {
display: block;
font-weight: 900;
font-size: 20px;
transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.SMN_effect-31 a:after {
position: absolute;
top: 100%;
left: 0;
right: 0;
content: attr(data-hover);
font-weight: 900;
font-size: 20px;
display: inline;
text-align: center;
transition: top 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.SMN_effect-31 a:hover {
color: #ffd43b;
}

.SMN_effect-31 a:hover span {
color: #101010;
transform: translateY(-110%);

}

.SMN_effect-31 a:hover:after {
top: 0;
}

.SMN_effect-31 a:active {
animation-name: rubberBand;
}