/* ===============================================================================

    COMMON UI DESIGN STYLESHEET : 마루 패밀리 사이트

=============================================================================== */

/* ========== Toolbars : 상단바 ========== */


/* ========== Bottom navigation : 하단메뉴 ========== */


/* ========== PANEL : 박스 ========== */
.panel { overflow: hidden; position: relative; z-index: 3; margin-bottom: 10px; padding: 20px; border: 0; border-radius: 8px; background-color: transparent; box-shadow: 0 0 0 0; transition: transform, box-shadow .15s ease; }

@media all and (min-width: 768px) {
    .panel:hover { z-index: 4; background-color: #fff; -webkit-box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3); box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3); }
    .panel ~ .right:hover { z-index: 4; background-color: #fff; -webkit-transform: rotate3d(.5,-.866,0,15deg) rotate(1deg); transform: rotate3d(.5,-.866,0,15deg) rotate(1deg); -webkit-box-shadow: 12px 30px 60px -12px rgba(50,50,93,.25), 18px 18px 36px -18px rgba(0,0,0,.3); box-shadow: 12px 30px 60px -12px rgba(50,50,93,.25), 18px 18px 36px -18px rgba(0,0,0,.3); }
    .panel ~ .left:hover { z-index: 4; background-color: #fff; -webkit-transform: rotate3d(.5,.866,0,15deg) rotate(-1deg); transform: rotate3d(.5,.866,0,15deg) rotate(-1deg); -webkit-box-shadow: -12px 30px 60px -12px rgba(50,50,93,.25), -18px 18px 36px -18px rgba(0,0,0,.3); box-shadow: -12px 30px 60px -12px rgba(50,50,93,.25), -18px 18px 36px -18px rgba(0,0,0,.3); }
}
@media all and (min-width: 1024px) {
    .panel { padding: 30px; }
}


/* ========== BUTTONS : 버튼 ========== */
.btn { display: block; min-width: 120px; height: 40px; line-height: 40px; margin-bottom: 5px; padding: 0 15px; border: 1px solid rgba(33,33,33,0.1); border-radius: 4px; text-align: center; background-color: #fff; font-family: "NanumSquare"; font-size: 14px; font-weight: 700; color: #414141; -webkit-box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08); box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08); -webkit-transition: all .15s ease; transition: all .15s ease; }
.btn:hover, .btn:focus, .btn:active { position: relative; top: 1px; color: #212121; background-color: #f7f7f7; -webkit-box-shadow: 0 2px 3px rgba(50,50,93,.22), 0 1px 3px rgba(0,0,0,.3); box-shadow: 0 2px 3px rgba(50,50,93,.22), 0 1px 3px rgba(0,0,0,.3); }

@media all and (min-width: 768px) {
    .btn { max-width: 300px; margin: 0 auto 5px; }
}


/* ========== Breadcrumbs : 페이지 목차 ========== */


/* ========== Lists : 목록 ========== */


/* ========== MODAL ========== */
/* Dialogs : 액션 포함 팝업 */
.dialogs { border-radius: 4px; background-color: #fff; -webkit-box-shadow: 0 50px 100px -20px rgba(50,50,93,.25), 0 30px 60px -30px rgba(0,0,0,.3); box-shadow: -7 50px 100px -20px rgba(50,50,93,.25), 0 30px 60px -30px rgba(0,0,0,.3); opacity: 0; -webkit-transform: scale(.95); transform: scale(.95); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; will-change: transform,opacity; -webkit-transition-property: opacity,-webkit-transform; transition-property: opacity,-webkit-transform; transition-property: transform,opacity; transition-property: transform,opacity,-webkit-transform; -webkit-transition-duration: .25s; transition-duration: .25s;
}
.dialogs.active { right: 0; opacity: 1; -webkit-transform: none; transform: none; pointer-events: auto; }

/* Snackbar : 하단메시지팝업 ( 액션, 시간 ) */

/* Toasts : 메시지팝업 ( 시간 ) */


/* ========== FORM : 폼 ========== */
/* 폼 */
.form-group { margin-bottom: 20px; border: 1px solid #e1e1e1; }
.form-top { position: relative; width: 100%; height: 30px; line-height: 30px; border-bottom: 1px dotted #e1e1e1; background-color: #fcfcfc; }
.form-top label { padding: 0 15px; font-size: 12px; font-weight: 700; }
.form-top span { display: block; position: absolute; top: 11px; right: 22px; width: 6px; height: 6px; border-radius: 3px; background-color: #c1c1c1; }
.form-top input[type="checkbox"] { position: absolute; top: 5px; right: 18px; }
.form-top.check-set ul li .check { top: 7.5px; }
.form-top.check-set ul li label { padding: 1px 10px 0 42px; font-size: 12px; font-weight: 700; }
.form-middle { position: relative; min-height: 50px; background-color: #fff; }
.form-middle .form-icon { position: absolute; top: 0; right: 0; width: 50px; height: 50px; background-color: #fafafa; text-align: center; }
.form-middle .form-icon i { line-height: 50px; color: #a1a1a1; font-size: 16px; }
.form-middle .form-btn { position: absolute; top: 0; right: 0; width: 50px; height: 50px; line-height: 50px; background-color: #fafafa; text-align: center; }
.form-middle .form-btn.large { width: 80px; background-color: #fafafa; font-size: 12px; font-weight: 700; text-align: center; } 
.form-middle .form-btn.large i { position: relative; top: 2px; line-height: 50px; margin-right: 1px; font-size: 16px;  }
.form-middle .form-btn.left { left: 0; right: auto; }
.form-middle .form-unit { position: absolute; top: 0; right: 0; width: 50px; height: 50px; line-height: 50px; background-color: #fafafa; text-align: center; font-size: 12px; font-weight: 700; }
.form-middle input { width: calc(100% - 50px); height: 50px; line-height: 50px; padding: 0 20px; border: 0; font-size: 14px; font-weight: 700; }
.form-middle input[type="number"] { width: calc(100% - 100px); margin-left: 50px; text-align: center; }
.form-middle input[disabled="disabled"] { border: 0; background-color: #f0f0f0; }
.form-middle .value { display: inline-block; width: calc(100% - 50px); height: 50px; line-height: 50px; padding: 0 20px; font-size: 14px; font-weight: 700; }
.form-middle select.form-control { z-index: 3; height: 50px; line-height: 50px; padding: 0 20px; border: 0; background-color: transparent; font-size: 13px; box-shadow: 0 0 0 0; }
.form-middle textarea { width: 100%; min-height: 150px; padding: 20px; border: 1px solid #e1e1e1; font-size: 14px; }
.form-middle .enter-write { position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 10px solid #428BCA; border-right: 10px solid transparent; }
.form-bottom { min-height: 30px; line-height: 18px; padding: 10px; border-top: 1px dotted #e1e1e1;font-size: 12px; }
.form-bottom .add-btn { display: block; line-height: 40px; font-size: 12px; }
.form-bottom .add-btn i { position: relative; top: 2px; margin-right: 3px; font-size: 16px; }
/* 폼 결과값 */
.form-group-result { line-height: 40px; margin-bottom: 5px !important; border: 1px solid #e1e1e1; background-color: #fff; }
.form-group-result label { min-width: 100px; padding: 0 15px; text-align: center; font-size: 12px; background-color: #fafafa; }
.form-group-result.full { width: 100%; }
.form-group-result.full label { width: 100%; }
.form-group-result .value { display: inline-block; line-height: 26px; padding: 7px 15px; font-size: 13px; font-weight: 700; }
.form-group-result.full .value { width: 100%; text-align: center; }
.form-group-result textarea { width: 100%; line-height: 24px; min-height: 150px; padding: 20px; border: 0; font-size: 14px; }
::-webkit-input-placeholder { font-size: 12px; font-style: italic; }
::-moz-placeholder { font-size: 12px; font-style: italic; }
:-ms-input-placeholder { font-size: 12px; font-style: italic; }
:-moz-placeholder { font-size: 12px; font-style: italic; }

@media all and (min-width: 768px) {
    .form-group { float: left; width: calc(50% - 3px); margin-right: 3px; }
    .form-group-result { float: left; width: calc(50% - 3px); margin-right: 3px; }
}
@media all and (min-width: 768px) {
    .form-middle select.form-control { width: calc(100% - 20px); margin: 0 10px; }
}
/* Text fields : 텍스트박스 */

/* Radio button : 라디오버튼 */
.radio-group ul li { display: inline-block; float: left; position: relative; width: auto; height: 30px; color: #414141; }
.radio-group ul li input[type="radio"] { position: absolute; visibility: hidden; }
.radio-group ul li label { display: block; position: relative; z-index: 9; height: 30px; line-height: 30px; margin: 0 auto; padding: 10px 10px 10px 45px; font-size: 14px; font-weight: 300; cursor: pointer; -webkit-transition: all 0.15s linear; transition: all 0.15s linear; text-align: left; }
.radio-group ul li:hover label { color: #212121; }
.radio-group ul li .check { display: block; position: absolute; top: 17px; left: 20px; z-index: 5; width: 15px; height: 15px; border: 2px solid #aaa; border-radius: 100%; -webkit-transition: border .25s linear; transition: border .25s linear; }
.radio-group ul li:hover .check { border: 2px solid #212121; }
.radio-group ul li .check::before { content: ''; display: block; position: absolute; top: 2px; left: 2px; height: 7px; width: 7px; margin: auto; border-radius: 100%; -webkit-transition: background 0.25s linear; transition: background 0.25s linear; }
.radio-group input[type="radio"]:checked ~ .check { border: 2px solid #4CAF50; }
.radio-group input[type="radio"]:checked ~ .check::before { background: #4CAF50; }
.radio-group input[type="radio"]:checked ~ label { font-weight: 700; color: #4CAF50; }
.form-content .radio-group ul li { display: inline-block; width: 50%; height: 50px; }
.form-content .radio-group ul li label { line-height: 50px; padding: 0 10px 0 45px; font-size: 13px; }
.form-content .radio-group ul li .check { top: 17px; }

/* Check box : 체크박스 */
.checkbox-group ul li { display: block; position: relative; float: left; width: 100%; height: 30px; color: #414141; }
.checkbox-group ul li input[type="checkbox"] { position: absolute; visibility: hidden; }
.checkbox-group ul li label { display: block; position: relative; z-index: 9; height: 30px; line-height: 30px; margin: 0 auto; padding: 10px 10px 10px 45px; font-size: 14px; font-weight: 300; cursor: pointer; -webkit-transition: all 0.15s linear; transition: all 0.15s linear; text-align: left; }
.checkbox-group ul li:hover label { color: #212121; }
.checkbox-group ul li .check { display: block; position: absolute; top: 17px; left: 20px; z-index: 5; width: 15px; height: 15px; border: 2px solid #aaa; border-radius: 0; -webkit-transition: border .25s linear; transition: border .25s linear; }
.checkbox-group ul li:hover .check { border: 2px solid #212121; }
.checkbox-group ul li .check::before { content: ''; display: block; position: absolute; top: 2px; left: 2px; width: 7px; height: 7px; margin: auto; border-radius: 0; -webkit-transition: background 0.25s linear; transition: background 0.25s linear; }
.checkbox-group input[type="checkbox"]:checked ~ .check { border: 2px solid #4CAF50; }
.checkbox-group input[type="checkbox"]:checked ~ .check::before { background: #4CAF50; }
.checkbox-group input[type="checkbox"]:checked ~ label { font-weight: 700; color: #4CAF50; }
.form-content .checkbox-group ul li { display: inline-block; width: 50%; height: 50px; }
.form-content .checkbox-group ul li label { line-height: 50px; padding: 0 10px 0 45px; font-size: 13px; }
.form-content .checkbox-group ul li .check { top: 17px; }

/* Switch : 스위치 */

/* Pickers : 달력 */

/* Dropdown : 드롭메뉴 */


/* ========== Table : 테이블 ==========*/
/* Pagination : 페이지이동 */


/* ========== Tabs : 탭 ========== */


/* ========== Notifications : 아코디언 ========== */


/* ========== Pager : 추가/삭제 박스 ========== */


/* ========== Tooltips : 툴팁 ========== */


/* ========== Popovers : 말풍선 ========== */


/* ========== Chips ( Badges ) : 뱃지 ========== */


/* ========== Progress : 진행바 ========== */


/* ========== Carousel ( Slider ) : 슬라이더 ========== */


/* ========== Image : 이미지 ========== */