/* ================================================
   setting_util.css - 순수 CSS 유틸리티 클래스
   PHP 변수 불필요한 공통 클래스 모음
   setting_css.php에서 link로 로드
================================================ */

/**** 공백 ****/
.sp_com{height: 40px; width: 100%; float: left}
.sp_100{ width:100%; height:100px; float:left}
.sp_90{ width:100%; height:90px; float:left}
.sp_80{ width:100%; height:80px; float:left}
.sp_70{ width:100%; height:70px; float:left}
.sp_60{ width:100%; height:60px; float:left}
.sp_50{ width:100%; height:50px; float:left}
.sp_40{ width:100%; height:40px; float:left}
.sp_30{ width:100%; height:30px; float:left}
.sp_20{ width:100%; height:20px; float:left}
.sp_10{ width:100%; height:10px; float:left}

/**** 마진값: 하단 ****/
.mb_100{ margin-bottom:100px !important}
.mb_90{ margin-bottom:90px !important}
.mb_80{ margin-bottom:80px !important}
.mb_70{ margin-bottom:70px !important}
.mb_60{ margin-bottom:60px !important}
.mb_50{ margin-bottom:50px !important}
.mb_40{ margin-bottom:40px !important}
.mb_30{ margin-bottom:30px !important}
.mb_20{ margin-bottom:20px !important}
.mb_10{ margin-bottom:10px !important}
.mb_5{ margin-bottom:5px !important}

/**** 마진값: 상단 ****/
.mt_100{ margin-top:100px}
.mt_90{ margin-top:90px}
.mt_80{ margin-top:80px}
.mt_70{ margin-top:70px}
.mt_60{ margin-top:60px}
.mt_50{ margin-top:50px}
.mt_40{ margin-top:40px}
.mt_30{ margin-top:30px}
.mt_20{ margin-top:20px}
.mt_10{ margin-top:10px}
.mt_5{ margin-top:5px}

/**** 태블릿: 3분의 2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
.sp_100{ height:66px}
.sp_90{ height:60px}
.sp_80{ height:53px}
.sp_70{ height:47px}
.sp_60{ height:40px}
.sp_50{ height:33px}
.sp_40{ height:27px}
.sp_30{ height:20px}
.sp_20{ height:13px}
.sp_10{ height:7px}

.mb_100{ margin-bottom:66px !important}
.mb_90{ margin-bottom:60px !important}
.mb_80{ margin-bottom:53px !important}
.mb_70{ margin-bottom:47px !important}
.mb_60{ margin-bottom:40px !important}
.mb_50{ margin-bottom:33px !important}
.mb_40{ margin-bottom:27px !important}
.mb_30{ margin-bottom:20px !important}
.mb_20{ margin-bottom:13px !important}
.mb_10{ margin-bottom:7px !important}
.mb_5{ margin-bottom:3px !important}

.mt_100{ margin-top:66px}
.mt_90{ margin-top:60px}
.mt_80{ margin-top:53px}
.mt_70{ margin-top:47px}
.mt_60{ margin-top:40px}
.mt_50{ margin-top:33px}
.mt_40{ margin-top:27px}
.mt_30{ margin-top:20px}
.mt_20{ margin-top:13px}
.mt_10{ margin-top:7px}
.mt_5{ margin-top:3px}
}

/**** 모바일: 50% ****/
@media only all and (max-width:767px) {
.sp_100{ height:50px}
.sp_90{ height:45px}
.sp_80{ height:40px}
.sp_70{ height:35px}
.sp_60{ height:30px}
.sp_50{ height:25px}
.sp_40{ height:20px}
.sp_30{ height:15px}
.sp_20{ height:10px}
.sp_10{ height:5px}

.mb_100{ margin-bottom:50px !important}
.mb_90{ margin-bottom:45px !important}
.mb_80{ margin-bottom:40px !important}
.mb_70{ margin-bottom:35px !important}
.mb_60{ margin-bottom:30px !important}
.mb_50{ margin-bottom:25px !important}
.mb_40{ margin-bottom:20px !important}
.mb_30{ margin-bottom:15px !important}
.mb_20{ margin-bottom:10px !important}
.mb_10{ margin-bottom:5px !important}
.mb_5{ margin-bottom:3px !important}

.mt_100{ margin-top:50px}
.mt_90{ margin-top:45px}
.mt_80{ margin-top:40px}
.mt_70{ margin-top:35px}
.mt_60{ margin-top:30px}
.mt_50{ margin-top:25px}
.mt_40{ margin-top:20px}
.mt_30{ margin-top:15px}
.mt_20{ margin-top:10px}
.mt_10{ margin-top:5px}
.mt_5{ margin-top:3px}

/**** 모바일 전용 폰트 축소 (COM_tit 조합용) ****/
/* transform:scale = 이미 계산된 최종 font-size 기준 비율 축소 */
.COM_tit.mo-f99 { transform: scale(0.99); transform-origin: left top}
.COM_tit.mo-f98 { transform: scale(0.98); transform-origin: left top}
.COM_tit.mo-f97 { transform: scale(0.97); transform-origin: left top}
.COM_tit.mo-f96 { transform: scale(0.96); transform-origin: left top}
.COM_tit.mo-f95 { transform: scale(0.95); transform-origin: left top}
.COM_tit.mo-f94 { transform: scale(0.94); transform-origin: left top}
.COM_tit.mo-f93 { transform: scale(0.93); transform-origin: left top}
.COM_tit.mo-f92 { transform: scale(0.92); transform-origin: left top}
.COM_tit.mo-f91 { transform: scale(0.91); transform-origin: left top}
.COM_tit.mo-f90 { transform: scale(0.90); transform-origin: left top}
.COM_tit.mo-f85 { transform: scale(0.85); transform-origin: left top}
.COM_tit.mo-f80 { transform: scale(0.80); transform-origin: left top}
.COM_tit.mo-f75 { transform: scale(0.75); transform-origin: left top}
.COM_tit.mo-f70 { transform: scale(0.70); transform-origin: left top}
}