body {
    /* background:
    url("../img/bgCircle.svg") no-repeat -52% 2% / 1090px auto,
    url("../img/bgCircle.svg") no-repeat 117% 10% / 500px auto; */

    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: auto;
}

.hiddenGnb{
    z-index: 1001;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: white;
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: none;
}
.gnb{
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}
.gnb>li{
    /* border: 1px solid blue; */
    margin-bottom: 1rem;
}
.gnb>li:last-of-type{
    margin-bottom: 0;
}
.btnMenu{
    background-color:white ;
    /* border: 1px solid black; */
    z-index: 1000;
    position: fixed;
    top: 1.2rem;
    right: 4%;
    /* transform: translateX(-50%); */
    line-height: 0;
    cursor: pointer;
    border-radius: 0.3rem;
    padding: 0.25rem;
    box-shadow: 0 0 5px black;
    display: none;
    transition: all 1s ease 0s;
}

.btnMenu:hover{
    background-color: var(--main-color);
}
.btnMenu:hover svg path{
    stroke: white;
}
.btnMenu img{
    /* border: 1px solid black; */
    width: 2rem;
    transition: all 1s ease 0s;
}
.btnStyle{
    border: 1px solid var(--main-color);
    padding: 0.4rem 1rem;
    border-radius: 0.9rem;
    display: inline-flex;
    gap: 1rem;
    align-items: center;
    background-color: white;
    background-color: var(--main-color);
    color: white;
}
.btnStyle:hover{
    background-color: var(--main-color);
    color: #fff;
}
.gnb>li:hover{
    color: var(--main-color);
}
.btnStyle:hover svg path{
    stroke: white;
}
.btnClose{
    /* border: 1px solid red; */
    position: absolute;
    transform: translateX(-50%);
    top: 1.2rem;
    right: 2%;
    cursor: pointer;
    line-height: 0;
    border-radius: 50%;
    padding: 0.25rem;
    box-shadow: 0 0 5px black;
}

.btnClose img{
    width: 2rem;
}
.btnClose:hover{
    background-color: var(--main-color);
}
.btnClose:hover svg path{
    stroke  : white;
    fill: white;
}

header{
    width: 1400px;
    position: fixed;
    left: 50%;
    top: 1.2rem;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    filter: drop-shadow(0 0 5px #7272726e);
    z-index: 1000;
    font-size: 0.8rem;
    font-weight: 800;
}
.gnbFloat{
    display: flex;
    gap: 1rem;
    background-color: var(--main-color);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 0.7rem;
}
.gnbFloat>li{
    transition: all 0 0.4s ease 0s;
}
.gnbFloat>li:hover{
    /* border: 1px solid red; */
    /* text-decoration: underline; */
    transform: scale(1.05);
}
.stickyMenu>li:hover{
    transform: scale(1.05);
}
.btnDR{
    transition: all 0 0.4s ease 0s;
}
.btnDR:hover{
    transform: scale(1.05);
}


.hero {
    height: 80vh;
    display: flex
;
    justify-content: center;
    align-items: center;
    position: relative;
    
}

.hero:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(19 60 94 / 34%);
    backdrop-filter: blur(13px);
}
.hero>video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}   

.floatingHeroTxt {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* border: 1px solid red; */
    width: 60%;
    text-align: center;
    color: white;
    display: flex;
    z-index: 11;
    flex-direction: column;
    gap: 1rem;
}

.floatingHeroTxt h1{
    font-size: 3rem;
    font-weight: bold;
    animation: show 3s ease 0s;
}
@keyframes show {
    0%{ 
        transform: translate(-20px);
        opacity: 0;
    }
    100%{
        transform: translate(0px);
        opacity: 1;
    }
}

.floatingHeroTxt h1 span:nth-of-type(1){animation: show 3s ease 0s forwards;}
.floatingHeroTxt h1 span:nth-of-type(2){animation: show 3s ease 0.1s forwards;}
.floatingHeroTxt h1 span:nth-of-type(3){animation: show 3s ease 0.2s forwards;}
.floatingHeroTxt h1 span:nth-of-type(4){animation: show 3s ease 0.3s forwards;}
.floatingHeroTxt h1 span:nth-of-type(5){animation: show 3s ease 0.4s forwards;}
.floatingHeroTxt h1 span:nth-of-type(6){animation: show 3s ease 0.5s forwards;}
.floatingHeroTxt h1 span:nth-of-type(7){animation: show 3s ease 0.6s forwards;}
.floatingHeroTxt h1 span:nth-of-type(8){animation: show 3s ease 0.7s forwards;}
.floatingHeroTxt h1 span:nth-of-type(9){animation: show 3s ease 0.8s forwards;}
.floatingHeroTxt h1 span:nth-of-type(10){animation: show 3s ease 0.9s forwards;}
.floatingHeroTxt h1 span:nth-of-type(11){animation: show 3s ease 1.0s forwards;}
.floatingHeroTxt h1 span:nth-of-type(12){animation: show 3s ease 1.1s forwards;}
.floatingHeroTxt h1 span:nth-of-type(13){animation: show 3s ease 1.2s forwards;}

.floatingHeroTxt h1 span{
    opacity: 0;
    display: inline-block;
}

.about{
    /* border: 1px solid red; */
    width: 1400px;
    height: 892px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-top: 6rem;
}

.aboutTxt{
    /* border: 1px solid blue; */
    width: 606px;
}

.aboutTxt>h1 {
    margin-bottom: 6rem;
    font-size: 1.8rem;
}

.aboutTxt p{
    margin-bottom: 1rem;
}

.aboutImg{
    /* border: 1px solid blue; */
    margin-top: 18rem;
}
.aboutImg img{
    border-radius: 50px 50px 0 0;
}

.aboutWrap{
    border-bottom: 30px solid var(--main-color);
}
/* HTML 에서 Wrap 영역 만들어서 색 넣고 싶은 해당 영역 Wrap 영역 안에 넣기 
    만든Wrap{
    padding-bottom:4rem;
    position:relative;
    }
    만든Wrap:after{content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:400px; 높이는 맞춰서 수정
    background-color: var(--main-color);
    z-index:-1;
    }
*/
.skills{
    width: 1400px;
    margin: 0 auto;
    padding-top: 6rem;
}
.skills h1{
    /* border: 1px solid red; */
    margin-bottom: 2rem;
}
.skills h1+p{
    /* border: 1px solid red; */
    width: 60%;
    margin-bottom: 4rem;
}
.skillList{
    /* border: 1px solid red; */
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.skillList>li{
    /* border: 1px solid blue; */
    width: calc((100% - 2rem)/3);
    box-sizing: border-box;
}   
.skillList>li h3{
    margin-bottom: 1rem;
}  
.certi{
    /* border: 1px solid red; */
    width: 1400px;
    margin: 0 auto;
    padding-top: 5rem;
    display: flex;
    gap: 1rem;
}
.aboutMe{
    flex: 1;
}
.aboutList{
    margin-top: 2rem;
}
.certTxt{
    flex: 1;
}
.cerList{
    margin-top: 2rem;
}
.aboutTxt_1 h1{
    margin-bottom: 2.2rem;
}
.certTxt h1{
    margin-bottom: 2rem;
}
.aboutTxt_1 dl{
    /* border: 1px solid red; */
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.aboutTxt_1 dt{
    width: 30%;
    margin-bottom: 1rem;
    font-weight: 700;
}
.aboutTxt_1 dd{
    width: calc(70% - 1rem);
}
.certTxt dl{
    /* border: 1px solid red; */
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.certTxt dt{
    width: 30%;
    margin-bottom: 1rem;
    font-weight: 700;
}
.certTxt dd{
    width: calc(70% - 1rem);
}
.certTxt p{
    margin-bottom: 4rem;
}


.work{
    /* border: 1px solid red; */
    width: 1400px;
    margin: 0 auto;
    padding-top: 5rem;
    display: flex;
    gap: 1rem;
}
.workTxt{
    /* border: 1px solid red; */
    padding-left: 5rem;
}
.workImg img{
    margin-right: 20rem;
}
.workTxt h2{
    margin: 2rem 0;
}
.workTxt h2:first-of-type{
    margin-top: 0;
}
.workTxt dl{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.workTxt dt {
    width: 30%;
    /* margin-bottom: 0.5rem; */
    font-weight: 500;
}
.workTxt dd{
    width: calc(70% - 1rem);
}
.workWrap{
    /* border: 1px solid red; */
    background-color: var(--main-color);
    color: white;
    margin-top: 3rem;
    padding-bottom: 4rem;
    border-radius: 50px;
}

.popup{
    /* border: 1px solid red; */
    padding-top: 6rem;
    width: 1400px;
    margin: 0 auto;
}

.popupTitle h1{
    margin-bottom: 2rem;
}
.popupTitle p{
    margin-bottom: 3rem;
}
.popupList{
    display: grid;
    grid-template-columns: repeat(3,1fr); /* 팝업 3개씩 나열 , 2,1fr이면 2개씩 */
    gap: 2rem 1rem;
}
.popupList figure {
    margin-bottom: 1rem;
    aspect-ratio: 1 / 1.3;
}
.popupList figure img{
    width:100%;
    height:100%;
    object-fit: cover;
}
.txtFramePopup>*{
    margin-bottom: 1rem;
}
.txtFramePopup>*:last-child{
    margin-bottom: 0;
}
.txtFramePopup dl{
    display: flex;
    gap: 0.5rem;
}
.txtFramePopup dt{
    width: 3rem;
    margin-right: 2rem;
}
.txtFramePopup dd{
    padding: 5px 18px;
    border: 1px solid black;
}
.color1{
    background-color: #316EB5;
    color: white;
}
.color2{
    background-color: black;
    color: white;
}
.color3{
    background-color: #0D162A;
    color: white;
}
.color4{
    background-color: #233866;
    color: white;
}
.color5{
    background-color: #FC5AD2;
    color: white;
}
.color6{
    background-color: #B77AF9;
    color: white;
}
.color7{
    background-color: #C3BBA4;   
    color: #000;
}
.color8{
    background-color: #DEDEDE;   
    color: #000;
}
.color9{
    background-color: #E9E7E7;
    color: #000;
}
.color10{
    background-color: #000000;
    color: white;
}
.color11{
    background-color: #F6F3EC;
    color: #000;
}
.color12{
    background-color: #F4A238;
    color: #000;
}
    
.banner{
    /* border: 1px solid red; */
}
.train>li{
    /* border: 1px solid red; */
}
.train>li figure{
    /* border: 1px solid blue; */
    margin-bottom: 2rem ;
}


.bannerTitle h1{
    margin-bottom: 2rem;
}
.bannerTitle p{
    margin-bottom: 3rem;
}
.bannerTxt{
    display: flex;
    /* border: 1px solid red; */
    margin-bottom: 2rem;
}
.bannerSmTxt{
    flex:2;
}
.bannerSmTxt+*{ /* 다음 section */
    flex:1;
}
.bannerSmTxt{
    /* border: 1px solid red; */
    display: flex;
    gap: 1rem;
}
.bannerSmTxt h3{
    flex: 1;
}
.bannerSmTxt p{
    /* border: 1px solid blue; */
    flex: 1;
    height: 4rem;
}
.tC{
    /* border: 1px solid aqua; */
}
.tC>dl {
    /* border: 1px solid blue; */
    display: flex
;
    margin-bottom: 0.5rem;
    justify-content: flex-end;
}
.tC>dl>dt{
    width: 4rem;
    /* border: 1px solid red; */
}
.tC dd{
    width: 4.5rem;
    padding: 5px 18px;
    border: 1px solid black;
}
.color_1{
    background-color: #4d5b91;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.color_2{
    background-color: #BA131B;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.color_3{
    background-color: #EAEAEA;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.color_4 {
    background-color: #ffffff;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper.bannerStation{
    width: 100%;
    /* height: 580px; */
    padding-bottom: 1.5rem;
}
 /* .bannerStation .swiper-button-next,
    .bannerStation .swiper-button-prev {
    top: 50%;
    width: 1rem;
    height: 2rem;
} */
.bannerStation .swiper-pagination-bullet-active {
    background: var(--main-color);
}

.projectTitle h1{
    margin-bottom: 2rem;
}
.projectTitle p{
    /* margin-bottom: 3rem; */
}
.stickyMenu{
    /* border: 1px solid red; */
    position: sticky;
    top: 4rem;
    left: 0;
    display: flex;
    gap: 1rem;
}
.stickyMenu.commonFrame{
    padding-top: 0;
}
.workTxt dt{
    opacity: 0.7;
}
.stickyMenu>li{
    /* border: 1px solid red; */
    font-size: 0.8rem;
    font-weight: 700;
    background-color: var(--main-color);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 0.7rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
}
.imgAll{
    text-align: center;
    min-height: 500px;
}
.imgAll img{
    width: 100%;
}

.project1,
.project2{
    max-width: 1920px;
    margin:0 auto;
}