/*font size custom use*/
.lowerst-font{font-size:12px;}
.lower-font{font-size:14px;}
.middle-font{font-size:16px;}
.big-font{font-size:18px;}
.header-font{font-size:24px;}
.header-big-font{font-size:42px;}

.bold{font-weight:600 !important;}

table{border-collapse:collapse;margin:0;padding:0;box-sizing:border-box;}
table tr th{padding:12px 3px;}
table tr td{padding:12px 3px;word-break:break-all;}

.table-th-default{font-size:14px;font-weight:400;}
.table-th-right{font-size:14px;font-weight:400;text-align:right;}
.table-th-left{font-size:14px;font-weight:400;text-align:left;}
.table-td-default{font-size:12px;text-align:center;font-weight:400;}
.table-td-right{font-size:12px;text-align:right;font-weight:400;}
.table-td-left{font-size:12px;text-align:left;font-weight:400;}

.type-parent{position:relative;}
.type-child-center{position:absolute;top:50%;left:50%;text-align:center;transform:translate(-50%,-50%);}
.type-inner{min-width:1200px;}

.clears:after{content:"";display:table;clear:both;overflow:hidden;}
.CoopColor{background-color:#ff6a02;}
.fl{float:left;}

/* calender 적용 css */
.dateinput {background:url(../image/btn_calendar.png) 97% 58%  no-repeat;background-color:white;cursor: pointer;}
/* calender 적용 css end*/

/*
 * Search 쪽 사용 예시
 * travel-default-search : 가장 밖의 Wrap
 * travel-default-search-wrap : 검색 영역의 한줄 Wrap
 * travel-default-search-title : 검색 TITLE
 * travel-default-search-input : input / select 영역의 Wrap 기본적으로 Width 100%
 * travel-custom-input : input Wrap의 안 영역을 Custom 하기위한 class default 50%, display : flex.
 * 예시
 * <div class="travel-default-search">
 *      <div class="travel-default-search-wrap">
 *          <div class="travel-default-search-title">
 *              <span class="lower-font">검색</span>
 *          </div>
 *          <div class="travel-default-search-input">
 *              <input type="text" name="" value="" />
 *          </div>
 *          <div class="travel-default-search-title">
 *              <span class="lower-font">검색</span>
 *          </div>
 *          <div class="travel-default-search-input">
 *              <input type="text" name="" value="" />
 *          </div>
 *          <div class="travel-default-search-title">
 *              <span class="lower-font">검색</span>
 *          </div>
 *          <div class="travel-default-search-input">
 *              <input type="text" name="" value="" class="dateinput" />
 *          </div>
 *      </div>
 *      <div class="travel-default-search-wrap">    
 *          <div class="travel-default-search-input travel-custom-input">
 *                  <input type="text" name="" value="" class="dateinput" />
 *                  <div class="travel-default-search-sub">
 *                      <span class="lower-font">~</span>
 *                  </div>
 *                  <input type="text" name="" value="" class="dateinput" />
 *              </div>
 *          </div>
 *      </div>
 * </div>
 *  
*/
.travel-default-search{
    width:100%;
    margin:0 auto;
    background-color:white;
    border-top:2px solid #808080;
    border-bottom:1px solid #808080;
}
.travel-default-search-wrap{
    height:40px;
    display:flex;
    flex-direction:row;
    flex-wrap: nowrap;
    justify-content:flex-start;
    align-items: center;
    align-content: center;
    border-bottom:1px solid #808080;
}
.travel-default-search-wrap:last-child{
    border-bottom:none;
}
.travel-default-search-title{
    width:8%;
    background-color:#eaeaea;
    font-weight:600;
    padding:0 0 0 8px;
    height:100%;
    line-height:40px;
}
.travel-default-search-input{
    width:calc(76% / 3);
    display:flex;
    flex-direction:row;
    flex-wrap: nowrap;
    justify-content:flex-start;
    align-items: center;
    align-content: center;
    padding:5px 10px;
}
.travel-default-search-sub{
    padding:0 8px;
}
.travel-default-search-input > input{
    width:100%;
    border:none;
    outline:none;
    box-sizing:border-box;
    padding:5px;
    border:1px solid #808080;
    background-color:white;
}
.travel-custom-input > input{
    max-width:50%;
    border:none;
    outline:none;
    box-sizing:border-box;
    padding:5px;
    border:1px solid #808080;
    background-color:white;
}
.travel-default-search-input > select{
    width:100%;
    border:none;
    outline:none;
    box-sizing:border-box;
    padding:5px;
    border:1px solid #808080;
    background-color:white;
}
.travel-custom-input > select{
    max-width:50%;
    border:none;
    outline:none;
    box-sizing:border-box;
    padding:5px;
    border:1px solid #808080;
    background-color:white;
}
/*
 *  travel-default-btn-wrap : btn 영역 Wrap
 *  travel-default-btn : default btn Css
 *  btn-left-defualt : 좌측정렬
 *  btn-right-defualt : 우측정렬
 *  btn-ok : background-color blue
 *  btn-cancel : color & border-color red
 *  table-span-underline-btn : table에 쓰이는 under-line btn
 *  예시//
 *  <div class="travel-default-btn-wrap clears">
 *      <div class="travel-default-btn btn-left-defualt btn-ok">
 *          <span class="middle-font">검색</span>
 *      </div>
 *      <div class="travel-default-btn btn-right-defualt">
 *          <span class="middle-font">검색</span>
 *      </div>
 *      <div class="travel-default-btn btn-right-defualt">
 *          <span class="middle-font">초기화</span>
 *      </div>
 *      <div class="travel-default-btn btn-left-defualt btn-cancel">
 *          <span class="middle-font">긴글자의검색칸</span>
 *      </div>
 *  </div>    
*/
.travel-default-btn-wrap{
    padding:10px 0;
    width:100%;
    margin: 0 auto;
}
.travel-default-btn{
    padding:8px 6px;
    text-align:center;
    min-width:100px;
    border:1px solid #808080;
    background-color:white;
    font-weight:600;
    cursor:pointer;
}
.btn-left-defualt{
    float:left;
    margin-right:5px;
}
.btn-right-defualt{
    float:right;
    margin-left:5px;
}
.btn-ok{
    background-color:#628DB6;
    color:white;
}
.btn-cancel{
    border-color:#ff6a00;
    color:#ff6a00;
}
.table-span-underline-btn{
    text-decoration:underline;
    cursor:pointer;
}
/*
 *  travel-default-list-wrap : list 를 보여줄 가장  상위 Wrap
 *  travel-default-list-title : list title
 *  travel-default-list-table-wrap : table을 감싸는 div wrap 최소크기 min 500px
 *  travel-default-table : default table / 상단 thead 부분 th 고정.
 *  travel-default-paging-wrap : 페이징 출력 영역
 *  예시//
 *  <div class="travel-default-list-wrap">
 *      <div class="travel-default-list-title">
 *          <span class="lower-font">유저 목록</span>
 *      </div>
 *      <div class="travel-default-list-table-wrap">
 *          <table class="travel-default-table">
 *              <colgroup>
 *                  <col style="width:15%;"/>
 *                  <col style="width:15%;"/>
 *                  <col style="width:10%;"/>
 *                  <col style="width:10%;"/>
 *                  <col style="width:20%;"/>
 *                  <col style="width:20%;"/>
 *                  <col style="width:10%;"/>
 *              </colgroup>
 *              <thead>
 *                  <tr>
 *                      <th class="lower-font">아이디</th>
 *                      <th class="lower-font">닉네임</th>
 *                      <th class="lower-font">분류</th>
 *                      <th class="lower-font">가입경로</th>
 *                      <th class="lower-font">전화번호</th>
 *                      <th class="lower-font">가입일</th>
 *                      <th class="lower-font">상세보기</th>
 *                  </tr>
 *              </thead>
 *              <tbody>
 *                  <tr>
 *                      <td class="lower-font">2</td>
 *                      <td class="lower-font">2</td>
 *                      <td class="lower-font">2</td>
 *                      <td class="lower-font">2</td>
 *                      <td class="lower-font">2</td>
 *                      <td class="lower-font">2</td>
 *                      <td class="lower-font">
 *                          <span class="table-span-underline-btn">상세보기</span>
 *                      </td>
 *                  </tr>
 *              </tbody>
 *          </table>
 *      </div>
 *      <div class="travel-default-paging-wrap">
 *
 *      </div>
 *  </div>
 */
.travel-default-list-wrap{
    padding-top:8px;
    width:100%;
    margin: 0 auto
}
.travel-default-list-title{
    padding-bottom:8px;
    padding-left:10px;
    font-weight:600;
}
.travel-default-list-table-wrap{
    min-height:500px;
    max-height:700px;
    width:100%;
    margin:0 auto;
    overflow:auto;
    position:relative;
}
.travel-default-table{
    table-layout:fixed;
    border-collapse:collapse;
    margin:0;
    padding:0;
    width:100%;
    border-bottom:1px solid #585858;
    position:relative;
    border-spacing:0;
}
.travel-default-table > thead > tr > th{
    border-top:2px solid #585858;
    padding:10px 2px;
    text-align:center;
    color:white;
    background-color:#628DB6;
    border-bottom:1px solid #808080;
    position:sticky;
    top:0;
}
.travel-default-table > tbody > tr > td{
    padding:8px 2px;
    text-align:center;
}
.travel-default-table > tbody > tr{
    border-bottom:1px solid #eaeaea;
}
/*
 *  travel-default-paging-wrap : pageing 가장 바깥 영역
 *  num_prev : < > paging block css
 *  num_box : paging btn
 *  txt_point : 현재 page css  
 */
.travel-default-paging-wrap{
    width:100%;
    padding:10px 0;
    text-align:center;
    font-size:18px;
}
.num_prev{
    font-size:24px;
    padding:5px;
    margin:0 5px;
    vertical-align:middle;
}
.num_box{
    display:inline-block;
    color:black;
    padding:0 5px;
    margin:0 5px;
    border:1px solid #808080;
    text-decoration:none;
}
.txt_point{
    font-weight:600;
    color:#628DB6;
}
/*
    상세페이지 block
    travel-default-detail-wrap : 디테일 페이지 상위 wrap
    travel-default-detail-title : 디테일 정보 title
    travel-default-detail-table : table 형태 설정
    예시//
    <div class="travel-default-detail-wrap">
        <div class="travel-default-detail-title">
            <span class="middle-font">1234</span>
        </div>
        <table class="travel-default-detail-table">
            <colgroup>
                <col style="width:100px;"/>
                <col />
                <col style="width:100px;"/>
                <col />
                <col style="width:100px;"/>
                <col />
            </colgroup>
            <tr>
                <th class="lower-font">1</th>
                <td class="lower-font">1</td>
                <th class="lower-font">1</th>
                <td class="lower-font">1</td>
                <th class="lower-font">1</th>
                <td class="lower-font">1</td>
            </tr>
        </table>
    </div>   
 */
.travel-default-detail-wrap{
    width:100%;
    padding-bottom:15px;
}
.travel-default-detail-title{
    padding-bottom:5px;
    padding-left:5px;
    font-weight:600;
}
.travel-default-detail-table{
    width:100%;
    border-collapse:collapse;
    border-spacing:0;
    table-layout:fixed;
}
.travel-default-detail-table tr:first-child th{
    border-top:2px solid #83acd5;
}
.travel-default-detail-table tr:last-child th{
    border-bottom:2px solid #83acd5;
}
.travel-default-detail-table tr:first-child td{
    border-top:2px solid #83acd5;
}
.travel-default-detail-table tr:last-child td{
    border-bottom:2px solid #83acd5;
}
.travel-default-detail-table tr th{
    padding:8px 5px;
    text-align:center;
    background-color:#628DB6;
    color:white;
    border-top:1px solid #83acd5;
    border-bottom:1px solid #83acd5;
    font-weight:400;
    min-height:40px;
}
.travel-default-detail-table tr td{
    padding:8px;
    text-align:left;
    border-top:1px solid #83acd5;
    border-bottom:1px solid #83acd5;
    min-height:40px;
}
.travel-default-detail-table tr td:last-child{
    border-right:1px solid #f7f7f7;
}