@charset "utf-8";

/********************
// tablet 분기점
********************/
@media only screen and (max-width: 1200px) {

/********************
** common 
********************/
.inner{width:calc(100dvw - 120px)}

.menu{background:#fff; right:-100dvw; top:0; transition: ease-in-out 0.3s;overflow-y:auto}
header.active .menu{right:0}
.menu li{border-bottom:1px solid #eeeef0}


/********************
** index 
********************/
.mainService{align-self: stretch;}
.mainSloganBox{width:360px; height:880px}
.mainSloganBox > div.wpA{left:50%; top:50%; transform:translate(-50%, -50%)}
.map{width:100% !important; min-height:320px !important; border-radius:8px 8px 0 0 !important; border: 1px solid #91949f !important; border-bottom:0 !important}
.mainLocationDetail{border-radius:0 0 8px 8px !important; border: 1px solid #91949f !important; border-top:0 !important}

/********************
** organization 
********************/
.organizationCnt{width:calc(50% - 9px);}

/********************
** location 
********************/
.mapLocation{height:420px !important}

/********************
** law 
********************/
.lawServiceDetail{width:calc(50% - 9px)}
.lawProcessCnt{width:calc(33.3333% - 16px)}

/********************
** insurance 
********************/
.insurProcesscnt{width:calc(50% - 12px)}
.insuranceEffectBox{width:calc(50% - 9px);}

/********************
** hr 
********************/
.hrDetail{width:calc(50% - 9px)}

/********************
** laborCase 
********************/
.laborNeedsBox{width:calc(50% - 9px)}
.laborCaseTypeCnt3{width:100%;}

/********************
** torment 
********************/
.tormentEffectBox{width:calc(50% - 9px)}

/********************
** emplyment 
********************/
.employmentCaseMove{left:-20px; width:calc(50% + 20px)}
.employmentCheckBox{width:calc(50% - 9px)}

/********************
** welfare 
********************/
.welfareProcess .lawProcessCnt{width:calc(50% - 12px)}

/********************
** footer
********************/
.fixBtnBox{right:24px; bottom:32px;}
.fixModal{bottom:32px; right:43px;}


}    

/********************
// 모바일 분기점
********************/
@media only screen and (max-width: 768px) {     

/********************
** common 
********************/
.inner{width:calc(100dvw - 40px)}

/********************
** index 
********************/
.mainSloganBox{width:244px; height:644px}
.map{min-height:240px !important}

/********************
** organization 
********************/
.organizationCnt{width:calc(50% - 6px);}

/********************
** location 
********************/
.mapLocation{height:240px !important}

/********************
** law 
********************/
.lawServiceDetail{width:100%}
.lawProcessCnt{width:100%}
  
/********************
** insurance 
********************/
.insurProcesscnt{width:100%}
.insuranceEffectBox{width:100%;}

/********************
** hr 
********************/
.hrDetail{width:100%}

/********************
** laborCase
********************/
.laborNeedsBox{width:100%}
.laborCaseTypeCnt1{width:100%;}

/********************
** torment 
********************/
.tormentEffectBox{width:100%}

/********************
** emplyment 
********************/
.employmentCaseMove{left:-16px; }
.employmentCheckBox{width:100%}

/********************
** welfare 
********************/
.welfareProcess .lawProcessCnt{width:100%}

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