@media screen and (max-width:1921px) {
    /* 데스크탑 1920*1080 */
}
@media screen and (max-width:1537px) {
    /* 데스크탑 1536*867 */
}
@media screen and (max-width:1367px) {
    /* 데스크탑 1366*768 */
}
@media screen and (max-width:1200px) {
    /* 데스크탑 */
}
@media screen and (max-width:992px) {

    /* 타블렛 */
    /* ########### header ########## */
    .nav {
        display: none;
    }
    .innerHeader.active  .logo {
        display: none;
    }
    .innerHeader.active {
        position: fixed;
        display: block;
        padding: 0;
        width: 100%;
        height: 40%;
        background-color: #fff;
    }
    .innerHeader.active .group_nav {
        position: absolute;
        bottom: 0;
        height: 70%;
        width: 100%;
        flex-direction: column;
        text-align: center;
    }
    .innerHeader.active .nav { 
        display: block;  
        flex: 1;
        margin: auto;
        font-size: 2em;
        width: 100%;
        height: 100%;
    }
    .innerHeader.active .nav a {
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    /* Trigger */
    .trigger {
        position:absolute;
        display: block;
        /*border: 1px solid red;*/
        width: 30px;
        width: 2em;
        height: 16px;
        height: 1.5em;
        position: absolute;
        right: 2em;
        top: 2.3em;
    }
    .trigger span {
        position: absolute;
        height: 1px;
        background-color: #DD4A48;
        width: 100%;
        transition: 0.3s;
    }
    .trigger span:nth-child(1) {
        top: 0;
    }
    .trigger span:nth-child(2) {
        top: 50%;
    }
    .trigger span:nth-child(3) {
        top: 100%;
    }

    .trigger.active span:nth-child(1) {
        top: 50%;
        transform: rotate(45deg);
    }
    .trigger.active span:nth-child(2) {
        opacity: 0;
    }
    .trigger.active span:nth-child(3) {
        top: 50%;
        transform: rotate(-45deg);
    }
  
    /* ########### home ########## */

    .welcome {
        top: 35%;
        font-size: 1em;
    }
    .shop {
        width: 80%;
        bottom: 0;
    }
    /* ########### skills ########## */

    .skills {
        position: static;

    }
    .skills .title {
        margin-bottom: 1em;
        width: 100%;
        font-size: 1.5em;
    }
    .skills_wrap {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        width: 90%;
        height: 60vh;
        flex: 1;
    }
    .skills_wrap .dec {
        width: 100%;
        flex: 0.1;
        font-size: 1.5em;
        padding: 1em 0;
        text-align: center;
    }
    .img_wrap {
        height: 100%;
        width: 100%;
    }
    .flour {
        width: 22em;
    }
    .flour_opened {
        width: 15em;
    }
    .bowl {
        width: 14em;
        transform: translate(-65%,-20%);
    }
    .whisk {
        width: 7em;
        transform: translate(-170%,-55%) rotate(-55deg);
    }
    .pour {
        width: 10em;
    }
    .pouring {
        font-size: 1em;
    }
    /* +++++++++++ CSS milk +++++++++++ */
    .milk {
        width: 12.5em;
    }
    .milk_opend {
        width: 9em;
    }
    .spa {
        width: 3em;
        transform: translate(-330%,-51%) rotate(-215deg);
    }
    .milk_pour {
        width: 12em;
        transform: translate(-60%,-53%);
    }
    .milk_pouring {
        font-size: 1em;
    }

    /* +++++++++++ Butter milk +++++++++++ */
    .butter {
        width: 22em;
    }
    .butter_cuted {
        width: 14em;
    }
    .butter_1 {
        width: 7em;
    }
    .butter_2 {
        width: 7em;
    }
    .butter_pouring {
        font-size: 1em;
        transform: translate(-65%,-70%);
    }
    /* +++++++++++ Donut +++++++++++ */

    .donut {
        width: 13em;
    }
    .skills_wrap.d ul .en > br {
        display: none;
    }
    .skills_wrap.d {
        height: 65vh;
    }
     /* ################### work ##################### */

     .work {
        flex-direction: column;
        height: 160vh;
        /* border: 1px solid skyblue; */
     }
     .work .title {
        margin: 0;
        font-size: 1.5em;
        text-align: center;
     }
     .work_wrap {
        width: 100%;
        height: 35vh;
        margin: 1em auto;
        display: block;
        flex:none;
     }
     
     .work_wrap .box {
        align-self: center;
        height: 100%;
        width: 73%;
     }
     .work_wrap .box a {
     }
     .work_wrap.a .box_img {
        background: url(../imgs/ilu_donut_pink.svg) no-repeat bottom;
     }
     .work_wrap.b .box_img {
        background: url(../imgs/ilu_donut_pink.svg) no-repeat bottom;
     }
     .work_wrap.c .box_img {
        background: url(../imgs/ilu_donut_pink.svg) no-repeat bottom;
     }
     .work_wrap.a .box:hover .box_img {
        background: url(../imgs/ilu_donut_pink.svg) no-repeat bottom;
        transform: translate(0,-10%);
        width: 100%;
    }
     .work_wrap.b .box:hover .box_img {
        background: url(../imgs/ilu_donut_pink.svg) no-repeat bottom;
        transform: translate(0,-10%);
        width: 100%;
    }
     .work_wrap.c .box:hover .box_img {
        background: url(../imgs/ilu_donut_pink.svg) no-repeat bottom;
        transform: translate(0,-10%);
        width: 100%;
    }
     .box_img {
        width: 40%;
        height: 100%;
    }
    /* ################### contact ##################### */
    #scroll-section-3 .title {
        text-align: center;
        font-size: 2em;
    }
    fieldset {
        width: 100%;
    }
    .cook {
        display: none;
    }
    label{
        font-size: 1.7em;
    }
    input[type=text],
    input[type=email]{
        right: 0;
        height: 2em;
        width: 100%;
        font-size: 1.6em;
    }
    textarea {
        height: 11em;
    }
    button[type=submit] {
        height: 2.5em;
        font-size: 1.7em;
    }
}
@media screen and (max-width:767px){
    /* 스마트폰 세로 */
    
    /* ########### header ########## */
    .nav {
        display: none;
    }
    .innerHeader.active  .logo {
        display: none;
    }
    .innerHeader.active {
        position: fixed;
        display: block;
        padding: 0;
        width: 100%;
        height: 40%;
        background-color: #fff;
    }
    .innerHeader.active .group_nav {
        position: absolute;
        bottom: 0;
        height: 70%;
        width: 100%;
        flex-direction: column;
        text-align: center;
    }
    .innerHeader.active .nav { 
        display: block;  
        flex: 1;
        margin: auto;
        font-size: 2em;
        width: 100%;
        height: 100%;
    }
    .innerHeader.active .nav a {
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    /* Trigger */
    .trigger {
        position:absolute;
        display: block;
        /*border: 1px solid red;*/
        width: 30px;
        width: 2em;
        height: 16px;
        height: 1.5em;
        position: absolute;
        right: 2em;
        top: 2.3em;
    }
    .trigger span {
        position: absolute;
        height: 1px;
        background-color: #DD4A48;
        width: 100%;
        transition: 0.3s;
    }
    .trigger span:nth-child(1) {
        top: 0;
    }
    .trigger span:nth-child(2) {
        top: 50%;
    }
    .trigger span:nth-child(3) {
        top: 100%;
    }

    .trigger.active span:nth-child(1) {
        top: 50%;
        transform: rotate(45deg);
    }
    .trigger.active span:nth-child(2) {
        opacity: 0;
    }
    .trigger.active span:nth-child(3) {
        top: 50%;
        transform: rotate(-45deg);
    }
  
    /* ########### home ########## */

    .welcome {
        top: 35%;
        font-size: 1em;
    }
    .shop {
        width: 60%;
        bottom: 0;
    }
    /* ########### skills ########## */

    .skills {
        position: static;

    }
    .skills .title {
        margin-bottom: 1em;
        width: 100%;
        font-size: 1em;
    }
    .skills_wrap {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        width: 90%;
        height: 60vh;
        flex: 1;
    }
    .skills_wrap .dec {
        width: 100%;
        flex: 0.1;
        font-size: 1em;
        padding: 1em 0;
        text-align: center;
    }
    .img_wrap {
        height: 100%;
        width: 100%;
    }
    .flour {
        width: 14em;
    }
    .flour_opened {
        width: 10em;
    }
    .bowl {
        width: 10em;
        transform: translate(-65%,-20%);
    }
    .whisk {
        width: 5em;
        transform: translate(-170%,-55%) rotate(-55deg);
    }
    .pour {
        width: 6em;
    }
    .pouring {
        font-size: 0.8em;
    }
    /* +++++++++++ CSS milk +++++++++++ */
    .milk {
        width: 10em;
    }
    .milk_opend {
        width: 7em;
    }
    .spa {
        width: 2.5em;
        transform: translate(-330%,-51%) rotate(-215deg);
    }
    .milk_pour {
        width: 8em;
        transform: translate(-74%,-43%);
    }
    .milk_pouring {
        font-size: 0.8em;
    }

    /* +++++++++++ Butter milk +++++++++++ */
    .butter {
        width: 17em;
    }
    .butter_cuted {
        width: 11em;
    }
    .butter_1 {
        width: 5em;
    }
    .butter_2 {
        width: 5em;
    }
    .butter_pouring {
        font-size: 0.8em;
        transform: translate(-65%,-70%);
    }
    /* +++++++++++ Donut +++++++++++ */

    .donut {
        width: 8em;
    }
    .skills_wrap.d ul .en > br {
        display: none;
    }
    .skills_wrap.d {
        height: 65vh;
    }
     /* ################### work ##################### */

     .work {
        flex-direction: column;
        height: 160vh;
        /* border: 1px solid skyblue; */
     }
     .work .title {
        margin: 0;
        font-size: 1.5em;
        text-align: center;
     }
     .work_wrap {
        width: 100%;
        height: 35vh;
        margin: 1em auto;
        display: block;
        flex:none;
     }
     
     .work_wrap .box {
        align-self: center;
        height: 100%;
        width: 73%;
     }
     .work_wrap .box a {
     }
     .work_wrap.a .box_img {
        background: url(../imgs/ilu_donut_pink.svg) no-repeat bottom;
     }
     .work_wrap.b .box_img {
        background: url(../imgs/ilu_donut_pink.svg) no-repeat bottom;
     }
     .work_wrap.c .box_img {
        background: url(../imgs/ilu_donut_pink.svg) no-repeat bottom;
     }
     .work_wrap.a .box:hover .box_img {
        background: url(../imgs/ilu_donut_pink.svg) no-repeat bottom;
        transform: translate(0,-10%);
        width: 100%;
    }
     .work_wrap.b .box:hover .box_img {
        background: url(../imgs/ilu_donut_pink.svg) no-repeat bottom;
        transform: translate(0,-10%);
        width: 100%;
    }
     .work_wrap.c .box:hover .box_img {
        background: url(../imgs/ilu_donut_pink.svg) no-repeat bottom;
        transform: translate(0,-10%);
        width: 100%;
    }
   

     .box_img {
        width: 40%;
        height: 100%;
     }

      /* ################### contact ##################### */
      #scroll-section-3 .title {
        text-align: center;
        font-size: 2em;
      }
      fieldset {
        width: 100%;
      }

      .cook {
        display: none;
      }
}