.hiddenGnb{
    z-index: 1004;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* display: none; */
    transition:all 1s ease 0s;
    /* transform:translateY(100%);
    border-radius: 50% 50% 0 0; */
    opacity: 0;
    pointer-events: none;
}
.hiddenGnb.on{
    /* transform:translateY(0%); */
    opacity: 1;
    pointer-events: auto;
}
.gnb{
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}
.gnb>li{
    margin-bottom: 1rem;
}
.gnb>li:hover{
    color: var(--main-color);
}
.gnb>li:last-of-type{
    margin-bottom: 0;
}
.btnMenu{
    z-index: 1000;
    position: fixed;
    top: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    line-height: 0;
    cursor: pointer;
    border-radius: 50%;
    padding: 0.25rem;
    /* display: none; */
    transition: all 1s ease 0s;
}
.btnMenu img{
    width: 2rem;
    transition: all 1s ease 0s;
}
.btnstyle{
    border: 1px solid var(--main-color);
    padding: 0.4rem 1rem;
    border-radius: 1.7rem;
    display: inline-flex;
    gap: 1rem;
    align-items: center;
    background-color: #fff;
}
.btnstyle:hover{
    color: var(--main-color);
}
.btnstyle:hover svg path{
    }
.btnclose{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 1.2rem;
    cursor: pointer;
    line-height: 0;
    border-radius: 50%;
    padding: 0.25rem;
}
.btnclose img{
    width: 2rem;
}

header{
    width: 1400px;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 1rem;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    filter: drop-shadow(0px 0px 10px #eaeaea);
}
.gnbFloat{
    display: flex;
    gap: 1rem;
    background-color: var(--main-color);
    padding: 0.5rem 1.5rem;
    border-radius: 1.5rem;
}
.gnbFloat>li{
    transition: all 0.4s ease 0s;
}
.gnbFloat>li:hover{
    text-decoration: underline;
    /* transform: ; */
}
.hero {
    height: 86vh;
    display: flex
;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}
.hero>img{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top:0;
    object-fit: cover;
    z-index: -1;
    filter: brightness(0.5);
}
.content {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}
.content>img{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top:0;
    object-fit: cover;
    z-index: -1;
    filter: brightness(0.5);
}
.floatingHeroTxt {
    width: 1400px;
    /* text-align: center; */
    color: var(--font-base-color);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    position: relative;
    z-index: 50;
}
/* 채널 25하면 글자애니메이션 넣는 방법 알 수 있음 */

.floatingHeroTxt p:nth-of-type(2) {
    width: 69%;
    margin: 0 auto;
}
.hero video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    pointer-events: none;
}
.hero:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgb(210 218 193 / 41%);
    z-index: 11;
    backdrop-filter: blur(5px);
}
.train li{
    width:200px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.train li.w18{
    width:200px;
}
.train li.w200{
    width:200px;
}
.train li.w135{
    width:200px;
}
.linedeco.swiper{
    width:100%;
    background: #D2DAC1;
    padding: 1rem 0;
}
.linedeco li{
    white-space: nowrap;
    text-align: center;
}
.linedeco .train{
    transition-timing-function: linear!important;
    align-items: center;
}
.downbutton {
    background-color: #EBF0C5;
    display: inline-flex;
    padding: 0.5rem 4rem;
    border-radius: 100px;
    color: #333;
    margin-top: 4rem;
    border:2px solid #EBF0C5;
}
.downbutton:hover{
    border:2px solid #333;
}
.floatingHeroTxt h1{
    font-size: 3rem;
    font-weight: bold;
}
.unl{
    border-bottom:1px solid #333;;
    display: inline-block;
    padding-bottom: .1rem;
}
.unl:hover{
    color:var(--main-color);
    border-bottom:1px solid var(--main-color);
}
.about {
    width: 1400px;
    margin: 0 auto;
    display: flex
;
    justify-content: space-between;
    padding-top: 6rem;
    flex-direction: column;
    padding-bottom: 6rem;
}
.aboutTxt {
    width: 840px;
    text-align: center;
    margin: 0 auto;
}
.aboutTxt h1 {
    margin-bottom: 2rem;
    position: relative;
}
.introSection{
    display: flex;
    gap:1rem;
}
.introSection section {
    border: 1px solid var(--font-base-color);
    border-radius: 1rem;
    padding: 1rem;
    display: flex
;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    flex: 1;
}
.introSection .downbutton {
    background-color: var(--font-base-color);
    margin-top: 2rem;
    color: #fff;
    border: 2px solid var(--font-base-color);
}
.aboutTxt p+a{
    margin:3rem 0;
}
.deco{
    display: block;
    text-align: center;
    margin-top: 2rem;
}
.deco1{
    width: 60px;
    position: absolute;
    left: -20px;
    top: -68px;
    transform: rotate(315deg);
    animation: swing 2s ease infinite alternate;    
}
.aboutTxt p{
    margin-bottom: 1rem;
}
.aboutImg{
    width: 690px;
    margin-top:10rem ;
}
.skills{
    width:1400px;
    margin: 0 auto;
    padding-top: 6rem;
}
.title1{
    width:60%;
    margin: 0 auto;
    text-align: center;
}
.title1 p{
    padding-top: 1rem;
}
.skilllist{
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
    grid-template-columns: repeat(3,1fr);
}
.skilllist >li {
    /* width: calc((100% - 1rem) / 2); */
    box-sizing: border-box;
    border: 1px solid var(--font-base-color);
    border-radius: 1rem;
    padding: 1rem;
}
.skilllist >li li{
    line-height: 140%;
}
.skilllist >li ul {
    list-style: disc;
    /* list-style-position: inside; */
    padding-left: 1rem;
    display: flex
;
    flex-direction: column;
    gap: .5rem;
}
.skilllist >li h3{
    margin-bottom: 1rem;
}
.skilllist >li p {
    margin-bottom: 1rem;
    font-family: 'Noto Serif KR';
}
.skillsWrap{
    border: lpx solid red;
    padding-bottom: 4rem ;
    position: relative;
}
.aboutMe {
    width: 1400px;
    margin: 0 auto;
    padding-top: 6rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap:6rem;
}
.abImg {
    align-self: end;
}
.abTxt {
    padding-top: 6.5rem;
}
.abTxt h1{
    font-size:3rem;
    line-height: 1;
    margin:1rem 0;
}
.abTxt h1+p {
    margin-bottom: 6rem;
}
.aboutMeList{
    grid-column: 1/3;
}
.title2{
    width:60%;
    margin: 0 auto;
    text-align: center;
}
.title2 p{
    padding-top: 1rem;
}
.aboutMeList {
    display: grid
;
    /* flex-wrap: wrap; */
    gap: 1rem;
    /* margin-top: 2rem; */
    /* justify-content: space-between; */
    grid-template-columns: 1fr 1fr;
    background: #FDFBF3;
    padding: 2rem 3rem;
    border-radius: 20px;
    border: 2px solid var(--font-point-color);
}
.abl1{
    grid-row: 1/3;
    grid-column: 1/2;
}
.abl2{
    grid-row: 1/2;
    grid-column: 2/3;
}
.abl3{
    
}
.aboutMeList>*{
    flex: 1;
}
.aboutMeImg{
    text-align: center;
}
.education h1{
    margin-bottom: 2rem;
}
.education li{
    display: flex;
    flex-wrap: wrap;
    margin-bottom:1rem;
}
.abmoutterFram {
    background-color: var(--main-color);
    padding-bottom: 6rem;
}
.education li p{
    flex: 1;
}
.certifications h1{
    margin-bottom: 2rem;
}
.certifications li {
    display: grid;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    grid-template-columns: 100px 1fr;
    gap: 1rem;
}
.certifications li p{
    flex: 1;
}

.popup{
}
.popupListFrame{
    padding-top: 2rem;
}

.popupTitle{
    width:60%;
    margin: 0 auto;
    text-align: center;
}
.popupTitle p{
    padding-top: 1rem;
}
.popupList{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap:2rem 1rem;
}
.popupList figure{
    margin-bottom: 2rem;
}
.txtFramePopup>*{
    margin-bottom: 0.5rem;
}
.txtFramePopup>*:last-child{
    margin-bottom: 0;
}
.txtFramePopup dl{
    display: flex;
    align-items: center;
    gap:0.5rem;
}
.txtFramePopup dt{
    margin-right: 2rem;
}
.txtFramePopup dd{
    padding:0.25rem 0.9rem;
    border:1px solid #000;
}

.banner{
}
.bannerTitle{
    width:60%;
    margin: 0 auto;
    text-align: center;
}
.bannerTitle p{
    padding-top: 1rem;
}
.bannerSlide{
    padding-top: 2rem;
}
.train>li{
}
.train>li figure{
    margin-bottom: 2rem;
}
.bannerTxt{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap:1rem
}
.bannerTxt h3 {
    margin-bottom: 0.5rem;
    text-align: left;
}
.tools{
    display: flex;
    gap: 1rem;
}
.tools span{
    border: 1px solid #000;
    padding: 0.25rem 0.9rem;
}
.bannerTxt dl{
    display: flex;
    gap: 1rem;
}
.bannerTxt dt{
    font-weight: 800;
    margin-right: 3rem;
}
dd[data-color]{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

dd[data-color] span{
    /* content:""; */
    display: inline-block ;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
}
.bannerStation{
    width: 100%;
    /* height: 580px; */
}
.bannerStation .train li {
    width: 200px;
    text-align: center;
    display: flex
;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.project{
}
.projectTitle{
    width:60%;
    margin: 0 auto;
    text-align: center;
}
.projectTitle p{
    padding-top: 1rem;
}
.stickyMenu{
    position: sticky;
    left: 0px;
    top: 4rem;
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    justify-content: center;
}
.stickyMenu>li{
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    font-weight: 800;
    border-radius: 40px;
    background-color: var(--font-base-color);
    color: #FDFBF3;
}
.imgall {
    text-align: center;
    min-height: 500px;
    line-height: 0;
}
.imgall img {
    width: 100%;
    max-width: 1920px;
}
.footcontent{
    height:100vh;
    position: relative;

}
.footcontent video{
width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    pointer-events: none;
}
.footcontent:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgb(210 218 193 / 61%);
    z-index: 11;
    backdrop-filter: blur(6px);
}
.footcontent {
    height: 100vh;
    display: flex
;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}
.coninfo{
    display: flex;
    gap:1rem;
    margin-top: 3rem;;
}
.coninfo>div{
    flex:1;
}
.coninfo dd{
    white-space: nowrap;
}