// main: ga-fabricfarm.less

/* @import url('../../assets/fonts/NanumBarunGothic/nanumbarungothic.css'); */
@-moz-document url-prefix() {
  fieldset { display: table-cell; }
} /* 반응형 테이블 파이어폭스 전용핵 */

a:focus, a:hover {
    color: @link-hover-color;
}
a {
  color: @font-color-base;
}
.weight-color {
    color: @font-weight-color;
}
.line-height-none {
    line-height: 1px;
}
.divider {
    border-top:1px solid @divider;
    padding-bottom: 10px;
    margin-top: 10px;
}
.thumbnail, .form-control, .btn {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

/* 헤드라인 */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

//mixins, variables
.after {content:"";height:0;line-height:0;clear:both;display:block;*zoom:1;}
.radius(@r_var) {border-radius:@r_var;}
.transition(@transition) {-webkit-transition:@transition;-moz-transition:@transition;-o-transition:@transition;transition:@transition;}
.bgi(@url) {background-image:@url;background-repeat:no-repeat;}
.bgnone {background-image:none;}
.bgpo(@L,@R) {background-position:@L @R;}
.m0auto{margin:0 auto;}
.oh{overflow:hidden;}
.hidden{font-size:0;line-height:0;overflow:hidden;text-indent:-999;}
.tdnone{text-decoration:none;}
.taC{text-align:center;}.taL{text-align:left;}.taR{text-align:right;}
.vaM{vertical-align:middle;}.vaT{vertical-align:top;}
.poR{position:relative;}.poA{position:absolute;}.poF{position:fixed;}
.dpblock{display:block;} .dpinblock{display:inline-block;} .dpnone{display:none;}
.pointer{cursor:pointer;}
.ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;.dpinblock;}
.bg-white{background-color:@ff;} .bg-black{background-color:@00;} .bg-33{background-color:@33;}
.bdrA{border:1px solid #d5d5d5;} .bdrT{border-top:1px solid #d5d5d5;} .bdrB{border-bottom:1px solid #d5d5d5;} .bdrR{border-right:1px solid #d5d5d5;} .bdrL{border-left:1px solid #d5d5d5;} .bdrN{border:none;}
.fL{float:left;} .fR{float:right;}
.fwB{font-weight:bold;} .fwN{font-weight:normal;}
.f30{font-size:30px;} .f24{font-size:24px;} .f20{font-size:20px;}
.f18{font-size:18px;} .f16{font-size:16px;} .f15{font-size:15px;} .f14{font-size:14px;} .f13{font-size:13px;} .f12{font-size:12px;} .f11{font-size:11px;} .f10{font-size:10px;}
.black-dot{width:2px;height:2px;.hidden;.oh;.poA;left:0;top:10px;.bg-black;}
.rowM {padding-right: 15px; padding-left: 15px;}

/* 버튼형태 */
.btn {
    border-radius: inherit;
    position: relative;
}
.btn-base, .btn-base:focus {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
}
.btn-base:hover {
    color: #fff;
    background-color: @primary-color;
    border-color: @primary-color;
}
.btn-non-base, .btn-non-base:focus {
    color: #333333;
    background-color: #ffffff;
    border-color: @btn-border;
}
.btn-non-base:hover {
    color: #fff;
    background-color: @primary-color;
    border-color: @primary-color;
}
.btn-fabric {
    color: #fff;
    background-color: @primary-color;
    border-color: @primary-color;
}
.btn-fabric:hover {
    color: #fff;
    background-color: #da3e63;
    border-color: #da3e63;
}
.btn-order {
    color: #fff;
    background-color: #55657c;
    border-color: #55657c;
}
.btn-order:hover {
    color: #fff;
    background-color: #3f5067;
    border-color: #3f5067;
}
.btn-link-1 {
    background: #ffffff;
}
.btn-link-1:hover, .btn-link-1:focus, .btn-link-1:active {
    outline: 0;
    opacity: 1;
    color: #fff;
    background: #000000;
}
.btn-link-1 {
    display: inline-block;
    padding: 10px 12px;
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4285;
    background: transparent;
    color: #333333;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: inherit;
    border: 1px solid #cccccc;
}
.btn-group-justified {
    width: inherit;
}

/* label */
.label-default, 
.label-primary, 
.label-info, 
.label-success, 
.label-warning, 
.label-danger {
    border-radius: inherit;
}
.label-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
}
.label-sm {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
}
.label-md {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.4;
}
.label-lg {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3;
}
.control-label {
    font-family: "NanumBarunGothicBold"
}

/* Circle Buttons */
.btn-round {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.btn-round.btn-lg {
    width: 48px;
    height: 48px;
}
.btn-round.btn-sm {
    width: 34px;
    height: 34px;
}
.btn-round.btn-xs {
    width: 24px;
    height: 24px;
}
.btn-round {
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background-color: #222;    
    color: #FFF;
    text-align: center; 
    font-size: 16px; 
}

/* Circle icon */
.ico-round {
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background-color: #222;    
    color: #FFF;
    text-align: center; 
    font-size: 16px; 
}
.ico-round.hollow {
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background-color: #FFF;    
    color: #222;
    text-align: center;
    font-size: 16px;
    -webkit-box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.75);
}
.ico-round.round-xs {
    height: 24px;
    width: 24px;
    line-height: 24px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    font-size: 12px;
}
.ico-round.round-sm {
    height: 34px;
    width: 34px;
    line-height: 34px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: 14px;
}
.ico-round.round-lg {
    height: 48px;
    width: 48px;
    line-height: 48px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font-size: 18px;
}
.ico-round.default {
    background-color: #ffffff;
}
.ico-round.primary {
    background-color: #337ab7;
}
.ico-round.info {
    background-color: #5bc0de;
}
.ico-round.success {
    background-color: #5cb85c;
}
.ico-round.warning {
    background-color: #f0ad4e;
}
.ico-round.danger {
    background-color: #d9534f;
}
.ico-round.black {
    background-color: #000000;
}
.ico-round.fabric {
    background-color: @primary-color;
}
.ico-round.hollow.primary {
    color: #337ab7;   
    background-color: #FFF;    
    -webkit-box-shadow: 0px 0px 0px 3px #337ab7;
    -moz-box-shadow: 0px 0px 0px 3px #337ab7;
    box-shadow: 0px 0px 0px 3px #337ab7;
}
.ico-round.hollow.info {
    color: #5bc0de;
    background-color: #FFF;    
    -webkit-box-shadow: 0px 0px 0px 3px #5bc0de;
    -moz-box-shadow: 0px 0px 0px 3px #5bc0de;
    box-shadow: 0px 0px 0px 3px #5bc0de;
}
.ico-round.hollow.success {
    color: #5cb85c;
    background-color: #FFF;    
    -webkit-box-shadow: 0px 0px 0px 3px #5cb85c;
    -moz-box-shadow: 0px 0px 0px 3px #5cb85c;
    box-shadow: 0px 0px 0px 3px #5cb85c;
}
.ico-round.hollow.warning {
    color: #f0ad4e;
    background-color: #FFF;    
    -webkit-box-shadow: 0px 0px 0px 3px #f0ad4e;
    -moz-box-shadow: 0px 0px 0px 3px #f0ad4e;
    box-shadow: 0px 0px 0px 3px #f0ad4e;
}
.ico-round.hollow.danger {
    color: #d9534f;
    background-color: #FFF;    
    -webkit-box-shadow: 0px 0px 0px 3px #d9534f;
    -moz-box-shadow: 0px 0px 0px 3px #d9534f;
    box-shadow: 0px 0px 0px 3px #d9534f;
}
/* page button */
.page-btn {
    text-align: center;
    margin-top: 30px;
    span {
        margin: 0 10px;
    }
}
/* form */
.form-control {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.4285;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid @input-border;
    border-radius: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

.form-group {
    &.has-success {
      label {
        color: @green;
      }
      .form-control,
      .input-group-addon {
        border-color: @green;
        box-shadow: none;
      }
      .help-block {
        color: @green;
      }
    }
  
    &.has-warning {
      label {
        color: @yellow;
      }
      .form-control,
      .input-group-addon {
        border-color: @yellow;
        box-shadow: none;
      }
      .help-block {
        color: @yellow;
      }
    }
  
    &.has-error {
      label {
        color: @red;
      }
      .form-control,
      .input-group-addon {
        border-color: @red;
        box-shadow: none;
      }
      .help-block {
        color: @red;
      }
    }
}

.form-group {
    .form-control.error {
        border-color: @red;
        box-shadow: none;
    }
    label.error {
        display: block;
        text-align: left!important;
        color: @red;
    }
}

/* tab-menu */
.tab-menu {
    position: relative;
    z-index: 1000;
    text-align: center;
    & .nav {
        position: relative;
        padding-top: 10px;
        *zoom:1;
        border-bottom: 1px solid @tab-border-color;
        & .nav-tabs {
            display: inline-block;
            position: relative;
            vertical-align: top;
            margin: 0 0 -1px 0;
            padding: 0;
            list-style: none;
            & li {
                height: 45px;
                font-size: 13px;
                padding: 0;
                margin-bottom: 0;
            }
            & li:first-child a {
                margin-left: 0;
            }
            & li a {
                display: block;
                position: relative;
                margin: 0 0 0 -1px;
                border: 1px solid @tab-border-color;
                border-bottom-width: 0px;
                height: inherit;
                line-height: 44px;
                color: #666666;
                text-align: center;
                text-decoration: none;
                background: #ffffff;
                box-sizing: border-box;
                border-radius: 0;
            }
            & li.active a {
                z-index: 10;
                border-color: #000;
                height: 46px;
                color: #000;
                font-weight: bold;
            }
            & li a:focus, li a:hover {
                border-color: #000;
                color: #000;
                z-index: 1000;
                border-bottom-width: 1px;
            }
        }
        & .nav-tabs > li > ul.dropdown-menu {
            width: 100%;
            padding: 0;
            border: none;
            & > li {
                display: block;
                width: 100%;
            }
            & li a {
                display: block;
                position: relative;
                margin: 0 0;
                border: 1px solid @tab-border-color;
                border-bottom-width: 0px;
                height: inherit;
                line-height: 44px;
                color: #666666;
                text-align: center;
                text-decoration: none;
                background: #ffffff;
                border-radius: 0;
                padding: 0;
            }
            & li.active a {
                z-index: 10;
                border-color: #000;
                height: 45px;
                color: #000;
                font-weight: bold;
            }
            & li a:focus, li a:hover {
                border-color: #000;
                color: #000;
                z-index: 1000;
                border-bottom-width: 1px;
            }
        }
    }
}
.tab-menu-depth {
    position: relative;
    z-index: 1000;
    text-align: center;
    & > .nav {
        position: relative;
        padding: 10px 0 30px 0;
        *zoom:1;
        border-bottom: none;
        & > .nav-tabs {
            display: inline-block;
            position: relative;
            vertical-align: top;
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
            & > li {
                height: 45px;
                font-size: 13px;
                margin: 0 5px;
            }
            & > li:first-child > a {
                margin-left: 0;
            }
            & > li > a {
                display: block;
                position: relative;
                border: 1px solid @tab-border-color;
                height: inherit;
                line-height: 45px;
                color: #666666;
                text-align: center;
                text-decoration: none;
                background: #ffffff;
                box-sizing: border-box;
                border-radius: 0;
                padding: 0 10px;
            }
            & > li > a.w150 {
                width: 150px;
            }
            & > li.active > a {
                z-index: 10;
                border-color: #000;
                height: 45px;
                color: #000;
                font-weight: bold;
            }
            & > li a:focus, li a:hover {
                border-color: #000;
                color: #000;
                z-index: 1000;
                border-bottom-width: 1px;
            }
        }
    }
}
/* 마이페이지 */
.mypage {
    h4 {
        margin-bottom: 20px;
        font-weight: bold;
    }
    .mypage-header {
        width: 100%;
        margin: 0;
        padding: 20px;
        margin-bottom: 20px;
        border: 1px solid @box-border;
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
            float: inherit;
            li > h4 {
                font-size: 18px;
                font-weight: 600;
            }
            li {
                display: inline-block;
            }
            .member-name, .member-level {
                color: @primary-color;
                font-weight: 600;
            }
        }
    }
    .mypage-state {
        ul.toolbar {
            padding: 0;
            margin: 40px 0 0 0;
            list-style: none;
            text-align: center;
            .btn-circle > i {
                width: 80px;
                height: 80px;
            }
        }
        ul > li {
            display: inline-block;
            margin-bottom: 10px;
        }
        /* 버튼형태 - 둥근버튼 */
        .btn-mypage > i, .btn-mypage:focus > i {
            color: @font-color-base;
            background-color: #ffffff;
            border: 1px solid @btn-border;
        }
        .btn-mypage:hover > i {
            color: #ffffff;
            background-color: #666666;
            border: 1px solid @btn-border;
        }
        .btn.btn-circle, .btn.btn-circle.disabled {
            padding: 2px 5px;
            box-shadow: none;
            border: none;
            background: transparent;
            font-weight: 300;
            transition: none;
        }
        .btn-circle > i {
            padding: 22px 0;
            font-size: 34px;
            border-radius: 50%;
            display: block;
            margin: 0 auto;
            margin-bottom: 6px;
            line-height: normal;
            transition: all .3s ease-in-out 0s;
        }
        .btn-circle b.badge {
            position: absolute;
            right: 5px;
            top: 2px;
        }
        .badge {
            font-size: 16px;
            font-weight: 400;
            background-color: @primary-color;
            border-radius: 50%;
        }
    }
    .product-thum {
        float: left;
        margin-right: 10px;
    }
    .table dl {
        float: left;
        text-align: left;
    }
    .table ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .order-header {
        margin-bottom: 20px;
    }
    .data-box {
        text-align: right;
        margin-top: 20px;
    }
    .data-box .form-control {
        height: 30px;
        padding: 6px 12px;
    }
    .oder-number, .oder-data, .designer-info {
        display: block;
    }
    .oder-data {
        color: @second-color;
        font-size: 12px;
    }
}
/* 로그인 */
.login {
    ul.nav-tabs > li > a {
        width: 122px;
        text-align: center;
    }
    .well {
        width: 100%;
        min-height: 20px;
        padding: 0;
        margin-bottom: 20px;
        background: none;
        border: 0;
        border-radius: 4px;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .checkbox label {
        padding-right: 10px; 
    }
    .active {
        font-weight: 800; 
    }
    .checkbox {
        padding-bottom: 10px;
    }
    .member-btn {
        margin-top: 10px;
        text-align: center;
        a.btn-link {
            color: #333333;
            text-decoration: none;
            padding: 0 5px;
        }
        a:hover.btn-link {
            color: #f0577c;
        }
    }
    ul.login-banner, ul.login-banner a, ul.login-banner li {
        margin: 0;
        padding: 0;
        line-height: 0;
        font-size: 0;
        list-style: none;
        text-align: center;
    } 
    ul.login-banner > li {
        display: inline-block;
    }
    .lead {
        text-align: center;
    }
    .login-text {
        text-align: center;
        margin-top: 20px;
        font-weight: 100;
    }
    input.error, textarea.error { /* INPUT 박스 */
	    border:1px solid red;
    }
    p.error { /* 에러메시지 */
        display: block;
        color:red;
        font-weight: normal;
        text-align: right;
    }
}
/* 입력폼 */
.input-form {
    &.w500 {
        width: 500px;
        margin: 0 auto;
    }
    &.w600 {
        width: 600px;
        margin: 0 auto;
    }
    &.w700 {
        width: 700px;
        margin: 0 auto;
    }
    &.w800 {
        width: 800px;
        margin: 0 auto;
    }
}
/* 설명문 */
.explanation {
    font-size: 12px;
    margin-bottom: 10px;
}
/* 회원가입 */
.join-agreement, .join {
    .f1 p {
        text-align: center;
    }
    .f1-steps { 
        overflow: hidden;
        position: relative;
        margin-bottom: 20px;
    }
    .f1-progress { 
        position: absolute; 
        top: 24px; 
        left: 0; 
        width: 100%; 
        height: 1px; 
        background: #ddd; 
    }
    .f1-progress-line { 
        position: absolute; 
        top: 0; 
        left: 0; 
        height: 1px; 
        background: @primary-color; 
    }
    .f1-step { 
        position: relative; 
        float: left; 
        width: 33.333333%; 
        padding: 0 5px;
        text-align: center;
    }
    .f1-step-icon {
        display: inline-block; 
        width: 40px; 
        height: 40px; 
        margin-top: 4px; 
        background: #ddd;
        font-size: 16px; 
        color: #fff; 
        line-height: 40px;
        -moz-border-radius: 50%; 
        -webkit-border-radius: 50%; 
        border-radius: 50%;
    }
    .f1-step.activated .f1-step-icon {
        background: #fff; 
        border: 1px solid @primary-color; 
        color: @primary-color; 
        line-height: 38px;
    }
    .f1-step.active .f1-step-icon {
        width: 48px; 
        height: 48px; 
        margin-top: 0; 
        background: @primary-color; 
        font-size: 22px; 
        line-height: 48px;
    }
    .f1-step p { color: #ccc; }
    .f1-step.activated p { color: @primary-color; }
    .f1-step.active p { color: @primary-color; }
    .form-control {
        background-color: #ffffff;
        opacity: 1;
    }
    .panel-footer {
        padding: 10px 15px;
        background-color: inherit;
        border-top: none;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        .form-group button {
            margin-bottom: 10px;
        }
    }
    .help-block {
        padding: 0;
        margin: 5px 0 0 0;
        float: left;
    }
    .well {
        width: 100%;
        min-height: 20px;
        padding: 20px;
        margin-bottom: 20px;
        background: none;
        border: 1px solid @box-border;
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .join-confirm-icon {
        width: 100%;
        text-align: center;
        font-size: 60px;
    }
    /* 회원탈퇴 */
    .member-leave {
        float: right;
    }
}
/* 주문현황 */
.order-header {
    border: 1px solid @box-border;
    padding: 20px;
    .f1-steps {
        overflow: hidden;
        position: relative;
        margin: 0 auto;
        text-align: center;
    }
    .f1-step { 
        position: relative;
        width: 15%;
        padding: 0 5px;
        display: inline-block;
        vertical-align: middle;
    }
    .f1-step-icon {
        display: inline-block; 
        width: 50px; 
        height: 50px; 
        margin-top: 4px; 
        background: @primary-color;
        font-size: 16px;
        color: #fff; 
        line-height: 50px;
        -moz-border-radius: 50%; 
        -webkit-border-radius: 50%; 
        border-radius: 50%;
    }
    .f1-step.divi {
        width: 5%;
        font-size: 24px;
    }
    .f1-step p { 
        color: #ccc;
        text-align: center
    }
    .f1-step p {
        color: @font-color-base;
    }
    .f1-step p.f1-count { 
        text-align: center;
        font-size: 24px;
        font-weight: 600;
    }
    .f1-step p.f1-count a {
        text-decoration: none;
    }
    .f1-step p.f1-count a:hover {
        text-decoration: underline;
    }
}

/* 푸터메뉴 : 이용약관 */
.agreement, .privacy {
    dl > dt {
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 10px;
    }
    dl > dd {
        list-style: none;
        margin: 5px 0;
        padding: 0;
    }
    dl > dd > ul {
        list-style: none;
        margin: 10px 0 10px 20px;
        padding: 0;
    }
    .table {
        margin-top: 10px;
    }
    .table thead th, .table tbody td, {
        text-align: center;
    }
    .table thead th {
        background: #f0f0f0;
    }
}

/* 리스트 */
.list-top-wrap {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 20px;
}
.productList {
    & .img-thumbnail {
        padding: 0;
        border-radius: 0;
    }
    & .caption {
        position: relative;
        & .btn-wrap {
            position: absolute;
            top:25%;
            right:0;
            z-index: 10;
            a {
                padding-left: 10px;
            }
            i {
                font-size: 20px;
            }
        }
    }
}
.designerList {
    & .circle {
        border: 1px solid #dddddd;
        border-radius: 50%;
    }
    & .caption {
        position: relative;
        margin: 10px 30px;
        & .btn-wrap {
            position: absolute;
            top:0;
            right:0;
            z-index: 10;
            i {
                font-size: 20px;
            }
        }
    }
}

/* 웹진형게시판 */
.webzine {
    & .card {
        border-bottom: 1px solid @table-border-color;
        margin-bottom: 30px;
        padding-bottom: 20px;
        & img {
            border: 1px solid @img-border-color;
        }
        & > h5.card-header {
            font-weight: bold;
        }
    }
    & .card-body {
        position: relative;
        & h2.card-title {
            font-size: 18px;
            font-weight: bold;
            margin: 20px 0 10px 0;
        }
        & .card-data {
            margin-bottom: 10px;
            a.writer {
                color: @primary-color;
            }
        }
        & .comment {
            & > li {
                margin-bottom: 5px;
            }
            & .comment-data {
                padding-left: 15px;
                color: @comment-text-color; 
            }
        }
        & ol {
            padding-left: 16px;
        }
        & .card-count {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 10;
            & > ul > li {
                list-style: none;
                display: inline-block;
                margin-left: 20px;
                font-size: 18px;
                font-weight: bold;
                & span {
                    margin-left: 10px;
                }
            }
        }
    }
    /* post */
    & h1.post-title {
        font-size: 24px;
    }
    & .post-data {
        position: relative;
        & .post-count {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 10;
            & > li {
                list-style: none;
                display: inline-block;
                margin-left: 20px;
                font-size: 18px;
                font-weight: bold;
                & span {
                    margin-left: 10px;
                }
            }
        }
    }
    & hr {
        margin: 15px 0;
        border-top: 1px solid @table-border-color; 
    }
    .form-inline .w100 {
        width: 100%;
        margin-bottom: 10px;
    }
    & .comment-text {
        border-bottom: 1px solid @table-border-color;
        margin-bottom: 20px;
        & .media {
            border-top: 1px solid @table-border-color;
            padding-top: 15px;
            display: flex;
            align-items: flex-start;
            & .d-flex {
                display: flex !important;
            }
            & .media-body {
                flex: 1;
                & .media-title {
                    font-weight: bold;
                    font-size: 16px;
                    margin-top: 0;
                    display: inline-block;
                }
                & .media-data {
                    color: @second-color;
                }
            }
        }
    }
}
@media (max-width: 767px) {
    .table-responsive > .table {
        margin-bottom: inherit;
    }
    h2 {
        text-align: center;
    }
    .tab-menu {
        & .nav {
            & .nav-tabs.nav-tabs-md-wide {
                display: block;
                & li a {
                    width: 100%;
                }
                & li {
                    width: 100%;
                }
            }
            
        }
    }
    .tab-content {
        margin-top: 20px;
    }
    /* 마이페이지 - 메인 */
    .mypage {
        .mileage {
            text-align: center;
            height: inherit;
            border-left: none;
            > li {
                margin-top: 10px;
                line-height: 32px;
                vertical-align: middle;
            }
            > li.benefit-title, li.benefit-point {
                text-align: left;
            }
            > li.benefit-title {
                text-align: left;
            } 
            .mileage-point {
                font-size: 32px;
                font-weight: 600;
                color: @primary-color;
            }
        }
        /* 주문현황 */
        .order-header {
            .f1-step {
                width: auto;
            }
            .f1-step.divi {
                width: auto;
                margin-top: 20px;
                font-size: 14px;
            }
            .f1-step p.f1-count { 
                font-size: 24px;
            }
        }
        .data-box .btn-group {
            margin-top: 10px;
        }
        .mypage-state {
            ul.toolbar {
                margin: 20px 0 0 -15px;
            }
        }
    }
    /* 웹진형게시판  */
    .webzine {
        & .card-body {
            & .card-data {
                text-align: center;
            }
            & .card-count {
                position: inherit;
                text-align: center;
                & > ul {
                    padding-left: 0;
                }
                & > ul > li {
                    margin: 0 10px;
                }
            }
        }
    }
    /* 세탁기호 */
    .wash {
        margin-top: 30px;
        .wash-ico {
            width: 307px;
            height: 152px;
            display: block;
            text-align: center;
            background-image:url('/static/fabricfarm/assets/images/common/wash-icon.png');background-repeat:no-repeat;
            background-size: cover;
        }
    }
}
@media (min-width: 768px) {
    /* 회원가입 */
    .join-agreement, .join {
        .control-label {
            text-align: left;
        }
    }
    .tab-menu {
        & .nav {
            & .nav-tabs {
                & li a {
                    min-width: 102px;
                }
            }
        }
    }
    .tab-content {
        margin-top: 40px;
    }
    /* 마이페이지 - 메인 */
    .mypage {
        .mileage {
            text-align: right;
            border-left: 1px solid @box-border; 
            .mileage-point {
                font-size: 32px;
                font-weight: 600;
                color: @primary-color;
            }
            .benefit {
                margin-top: 10px;
            }
        }
        /* .form-horizontal .control-label {
            padding-top: 0;
            padding-right: 5px;
        } */
    }
    .productList {
        & .caption {
            & .btn-wrap {
                top:60%;
            }
        }
    }
    .designerList {
        & .caption {
            margin: 10px 30px;
            & dl dt {
                text-align: center;
            }
            & .btn-wrap {
                position: inherit;
                text-align: center;
                a {
                    padding:0 5px;
                }
            }
        }
    }
    /* 세탁기호 */
    .wash {
        margin-top: 30px;
        .wash-ico {
            width: 696px;
            height: 345px;
            display: block;
            text-align: center;
            background-image:url('/static/fabricfarm/assets/images/common/wash-icon.png');background-repeat:no-repeat;
            background-size: cover;
        }
    }
}

@media (min-width: 992px) {
    /* 회원가입 */
    .join-agreement, .join {
        .control-label {
            text-align: right;
        }
    }
    .tab-menu {
        & .nav {
            & .nav-tabs {
                & li a {
                    min-width: 120px;
                }
            }
        }
    }
    /* 마이페이지 - 메인 */
    .mypage {
        .mileage {
            text-align: right;
            border-left: 1px solid @box-border; 
            .mileage-point {
                font-size: 32px;
                font-weight: 600;
                color: @primary-color;
            }
            .benefit {
                margin-top: 10px;
            }
        }
    }
    .productList {
        & .caption {
            & .btn-wrap {
                top:25%;
            }
        }
    }
    .designerList {
        & .caption {
            & dl dt {
                text-align: left;
            }
            & .btn-wrap {
                position: absolute;
                a {
                    padding-left: 10px;
                }
            }
        }
    }
    /* 세탁기호 */
    .wash {
        margin-top: 30px;
        .wash-ico {
            width: 992px;
            height: 491px;
            display: block;
            text-align: center;
            background-image:url('/static/fabricfarm/assets/images/common/wash-icon.png');background-repeat:no-repeat;
            background-size: cover;
        }
    }
}