@charset "utf-8";



/**************************************** 작은 모니터, 노트북 ****************************************/

@media screen and (max-width: 1200px){
    /********** 공통사항 **********/
    .inner{width:calc(100dvw - 120px);}

    /**************************
    ** header
    **************************/

    /**************************
    ** index
    **************************/
        /** mainBanner **/
        .mainBanner {background:url('/img/mainBanner-t.jpg'); background-position:center; background-size:cover;}
        .mainBannerCenter {left:50%; transform:translateX(-50%); bottom:60px;}
        /** case **/
        /** about **/
        .about{--about-bleed:60px;}
        .aboutMedia{width:calc(100% + var(--about-bleed)); flex-basis:calc(100% + var(--about-bleed)); margin-right:calc(var(--about-bleed) * -1);}
        /** feature **/
        .featureCnts {display:grid; grid-template-columns:repeat(2, 1fr); row-gap:56px;}
        /** place **/
        .placeCnt1::before {background-image:url('/img/place-001-t.jpg');}
        .placeCnt2::before {background-image:url('/img/place-002-t.jpg');}
        .placeCnt3::before {background-image:url('/img/place-003-t.jpg');}
        .placeCnt4::before {background-image:url('/img/place-004-t.jpg');}
        .placeCnt5::before {background-image:url('/img/place-005-t.jpg');}
        .placeCnt6::before {background-image:url('/img/place-006-t.jpg');}
        /** subBanner **/
        /** work **/
        /** product **/
        .productModalHead {border-radius:20px 20px 0 0;}
        .productModalClose {transform:translateY(calc(-100% - 20px));}
        /** who **/
        .whoCnts {display:grid; grid-template-columns:repeat(2,1fr);}
        /** contact **/

    /**************************
    ** footer
    **************************/
    .fixBtn {bottom:40px; right:40px;}
    /**************************
    ** contact
    **************************/
    /** list **/
    /** view **/
    /** write **/

    
}

/**************************************** 큰태블릿 사이즈 ****************************************/

@media screen and (max-width: 1024px){


    
}


/**************************************** 큰모바일 사이즈 ****************************************/

@media screen and (max-width: 768px){
    .inner{width:calc(100dvw - 40px);}

    /**************************
    ** header
    **************************/

    /**************************
    ** index
    **************************/
        /** mainBanner **/
        /** case **/
        /** about **/
        /** feature **/
        .featureCnts {display:grid; grid-template-columns:repeat(2, 1fr); row-gap:32px;}
        /** place **/
        .placeCnts {display:grid; grid-template-columns:repeat(1,1fr); height:auto !important;}
        .placeCnt1::before {background-image:url('/img/place-001-m.jpg');}
        .placeCnt2::before {background-image:url('/img/place-002-m.jpg');}
        .placeCnt3::before {background-image:url('/img/place-003-m.jpg');}
        .placeCnt4::before {background-image:url('/img/place-004-m.jpg');}
        .placeCnt5::before {background-image:url('/img/place-005-m.jpg');}
        .placeCnt6::before {background-image:url('/img/place-006-m.jpg');}
        /** subBanner **/
        /** work **/
        .workCnts {grid-template-columns:1fr;}
        .workLink {display:flex; width:100%; justify-content:center; align-self:stretch; min-height:40px; padding:0;}
        .workLinkLine {width:1px; height:100%;}
        .workpointRight,
        .workpointLeft {display:block; left:50%; right:auto;}
        .workpointRight {top:auto; bottom:0; transform:translate(-50%, 50%);}
        .workpointLeft {top:0; transform:translate(-50%, -50%);}
        /** product **/
        .productCnts {grid-template-columns:repeat(1, 1fr);}
        .productModal {padding:20px;}
        .productModalFrame {max-height:100%;}
        .productModalHead {border-radius:16px 16px 0 0;}
        .productModalClose {top:16px; right:16px; transform:translateY(calc(-100% - 16px));}
        /** who **/
        .whoCnts {display:grid; grid-template-columns:repeat(1,1fr);}
        /** contact **/
        .checkBoxLine {width:20px; height:20px;}

    /**************************
    ** footer
    **************************/
    .fixBtn {bottom:20px; right:20px;}

    /**************************
    ** contact
    **************************/
    /** list **/
    /** view **/
    /** write **/

}


/**************************************** 작은모바일 사이즈 ****************************************/

@media screen and (max-width: 568px){

}