body {font-family: 'Noto Sans KR', sans-serif;font-size:16px;line-height:1.8;color:#35383b;letter-spacing: -0.3px ;}

label   {font-weight: 500;}
dl, ul, ol, li  {list-style: none;}
h1, h2, h3, h4, h5, h6  {margin: 0;padding: 0;line-height: 1.6;}

.btn    {color: #fff;background: #8e223f;border: none;}
.custom-btn {color: #fff;font-weight: 500;background: #8e223f;border: none;padding: 12px 0;}
.btn:hover, .custom-btn:hover   {color:#fff;background: #731C33;}
a, a:hover{
    color: #35383b;
    font-weight: 500;
    text-decoration: none;
    background-color: transparent;
}

.nav-link   {font-size: 16px;font-weight: 500;padding: 0 24px;}
.custom-nav-link-lg {font-size: 20px;font-weight: 500;padding: 0 12px;}
.custom-nav-link:hover,.custom-nav-link-lg:hover    {color: #8e223f;}

/*위치*/
.navbar-nav         {margin: 0 auto;}
.navbar .navbar-nav {width: 100%;}

header.main_visual img  {height: 620px;min-height: 620px;max-height: 620px;object-fit: cover;}
header.main_visual .main_text {font-size: 2rem;font-weight: 500;line-height: 3.2rem;}
header.main_visual .custom-carousel-caption{position: absolute;top: 50%;transform: translateY(-50%);right: 15%;left: 15%;z-index: 10;color: #fff;text-align: center;}

.sub_nav{width: 100%;background-color: #8e223f;}
.sub_nav .menu-item{text-align: center;color: #fff;padding: 32px 0;}
.sub_nav .menu-item i{width: 80px;height: 80px;background: rgba(0, 0, 0, 0.2);border-radius: 50%;font-size: 32px;color: #fff;padding: 24px;display: block;margin: 0 auto 16px;}
.sub_nav .container .row a:hover i{background: rgba(0, 0, 0, 0.4);transform: scale(1.2);transition: transform .2s;}

.main-slide .fadeIn{
    visibility: hidden;
}

.main-slide .active .fadeIn{
    visibility: visible;
    animation-delay: .6s;
    animation-duration: 1s;
}

.section_01{
    margin-top: 40px;
}

.section_01 .container .title a{
    color: #35383b;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.section_01 .container .title h3 {
    font-size: 24px;
    font-weight: 700;
}

.section_01 .container .list-group{
    margin-bottom: 0;
}

.section_01 .container .list-group-item{
    border:none;
    border-bottom: 1px solid #f1f4fa;
    padding: 8px 40px 8px 0;    
    margin-bottom: 8px;
}

.section_01 .container .list-group-item:last-child{
    margin-bottom: 0;
    border-bottom: none;
}

a.list-group-item:focus, a.list-group-item:hover{
    text-decoration: underline;
    background: none;
}
.section_01 .container .list-group-item .list-group-item-heading{
    height: 48px;
    max-height: 48px;
    font-size: 18px;
    overflow: hidden;
    font-weight: 500;
    line-height: 22px;
    margin-bottom: 8px;
}
.section_01 .container .list-group-item .list-group-item-text{
    overflow: hidden;
    font-size: 14px;
    font-weight: 400;
    color: #828b94;
    margin-bottom: 0;
}
.section_01 .container .list-group-item .text{
    height: 40px;
    max-height: 40px;
}
.section_01 .container .row .article .menu-item {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 24px;
    color: #35383b;
}

.section_01 .container .row .article .menu-item img{
    width: 80px;
    height: 80px;
    background: #F1F4F6;
    border-radius: 16px;
    font-size: 32px;
    padding: 24px;
    display: block;
    margin: 0 auto 8px;
    color: #35383b;
}

.section_01 .container .row .store-info a:hover div img {
    background: #dfe4e8;
}
.carousel-area .container .title h3{
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 40px;
}
.carousel-area .single-blog-post .post-meta{
    font-size: 14px;
    font-weight: 400;
}

.carousel-area .single-blog-post .blog-thumb img{
    width: 100%;
    height: 120px;
    min-height: 120px;
    object-fit: cover;
    border-radius: 8px;
}
.owl-nav .carousel-control-prev,.owl-nav .carousel-control-next{
    width: auto;
    opacity: 1;
}

.carousel-area .owl-nav {
    position: relative;
}

.section_02{
    background: #dfe4e8;
    padding-top: 40px;
    padding-bottom: 40px;
}

.section_02 .container{
    text-align: center;
}

.section_02 .container .title h3{
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 40px;
}

.section_02 .container .row .thumbnail{
    border: none;
    border-radius: 16px;
    padding: 16px;
    background: #fff;
    min-height: 470px;
    max-height: 470px;
}

.section_02 .container .row .thumbnail .caption .title{
    font-size: 18px;
    font-weight: 700;
    padding: 16px 0;
    border-bottom: 1px dotted #dfe4e8;
}
.section_02 .container .row .thumbnail .caption ul{
    padding-left: 0;
    font-size: 18px;
}

.section_03 .main_text {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 3.25rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.section_03 .sub_text {
    font-size: 1.1rem;
    line-height: 1.5rem;
    margin-bottom: 3rem;
}

.section_03 .container .row{
    margin-bottom: 40px;
}

.section_03 .container .row .menu-item{
    text-align: center;
    margin-bottom: 24px;
}

.section_03 .container .row .menu-item h3{
    font-size: 24px;
    font-weight: 500;
    margin: 24px 0 8px 0;
}
.section_03 .container .row .menu-item i{
    background: rgba(0, 0, 0, 0.75);
    border-radius: 16px;
    font-size: 40px;
    padding: 40px 16px;
    display: block;
    color: #fff;
}

.section_03 .container .row .menu-item i p{
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

footer{
    background: #35383B;
    color: #A4ABB2;
    font-size: 14px;
    font-weight: 400;
}
footer .container .footer-menu-bar, .address, .copyright{
    margin-bottom: 16px;
}
footer .container .footer-menu-bar .footer-menu{
    margin: 0;
    padding: 0;
    display: inline-block;
}
footer .container .footer-menu-bar .footer-menu>li{
    float: left;
}

footer .container a {
    color: #A4ABB2;
}

footer .container .sns .nav{
    justify-content: flex-end;
}

footer .container .sns {
    text-align: right;
}

@media (max-width: 1200px) {
    .nav-item .nav-link .custom-nav-link-lg {
        font-size: 18px;
    }
}
@media (max-width: 992px) {
    .nav-item {
        margin: 8px 0;
    }
    .navbar-toggler {
        border: 1px solid #dfe4e8;
        padding: .25rem .75rem;
        font-size: 1.25rem;
        line-height: 1;
        border-radius: .25rem;
        color: #35383b;
    }
    header.main_visual img{
        height: 100px;
        min-height: 100px;
        max-height: 100px;
        object-fit: cover;
    }
}
@media (max-width: 768px) {

    header.main_visual img{
        height: 320px;
        min-height: 320px;
        max-height: 320px;
        object-fit: cover;
    }
    header.main_visual .main_text{
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 2.4rem;
    }
    .sub_nav .container .row .menu-item{
        padding: 16px 0;
    }

    .sub_nav .container .row .menu-item i{
        width: 64px;
        height: 64px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        font-size: 24px;
        color: #fff;
        padding: 18px;
        display: block;
    }

    .section_01,.section_02,.section_03{
        margin-bottom: 0;
    }

    .article{
        padding-top: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid #f1f4f6;
    }
    .section_01 .article:last-child{
        border: none;
    }
    .section_01 .container .list-group-item{
        padding: 0;
    }
    .section_02 .container .row .thumbnail{
        margin-bottom: 24px;
    }
    footer .info,.sns{
        justify-content: normal;
    }

    footer .container .sns .nav{
        justify-content: flex-start;
    }

    footer .container .sns {
        text-align: left;
    }
}

/*공통*/
.sub-visual {
    padding-top: 10px;
    padding-bottom: 10px;
    color: #35383b;
    font-size: 20px;
    font-weight: 700;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
}
.sub-visual span   {font-size:15px;font-weight:500;}
.content-wrapper .navbar{
    width: 100%;
    background: #f1f4f6;
}
.content-wrapper span {
    font-size: 15px;
    font-weight: 500;
    color: #000;
    text-align:center
}
.navbar-primary{
    width: 100%;
    background: #8E223F;
}
.content-wrapper .navbar-bg{
    background: #f1f4f6;
    border-radius: 8px;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background: #8e223f;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    overflow-y: hidden;
}

.nav-scroller .nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.custom-navbar{padding:0;}
.custom-navbar .nav a {color: #fff;font-weight: 400;}
.custom-navbar .nav a.active{background: rgba(0, 0, 0, 0.4);font-weight: 400;}
.custom-navbar .nav a:hover{background: rgba(0, 0, 0, 0.4);font-weight: 400;}

@media (max-width: 768px) {
    .custom-container {max-width: 100%;}
}
@media (max-width: 576px)  {
    .custom-navbar .container{
        text-align: center;
        padding:0;
    }

    .custom-navbar .container .nav{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    .custom-navbar .container .nav a {
        color: #fff;
        font-weight: 400;
        font-size: 14px;
        flex: 0 0 50%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        padding: 0.5rem!important;
    }
}

.inner-content .container .line{
    border-bottom: 2px solid #F1F4F6;
}
.inner-content .container .line::before{
    content: "";
    background-color: #8e223f;
    width: 32px;
    height: 3px;
    display: block;
}

.content-wrapper{
    min-height: calc(100vh - 80px - 272px - 148px);
}

.inner-content .container .title h2 {padding-bottom: 24px;font-weight: 700;font-size: 32px;}
.inner-content .container .title a {font-weight: 700;font-size: 15px;color:#fff;
                                    background-color: navy;padding: 5px 10px;border-radius: 5px;
        background: linear-gradient(180deg, rgba(86,214,255,1) 0%, rgba(65,225,255,1) 50%, rgba(87,219,246,1) 100%);
}

.inner-content .container .row .content-title{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}/**/
    .inner-content .container .row .content-title a {
        background-color: navy;
        color: #fff;
        padding: 5px 10px;border-radius: 5px;
        background: linear-gradient(180deg, rgba(86,214,255,1) 0%, rgba(65,225,255,1) 50%, rgba(87,219,246,1) 100%);
        
    }

.table th, .custom-table th{font-weight: 500;}

.table-secondary, .custom-table-secondary{background: #f1f4f6;}
.table tr, .custom-table tr{
    vertical-align: middle !important;
    /* word-break: keep-all; */
    white-space: nowrap;
}
.table td, .custom-table td {
    vertical-align: middle !important;
}

.table thead, .custom-table thead {
    background: #f1f4f6;
    border-top: 2px solid #084571;
    border-bottom: 2px solid #A4ABB2;
}
table.table-gray thead, tr.table-gray{
    background: #084571;
    color: #fff;
}
.ws-td {
    vertical-align: middle !important;
    /* word-break: keep-all; */
    white-space: normal;
}

/*생협소개-이사장*/

.inner-content .container .row .content-title span{
    font-size: 16px;
    font-weight: 500;
}
.inner-content .container .row .content-title .title{
    font-size: 32px;
    font-weight: 700;
}
.inner-content .container .greeting .pic img{
    margin-bottom: 24px;
    border-radius: 16px;
    width: 100%;
}

@media (max-width: 768px) {
    .inner-content .greeting{
        margin-top: 40px;
        margin-bottom: 20px;
    }

    .inner-content .container .greeting .content-title span{
        font-size: 16px;
        font-weight: 500;
    }
    .inner-content .container .greeting .content-title .title{
        font-size: 32px;
        font-weight: 700;
    }
    .inner-content .container .greeting .pic{
        margin: 0 auto;
        margin-bottom: 24px;
    }
}

/*생협소개-협동조합소개*/


.inner-content .container .coop .pic{
    width: 100%;
    text-align: center;
    border: 1px solid #f1f4f6;
    padding: 40px;
}

.inner-content .container .coop .pic img{
    max-width: 380px;
    width: 100%;
    height: 100%;
}

.univ-coop a{
    display: inline-flex;
    flex-direction: column
}
@media (max-width: 768px){
    .inner-content .container .coop .text{
        margin-bottom: 40px;
    }

    .inner-content .container .coop .pic{
        padding: 24px;
        margin: 40px 0;
    }
}

/*생협소개-조직현황*/

.inner-content .container .condition .pic{
    width: 100%;
    text-align: center;
    border: 1px solid #f1f4f6;
    padding: 40px;
}
.inner-content .container .condition .pic img{
    max-width: 776px;
    width: 100%;
}

@media (max-width: 768px){
    .inner-content .container .condition .pic{
        width: 100%;
        text-align: center;
        border: 1px solid #f1f4f6;
        margin: 40px 0;
    }
    .table .count{
        display: none;
    }
}
/*생협소개-대학소개*/
.inner-content .container .univ-coop {
    text-align: center;
}
.inner-content .container .univ-coop img{
    min-width: 80px;
    margin: 24px;
}
/*생협소개-발자취*/
.history .nav-scroller {
    position: relative;
    z-index: 2;
    overflow-y: hidden;
}
.history .tab-scroller .nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.history .tab-scroller .nav a:hover{
    color: rgba(0, 0, 0, 0.4);
    font-weight: 500;
}
.history .tab li a{
    border-radius: 0;
    padding: 16px 24px;
}
.history .year{
    font-size: 26px;
    font-weight: 700;
}
.history .text{
    margin-top: 8px;
    font-weight: 500;
}
.history .day{
    color: #6b727a;
    display: block;
    padding-bottom: 4px;
    font-size: 13px;
    margin-right: 4px;
}

/*서비스-식당예약*/

.reservation .card{
    min-height: 220px;
}

.reservation .card p{
    border-top: 1px dotted #dfe4e8;
    height: 120px;
    min-height: 120px;
}

/*짐캐리*/
.carry h2{
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
}

.carry .form-item{
    margin-bottom: 24px;
}
.carry .form-item>label{
    font-weight: 500;
}
.carry .row .pic{
    display: flex;
    align-items: center;
    justify-content: center;
}
.carry .row .pic img{
    border-radius: 24px;
    width: 100%;
}
@media (max-width: 992px){
    .carry .row .pic img{
        display: none;
    }
}
/*식당메뉴*/
.restaurant {display: flex;justify-content: center;background: #fff;}
.restaurant .navbar{padding: 8px;}

.restaurant a{min-width: 25px;text-align: center;color: #35383b;font-size: 16px;}

.restaurant .table{color: #35383b;}
.restaurant .table td, .table th{border-top: none;}
.restaurant .table .row-time{background: #8e223f;color: #fff;}
.restaurant .table .tbody{display: flex;align-items: flex-start;}

.restaurant .row .date{display: flex;justify-content: left;align-items: center;border-bottom: 1px dashed;}
.restaurant .row .name{align-items: center;border-bottom: 1px dashed;}

#menu-result {display: none;}

.menu{min-width: 180px;min-height: 180px;}

.fixed-body{min-height: 380px;}

.menu-body + .menu-body{margin-top: 16px;}

.menu .card-header {
    -ms-word-break: keep-all;
    word-break: keep-all;
    white-space: nowrap;
}
.menu .card-header, .card.menu .card-body {
    padding: 16px;
}
.menu .card-body li {
    font-size: 1.0rem;
}

.menu .commas{
    font-weight: 700;
}

.row-label {
    display: none;
}
@media (max-width: 768px) {
    .menu .card{
        display: flex;
        flex-direction: row;
        border: 0;
    }
    .menu .menu-body {
        border: 1px solid #dfe4e8;
        border-radius: 0;
    }
    .menu .menu-body .card-header{
        border-bottom: none;
    }
    .menu-body h6{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 8px;
        min-width: 130px;
    }
    .menu-body + .menu-body{
        margin-top: 0;
    }
    .fixed-body{
        min-height: 0;
    }

    .restaurant .row .date h4{
        font-size: 1rem;
    }
    #menu-table table thead th {
        font-size: 16px;
        display: none;
    }
    #menu-table table tbody tr {
        display: block;
        margin-bottom: 15px;
        border-radius: 8px;
    }
    #menu-table table tbody tr th.row-label {
        display: inline-block;
        width: 100%;
    }
    #menu-table table tbody tr th.row-label.time{
        display: inline-block;
        width: 100%;
        background: #8e223f;
        color:#fff;
    }
    #menu-table table tbody tr th:not(.row-label) {
        display: none;
    }
    #menu-table table tbody td {
        display: block;
        position: relative;
        min-height: 2rem;
    }
    #menu-table table tbody td.item:before {
        display: none;
    }
    #menu-table table tbody td:before {
        white-space: nowrap;
        top: 10px;
        display: flex;
        justify-content: center;
        padding: 8px 0;
        font-weight: 500;
        background-color : Gainsboro;
    }

}

/*조합원안내*/

.join .menu-item{
    text-align: center;
    padding: 32px 0;
}

.join .menu-item img{
    width: 80px;
    height: 80px;
    background: #F1F4F6;
    border-radius: 16px;
    font-size: 32px;
    padding: 24px;
    display: block;
    margin: 0 auto 8px;
    color: #35383b;
}
.join .pic img{
    margin-bottom: 24px;
    border-radius: 16px;
    width: 100%;
}

.join .card{
    height: 300px;
    min-height: 300px;
}

/*게시판*/
.view .table{
    table-layout: fixed;
}
.board .title{
    border-top: 2px solid #8e223f;
    background: #f1f4f6;
    color: #35383b;
}
.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #35383b;
    background-color: #fff;
    border: 1px solid #dee2e6;
}
.page-item.active .page-link {
    color: #fff;
    background-color: #8e223f;
    border-color: #8e223f;
}
.table.table2 .next{
    border-top: 1px solid #6b727a;
}

.table.table2 .prev{
    border-bottom: 1px solid #6b727a;
}
.table.table2 .next td, .table.table2 .prev td{
    white-space: initial;
}

@media (max-width: 360px) {
    .board .input-group{
        margin-top: 24px;
        width: 100%;
    }
}
/*blog*/
.blog-board .card {
    border: none;
    background-color:#eee;
    /*border:1px solid;*/
}
.blog-board .card img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    background-color:rebeccapurple;
}
.blog-board .card .post-meta a{
    font-size: 14px;
    font-weight: 400;
    color: #6b727a;
}
/*매장운영*/
.store .custom-table tr {
    border-bottom: 1px solid #ccc;
}
.store .custom-table td, .store .custom-table th{
    padding: .50rem;
}

@media only screen and (max-width: 1200px) {
    .store .custom-table{
        width: 100%;
        font-size: 14px;
    }
    /* Force table to not be like tables anymore */
    .store table,
    .store thead,
    .store tbody,
    .store th,
    .store td,
    .store tr {
        display: block;
        font-weight: 400;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .store .custom-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .store .custom-table tr {
        border-bottom: 1px solid #ccc;
    }

    .store .custom-table td, .store .custom-table th{
        padding: .3rem;
    }

    .store .custom-table td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 40%;
        white-space: normal;
        text-align: left;
    }

    .store .custom-table td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 16px;
        width: 60%;
        white-space: nowrap;
        text-align:left;
        font-weight: 500;
    }

    /*
    Label the data
    */
    .store td:nth-of-type(1):before { content: "종류"; }
    .store td:nth-of-type(2):before { content: "매장명"; }
    .store td:nth-of-type(3):before { content: "위치"; }
    .store td:nth-of-type(4):before { content: "서비스"; }
    .store td:nth-of-type(5):before { content: "학기중 운영시간"; }
    .store td:nth-of-type(6):before { content: "방학중 운영시간"; }
    .store td:nth-of-type(7):before { content: "휴점"; }
    .store td:nth-of-type(8):before { content: "연락처"; }
}