/**********************************************************************************************************************************************************************************************************

*/


/* 테이블 */
.gu_tbl_wrap {max-width:1020px;margin:0 auto;text-align:center;}
.gu_tbl_wrap .gu_tbl_inner {padding-bottom:40px;}
.gu_tbl_wrap .gu_tbl_inner table {width:100%;}
.gu_tbl_wrap .gu_tbl_inner table tr {border-bottom: 1px solid #e5e5e5;}
.gu_tbl_wrap .gu_tbl_inner table tr.no_post {border-bottom: 0;}
.gu_tbl_wrap .gu_tbl_inner table thead tr {border-top: 1px solid #888;}
.gu_tbl_wrap .gu_tbl_inner table thead tr th {font-size: 14px;padding: 15px; line-height: 20px;}
.gu_tbl_wrap .gu_tbl_inner table thead tr th.text_left {text-align: left;}
.gu_tbl_wrap .gu_tbl_inner table tbody tr:hover {background-color: #fbfbfb; transition: all 0.2s;}
.gu_tbl_wrap .gu_tbl_inner table tbody tr td {font-size: 14px; padding: 15px 10px; line-height: 26px;}
.gu_tbl_wrap .gu_tbl_inner table tbody tr td a {display: inline-block;box-sizing: border-box;width:100%;}
.gu_tbl_wrap .gu_tbl_inner table tbody tr.no_post:hover {background-color: #fff;}
.gu_tbl_wrap .gu_tbl_inner table tbody tr.no_post td {color:#888; padding: 52px 0;}
.gu_tbl_wrap .gu_tbl_inner table tbody tr td.tbl_tit {position: relative; padding-left: 30px; white-space: nowrap; text-align: left; font-size: 15px;}
.gu_tbl_wrap .gu_tbl_inner table tbody tr td.tbl_tit > .new {position: absolute; top: 50%; margin-top: -16px; margin-left: 10px;font-size: 10px; color:#f22c2d;}
.gu_tbl_wrap .gu_tbl_inner table tbody tr td.tbl_tit a span { padding-top: 8px;}
.gu_tbl_wrap .gu_tbl_inner table tbody tr td.tbl_tit a span:before {content: ''; position: absolute; width: 100%; height: 1px; background: #666; bottom: 3px; left: 0; visibility: hidden;opacity: 0;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;}
.gu_tbl_wrap .gu_tbl_inner table tbody tr td.tbl_tit a:hover span:before {visibility: visible;opacity:1}
.gu_tbl_wrap .gu_tbl_inner table tbody tr td.tbl_loc {color:#666;}
.gu_tbl_wrap .gu_tbl_inner table tbody tr td.tbl_date {color:#888;}
.gu_tbl_wrap .gu_tbl_inner table tbody tr td.tbl_tit a span {position: relative; display: inline-block;max-width:560px;}

.gu_tbl_wrap .gu_paging {margin-bottom: 160px; text-align: center;font-family: 'GillSans', 'SDGothic', sans-serif; font-weight: 400;}
.gu_tbl_wrap .gu_paging a img {vertical-align: middle;}
.gu_tbl_wrap .gu_paging span {margin: 0 50px;}
.gu_tbl_wrap .gu_paging span a {display: inline-block;font-size: 16px;padding:2px;margin:0 15px; color: #888;}
.gu_tbl_wrap .gu_paging .gu_en_lineBtn.on {color:#222;}
.gu_tbl_wrap .gu_paging .gu_en_lineBtn.on:after {background-color:#222;}
.gu_tbl_wrap .gu_paging .gu_en_lineBtn:hover:after {background-color:#222;}
.gu_tbl_wrap .gu_paging span a.on {color:#222;border-bottom: 2px solid #2d2d2d; font-weight: 500;}
.gu_tbl_wrap .gu_tbl_inner table tbody tr td.tbl_state { padding: 10px;}
.gu_tbl_wrap .gu_tbl_inner table tbody tr td.tbl_state > span {display: inline-block; width: 60px; line-height: 28px; color: #fff; font-size: 12px;}
.gu_tbl_wrap .gu_tbl_inner table tbody tr td.tbl_state > span.btn_state_ok {background: #2d2d2d;color:#fff;}
.gu_tbl_wrap .gu_tbl_inner table tbody tr td.tbl_state > span.btn_state_yet {background: #eee;color:#666;}

/* ex)
<div id="#TABLE">
    <div class="gu_tbl_wrap">
        <div class="gu_tbl_inner kr_g_400">
            <table>...</table>
        </div>
        <div class="gu_paging en_gill_500">...</div>
    </div>
</div>
*/


/* ... 말줄임표 max-width 별도 지정 */
.ellipsis {display: inline-block; max-width:560px;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden; white-space: nowrap; word-wrap: normal !important; text-align: left;}

/* ex)
#TABLE .gu_tbl_wrap .gu_tbl_inner table .ellipsis {max-width:470px;}
*/



/*  sample_detail.jsp  */
.gu_detail_page {max-width: 1020px !important; text-align: center;}
.gu_detail_page .line {width: 100%;height:1px; background:#e5e5e5;}
.gu_detail_page .view_tit_wrap {padding: 120px 20px 0; margin-bottom: 60px;}
.gu_detail_page .view_tit_wrap .view_loc {font-size: 18px; color: #8c714e; }
.gu_detail_page .view_tit_wrap .view_tit {font-size: 36px; line-height: 52px;color: #222; margin: 30px 0 40px;}
.gu_detail_page .view_tit_wrap .view_date {font-size: 16px; color: #888; line-height: 26px;}
.gu_detail_page .view_content {text-align: left; padding: 40px; font-size: 15px; line-height: 1.6;color:#444;}


.gu_view_btn {margin-top: 40px; margin-bottom: 180px;}
.gu_view_btn .gu_btn_white {display: block; width: 120px; height: 46px; font-size: 14px; text-align: center; line-height: 46px;margin:0 auto;}
.gu_view_btn .gu_btn_white:hover {background:#eee;transition: all 0.2s;}




/* sample_detail.jsp 참고 : Related Contents 영역 / 상황에 따라 .box 안 구조와 스타일은 재조정 필요 */
.gu_related_contents{background-color: #f6f6f6}
.gu_related_contents .related_contents_inner{padding: 120px 50px 180px;text-align: center;}
.gu_related_contents .related_contents_tit{font-size:48px;font-family:'Garamond', 'SDGothic', sans-serif; font-weight: 400;}
.gu_related_contents .contents_list_area{margin-top: 60px}
.gu_related_contents .contents_list_area .contents_box{font-size: 0;text-align: center;margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
.gu_related_contents .contents_list_area .contents_box .box{display: inline-block;width: 18%;padding-left: 2.5%;vertical-align: top;text-align: left;}
.gu_related_contents .contents_list_area .contents_box .box:first-child{padding-left: 0}
.gu_related_contents .contents_list_area .contents_box .box a{display: block;position: relative}
.gu_related_contents .contents_list_area .contents_box .box a .img_area {position: relative;overflow: hidden;border: 1px solid #e5e5e5;padding: 0 !important;z-index: 1 !important;}
.gu_related_contents .contents_list_area .contents_box .box a .img_area:after {content:''; position: absolute; z-index: 2;background:rgba(31,31,31,0.2);top:0;left:0;width:100%;height:100%;opacity:0;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
.gu_related_contents .contents_list_area .contents_box .box a .img_area .img_box {width: 100%; position: relative;padding: 0 !important;z-index: 1 !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    transition: all .6s;
    -moz-transition: all.6s;
    -ms-transition: all .6s;
    -o-transition: all .6s;
    -webkit-transition: all .6s;
}
.gu_related_contents .contents_list_area .contents_box .box a:hover .img_area:after {opacity:1;}
.gu_related_contents .contents_list_area .contents_box .box a:hover .img_area .img_box {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.gu_related_contents .contents_list_area .contents_box .box a .img_area .img_box img {width: 100%;}
.gu_related_contents .contents_list_area .contents_box .box ul{width: 100%;padding: 30px 20px 0 10px;background:#f6f6f6;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
.gu_related_contents .contents_list_area .contents_box .box ul .type{ font-size: 14px;color: #8a714e;margin-bottom: 15px;}
.gu_related_contents .contents_list_area .contents_box .box ul .title{font-size: 18px;margin-bottom: 20px;line-height: 28px;word-break: keep-all;}
.gu_related_contents .contents_list_area .contents_box .box ul .info{font-size: 14px;color: #888;line-height: 24px;}
.gu_related_contents .contents_list_area .contents_box .box ul .desc{font-size: 14px;color: #222;line-height: 24px;}
.gu_related_contents .contents_list_area .contents_box .box ul .magazine_issue{font-size: 14px;color: #888;line-height: 24px;margin-top: 20px;}



/* sample_detail.jsp 참고 : [<목록보기]와 [<],[>] 사각형버전 */
.gu_btn_bottom{position: relative;text-align: right;font-size: 0;overflow: hidden;padding-bottom: 120px;max-width: 1020px;margin: 0 auto}
.gu_btn_bottom a{display: inline-block;}
.gu_btn_bottom .btn_back_list{float: left;font-size: 14px;display: block;width: 152px;height: 48px;padding-top: 15px;text-align: center;position: relative;padding-left: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
.gu_btn_bottom .btn_back_list:before{content: '';position: absolute;left: 50%;top: 50%;background: url("../../img/magazine/ico_arrow_left_gray.png") no-repeat 0 0;width: 5px;height: 9px;margin-top: -4px;margin-left: -35px}
.gu_btn_bottom a.btn_prev{width: 48px;height: 48px;border: 1px solid #ccc;background: url("../../img/magazine/ico_arrow_left_black.png") no-repeat 48%}
.gu_btn_bottom a.btn_next{width: 48px;height: 48px;border: 1px solid #ccc;background: url("../../img/magazine/ico_arrow_right_black.png") no-repeat 48%;margin-left: 8px}
.gu_btn_bottom a:hover{background-color: #eee}



/* 팝업 */
.gu_popup {position: fixed;left: 0;right: 0;top: 0;bottom: 0;overflow-y: auto;display: none;z-index: 9999;}
.gu_popup.show {display: block;}
.gu_popup .dim{position: fixed;width: 100%;height: 100%;left: 0;top: 0;background: rgba(0,0,0,.8);}
.gu_popup .pop_contents {position:relative; margin:20px auto; background-color:#fff;}
.gu_popup .pop_inner{ width: 100%;position: relative;left: 0;right: 0;top: 50%;}
.gu_popup .pop_inner.active{opacity: 1}
.gu_popup .pop_inner .popup_click_bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.gu_popup .pop_inner .pop_detail_box {position: relative}
.gu_popup .pop_inner .btn_close_pop{position: absolute;right: 30px;top: 30px;width: 13px;height: 13px;z-index: 2}



/* 250716 VIP 선정 상세 안내 퍼블리싱 추가 */
.gu_tbl_wrap .gu_tbl_inner table thead tr th.tbl_tit_divide {
    padding: 24px 46px;
    background-image: linear-gradient(to left bottom, transparent calc(50% - 1px), #E5E5E5, transparent calc(50% + 1px));
    background-size: 120% 120%;
    background-position: center;
}
.gu_tbl_wrap .gu_tbl_inner table thead tr th.tbl_tit_divide .tbl_l,
.gu_tbl_wrap .gu_tbl_inner table thead tr th.tbl_tit_divide .tbl_r { display: block; padding: 4px 0; }
.gu_tbl_wrap .gu_tbl_inner table thead tr th.tbl_tit_divide .tbl_l { text-align: left; }
.gu_tbl_wrap .gu_tbl_inner table thead tr th.tbl_tit_divide .tbl_r { text-align: right; }

/* 250724 VIP 선정 상세 안내 퍼블리싱 추가 */
.gu_tbl_wrap .gu_tbl_inner table .bg_beige { background-color: #FCF9F2; }




/**********************************************************************************************************************************************************************************************************/