@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
    }

    /* Entire Layout */
    .cd-section {
        height: auto;
    }
    .cd-section > div {
        height: auto;
        position: relative;
    }
    .content {
        position: static;
        width: 100%;
        height: 100%;
        left: 20px;
        bottom: 20px;
    }


    /* Header */
    header{
        transition: 0.5s;
    }
    header.active {
        background-color: #fff;
        border-bottom: 1px solid #eee;
    }

    .menu {
        display: block;
    }
    .slogan {
        display: none;
    }
    .gnb {
        background-color: #fff;
        position: fixed;
        top: 0;
        right: -270px;
        width: 250px;
        height: 100vh;
        box-shadow: -5px 0 10px rgba(0,0,0,0.2);
        transition: 0.5s;
    }
    .gnb.active {
        right: 0;
    }
    .menu {
        margin-top: 60px;
        line-height: 40px;
    
    }
    .menu a {
        display: block;
        text-align: right;
        padding-right: 20px;
        color: #000;
        font-size: 20px;
    }

    /* Trigger */
    .trigger {
        position: absolute;
        display: block;
        width: 24px;
        height: 14px;
        top: 20px;
        right: 20px;
        transition: 0.5s;
    }
    .trigger span {
        position: absolute; 
        /* position absolute 로 설정하면 span 테그의 display가 inline-block으로 자동 변경된다 */
        height: 1px;
        width: 100%;
        background-color: #000;
        transition: 0.3s;
    }
    .trigger span:nth-child(1) {
        top: 0;
    }
    .trigger span:nth-child(2) {
        top: 50%;
        width: 80%;
    }
    .trigger span:nth-child(3) {
        top: 100%;
    }
    .trigger.active span:nth-child(1) {
        top: 50%;
        transform: rotate(45deg);
        
    }
    .trigger.active span:nth-child(2) {
        top: 50%;
        width: 80%;
        opacity: 0;

    }
    .trigger.active span:nth-child(3) {
        top: 50%;
        transform: rotate(-45deg);
    }

    /* Gototop */
    .gototop {
        position: fixed;
        display: block;
        bottom: 20px;
        left: 20px;
        width: 40px;
        height: 40px;
        line-height: 50px;
        border: 1px solid #fff;
        border-radius: 50%;
        text-align: center;
        transform: translateY(30px);
        opacity: 0;
        transition: 0.5s;
    }
    .gototop.active {
        opacity: 1;
        transform: translateY(0);
    }
    .btn-hiring {
        right: 20px;
        bottom: 20px;
    }

    .cd-vertical-nav {
        display: none;
    }


    /* -------------------------------------- Section Home ------------------------------------------- */

    .home-inner {
        height: 100vh;

    }
    .welcome-text {
        transform: translate((-50%,-50%)) scale(0.7);
        width: 100%;
    }

    .home-heading {
        left: 20px;
    }
    .home-heading span {
        font-size: 50px;
    }

    /* -------------------------------------- Section about ------------------------------------------ */
    .about-inner {
        height: auto;
        padding: 20px;

    }
    .about-items {
        width: 100%;
        position: static;
        margin-left: 0;
        transform: none;
        text-align: center;

    }
    .item img {
        float: none;
        height: 50px;
        margin: 0;
    }
    .item h3 {
        font-size: 20px;
        margin-top: 20px;
    }
    .item:last-child {
      margin-bottom: 400px;
    }
    .item:first-child {
        margin-top: 100px;
    }
    /* ------------------------------- Section project------------------------------ */
    .project-inner {
        height: auto;
    } 
    .tab > div {
        float: none;
        width: 100%;
    }
    .view-project {
        width: 100%;
    }
    .project-info {
        padding: 20px;
    }
    .project-info p {
        position: relative;
    }
    .detail div {
        font-size: 10px;
    }
    .btn {
        width: 100%;
        bottom: -10px;
        padding: 10px;
    }
    .tab {
        border: none;
    }

    /* ------------------------------- Section plan ------------------------------ */

    .plan-inner {
        height: auto;
        padding: 20px;
    }
    .plan-feature {
        width: 100%;
        position: static;
        transform: none;
    }
    .plan-feature > div {
        height: auto;
    }
    .plan-info > div {
        float: none;
        width: 100%;
    }
    .plan-photo img {
        height: auto;
    }
    .plan-heading {
        padding-right: 0;
    }
    .plan-info { 
        margin-bottom: 40px;
    }

/* ------------------------------- Section awards ------------------------------ */
    .awards-inner {
        height: auto;
    }
    .awards-inner > div {
        float: none;
        width: 100%;
    }
    .about-heading,
    .victory-jump img {
        position: static;
        transform: none;
        padding: 40px 20px;
    }
    .about-heading {
        width: 100%;
    }
    .victory-jump {
        text-align: center;
    }

    /* ------------------------------- Section Location ------------------------------ */
    .location-inner {
        height: auto;
        position: relative;
    }
    .feature {
        position: relative;
        /* position을 static이 아닌 relative를 한 이유는 .location-inner:before 가상요소가 position속성이 absolute 이기 때문에 .feature의 positon: static 보다 우선하기때문에 안에 내용을 다 가려진다. 그래서 position 속성을 relrative 로 바꿔주고 top,left 를 0으로 변경  */
        top: 0;
        left: 0;
        width: 100%;

        transform: none;
    }
    .feature > div {
        float: none;
        width: 100%;
        padding: 20px;
    }
    .service-item .fa-solid {
        margin-bottom: 20px;
    }

    /* ------------------------------- Section Contact ------------------------------ */
    .contac-inner {
        height: auto;
    }
    .contact-feature {
        position: static;
        transform: none;
        width: 100%;
    }
    .contact-feature  > div {
        float: none;
        width: 100%;
    }
    /* ---------------------- SubPage : Hiring -------------------------- */
    .hiring-main {
        height: 300px;
    }
    .hiring-heading{
        width: 100%;
    }
    .hiring-heading h1 {
        font-size: 30px;
        margin-top: 20px;
    }
    .hiring-info {
        padding: 20px;
    }
    .hiring-info > div {
        float: none;
        width: 100%;
        height: auto;
    }
    .center-child {
        position: static;
        transform: none;
        width: 100%;
    }
    .center-child  h2 {
        font-size: 24px;
    }
    .hiring-slogan {
        padding: 50px 0;
    }
    .hiring-slogan p {
        font-size: 25px;
    }
    .hiring-slogan p:before {
        font-size: 100px;
        top: -50px;
    }
    .hiring-contact ul {
        display: block;
        width: 100%;
    }
    /* Featherlight mobile CSS  */
    .featherlight .featherlight-close-icon {
        font-size: 24px;
        right: 20px;
        top: 35px;
    }

    /* ---------------------- SubPage : Project -------------------------- */
    .hiring-main.project-main1,
    .hiring-main.project-main2,
    .hiring-main.project-main3 {
        height: 70vh;
    }
    .hiring-main.project-main1 .hiring-heading h1,
    .hiring-main.project-main2 .hiring-heading h1,
    .hiring-main.project-main3 .hiring-heading h1 {
    font-size: 40px;
    }
    .photo.project-info  {
        font-size: 19px;
    }
    .project-detail .hiring-slogan p:before {
        left: -10px;
      }

    


}