:root{
    --comic-blue : #5BB6E2;
    --width500: 505px;
    --width300: 300px;
    --height60 : 60px;
    --height83 : 83px;
}
pre{
    /* overflow-x:hidden; */
    overflow-x: auto;
    word-break: keep-all;
    white-space: pre-wrap;
    font-family: 'Lato', 'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif;
    font-size:1em;
}
pre a{
    color:red;
}
table, th, td {
  border: 1px solid rgb(204,204,204);
  border-collapse:collapse;
  text-align:center;
  padding:10px;
}
table {
    width: 80%;
}
.black{color:black;} 
:root, [data-bs-theme=light] {
    --bs-link-color-rgb: 13,110,253;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #0a58ca;
    --bs-link-hover-color-rgb: 10,88,202;
    --bs-code-color: #d63384;
    --bs-highlight-bg: #fff3cd;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    /* --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-form-invalid-border-color: #dc3545; */
    --bs-border-radius-pill: 50rem; 
    --bs-body-font-weight: 400;
    --bs-link-color: #646873;
    --bs-border-radius: 0.375rem;
    --bs-body-line-height: 2.5;
}
body {
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
}
.sub_boundary{
    max-width:1300px;
}
.nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--bs-link-color);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-nav-link-disabled-color: var(--bs-secondary-color);
    display: flex;
    /* justify-content: space-evenly; */
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.nav-pills {
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: #42baf3;
    border-bottom: 1px solid #e4e8e9;
    padding-bottom:13px;
}
.nav-link {
    display: block;
    /* padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x); */
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--bs-nav-link-color);
    text-decoration: none;
    background: 0 0;
    border: 0;
    width: 100%;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    border-radius: var(--bs-nav-pills-border-radius);
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    width: 100%;
    color: var(--bs-nav-pills-link-active-color);
    background-color: var(--comicwblue-color);
}
.nav-pills .nav-link.mongu.active, .nav-pills .show>.nav-link {
    
    background-color: var(--mongu-color);
}
.nav-pills .nav-link.cos.active, .nav-pills .show>.nav-link {
    background-color: var(--cos-color);
}
.nav-link a   {
    display:block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
}
.nav-pills .nav-link.active>a, .nav-pills .show>.nav-link {
    color:#fff;
    display:block;
}
.nav-pills .nav-link.mongu.active>a, .nav-pills .show>.nav-link {
    color: var(--mongu-font-color)!important;
}
.nav-link.disabled, .nav-link:disabled {
    color: var(--bs-nav-link-disabled-color);
    pointer-events: none;
    cursor: default;
}
.breadcrumb {
    --bs-breadcrumb-padding-x: 0;
    --bs-breadcrumb-padding-y: 0;
    --bs-breadcrumb-margin-bottom: 1rem;
    --bs-breadcrumb-bg: ;
    --bs-breadcrumb-border-radius: ;
    --bs-breadcrumb-divider-color: var(--bs-secondary-color);
    --bs-breadcrumb-item-padding-x: 0.5rem;
    --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
    margin-bottom: var(--bs-breadcrumb-margin-bottom);
    font-size: var(--bs-breadcrumb-font-size);
    list-style: none;
    background-color: var(--bs-breadcrumb-bg);
    border-radius: var(--bs-breadcrumb-border-radius);
}
.tab-content{
    margin:100px 0;
}
.tab-content>.tab-pane {
    display: none;
}
.tab-content>.active {
    display: block;
}
.nav-item{
    width: 16.6%;
}
.fade {
    transition: opacity .15s linear;
}
#pills-tabContent  {
    max-width: 100%;
    /* width:50px; */
}
.cat_img{
    width: 50px;
}
#context h1{
    padding: 16px 0;
    border-top: 1px solid #eef1f5;
    border-bottom: 1px solid #eef1f5;
    text-align: center;
    font-size: 24px;
    color: #646873;
    font-weight:400;
    margin-top: 20px;
}
#wrap{
    margin-top:100px;
    margin-bottom:100px;
    line-height:200%;
}
.h1-title{
    font-size: 14pt;
    font-weight: 700;
    display:inline-block;
}
.btn{
    position:relative;
    background-size: contain;
    display: block;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: 0px 0px;
    border: none;
    cursor: pointer;
    vertical-align: middle;
    /* width: 100%; */
    margin: 10px 0;
}
.fa-solid.fa-caret-right{
    font-size: 23px;
    position: absolute;
    top: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
}
.apply-booth-btn{
    background-image: url("../img/apply_booth_btn.png");
    width: var(--width500);
    height: var(--height83);
}
.dprule-btn{
    background-image: url("../img/dprule_btn.png");
    width: var(--width500);
    height: var(--height83);
}
.pdsgood-btn{
    background-image: url("../img/pdsgood_btn.png");
    width: var(--width500);
    height: var(--height83);
}
.mypage-btn{
    background-image: url("../img/mypage_btn.png");
    width: var(--width500);
    height: var(--height83);
}
.cmchoice-btn{
    background-image: url("../img/cmchoice_btn.png");
    width: var(--width500);
    height: var(--height83);
    /* width: 505px; height: 83px; */
    /* background: url('../img/fairbtn-sprite.png') -10px -10px; */
}
.djbooth-btn{
    background-image: url("../img/djbooth_btn.png");
    /* background: url('../img/fairbtn-sprite.png') -10px -113px; */
    width: var(--width500);
    height: var(--height83);
}
.stage-btn{
    background-image: url("../img/stage_btn.png");
    width: var(--width500);
    height: var(--height83);
}
.sup-btn{
    background-image: url("../img/sup_btn.png");
    width: var(--width500);
    height: var(--height83);
}
.traffic-btn{
    background-image: url("../img/traffic_btn.png");
    width: var(--width300);
    height: var(--height60);
}
.parking-btn{
    background-image: url("../img/parking_btn.png");
    width: var(--width300);
    height: var(--height60);
}
.guide-btn{
    background-image: url("../img/guide_btn.png");
    width: var(--width300);
    height: var(--height60);
}
.comfort-btn{
    background-image: url("../img/comfort_btn.png");
    width: var(--width300);
    height: var(--height60);
}

.margin5{
    margin: 5px 0;
}
div .h1{
    background-color: var(--comicwblue-color);
    position:relative;
    padding: 0.8rem;
    color: rgba(255, 255, 255, 0.95);
    vertical-align: middle;
    width: 350px;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.9375rem 1rem;
    font-size: 18px;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-right: 0.625rem !important;
    font-weight:bold;
    display: flex;
    align-items: center;
    border-radius: var(--comicwbook-border-radious);

}

div .h1:hover{
    background-color: #1095d4;
}
div .h1.mongu{
    background-color: var(--mongu-color);
    color: var(--mongu-font-color);
}
div .h1.mongu:hover{
    background-color: var(--mongu-hover-color);
}
div .h1.cos{
    background-color: var(--cos-color);
}
div .h1.cos:hover{
    background-color: var(--cos-hover-color);
}

.link-btn{
    background:var(--comic-blue);
    position:relative;
    padding: 0.8rem;
    color: rgba(255, 255, 255, 0.95);
    vertical-align: middle;
    /* display: inline-block; */
    user-select: none;
    border: 1px solid transparent;
    padding: 0.9375rem 1.875rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    border-radius: 10rem !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-right: 0.625rem !important;
    font-weight:bold;
}
div p{
    word-break: keep-all;
}
.blockquote{
    margin-left:8px;
}
/* 문구전,코스 버튼 */
.click_btn{
        background: rgb(255 74 151);
        display:inline-block;
        font-size: 16px;
        border: none;
        color: #fff!important;
        font-weight:bold;
        margin-top: 10px;
        border-radius: 5px;
        position:relative;
        padding: 0.8rem;
        color: rgba(255, 255, 255, 0.95);
        vertical-align: middle;
        user-select: none;
        border: 1px solid transparent;
        padding: 0.9375rem 1.875rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: 0.25rem;
        /* border-radius: 10rem !important; */
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        margin-right: 0.625rem !important;
}
#booth_num{
    width:50%;
}
.eventplan{
    margin-top:40px;
}
.link-data{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%;
}
#booth-img-div img{
width: 100%;
}
img{max-width:75%;}
@media screen and (max-width:800px) {
    .nav {
    justify-content: flex-start;
    }
    .nav-item{
    width:50%;
    }
    .nav-item button{
        width: 100%;
    }
    img{width:100%;max-width:100%;}
    table{width:100%;}
    #booth_num{
    width:90%;
    }
    .btn{
        width: 100%;
        /* background-position: 0px center; */
    }
    .link-btn{
        width: 100%;
        display:block;
        margin:10px 0;
    }
    div .h1{
        font-size: 16px;
        width: 100%!important;
        text-align: left;
    }
    div .h1 .mobile-btn-div span{
        display: block;
    }
    .fa-solid.fa-caret-right{
        /* display: none; */
    }
    /* sprite img 따로적용 */
    /* .cmchoice-btn{
        background-size: 100% auto;
        background-position-x: 0;
        background-position-y: 0;

    }
    .djbooth-btn{
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: 0;
        background-position-y: calc(-83px * 0.8);
    } */
    
}