@charset "utf-8";

.df_nodata_box{padding: 110px;  border-radius: 10px; text-align: center; font-size: 1.2rem; background: #fafafa; color: #777;}

#main_index .article_tit{letter-spacing: -1px; font-size: 2.0rem}
#main_index .more_tit_box{display: flex; justify-content: space-between; align-items: center}
#main_index .more_tit_box .tit{letter-spacing: -1px; font-size: 2.0rem}
#main_index .more_tit_box .more_btn{font-size: 1.3rem; color: #888}
#main_index .more_tit_box .more_btn .icon{vertical-align: top; margin: 6px 4px 0 0;}
#main_index .more_tit_box ~ .tab_btn_box, #main_index .article_tit  ~ .tab_btn_box{margin-top: 18px}

#main_index .grid_wrapper{display: grid}

#main_index .comment_date{font-size: 1.2rem; color: var(--df_color_background) !important}

#main_index .full{grid-column: 1/3}
#main_index .full .grid{position: relative}
#main_index .full .grid::before{content: ''; position: absolute; left: 50%; bottom: 0; width: 1px; height: 100%; background: #ededed}
#main_index .full .grid::after{content: ''; display: block; clear: both}
#main_index .full .grid > *{float: left; width: calc(100% / 2); margin-top: unset}
#main_index .full .grid > *:nth-of-type(n + 3){margin-top: 12px}
#main_index .full .grid > *:nth-of-type(odd){padding-right: 16px}
#main_index .full .grid > *:nth-of-type(even){padding-left: 16px}

#main_index .this_no_data{padding: 90px 0; text-align: center}
#main_index .this_no_data .tit{font-size: 1.4rem; color: #888}
#main_index .this_no_data .this_btn{margin-top: 16px; padding: 6px 20px; border-radius: 3px; font-size: 1.2rem; background: var(--df_color_background); color: var(--df_color_font)}

@media screen and (max-width: calc(1200px + 32px)){
#main_index{padding: 0 16px 90px 16px}
}

@media screen and (max-width: 750px){
#main_index{padding: 0 0 90px 0}
}

/*
@media screen and (max-width: 1000px){
.tab_btn_box{width: 100%; overflow: auto; font-size: 1.4rem}
.tab_btn_box::-webkit-scrollbar{height: 0; background: transparent}

.tab_btn_box .tab_scroll{display: flex; gap: 0 5px; width: 100%;}

.tab_btn_box .tab_btn{padding: 10px 25px; border: 1px solid #ededed; white-space: nowrap;}
.tab_btn_box .tab_btn.on{background: var(--df_color_background); color: var(--df_color_font)}
}
*/

/*---------- 메인 컨텐츠 박스 ----------*/

.full_banner{width: calc((1200px - 300px) - 32px);}
.full_banner a{display: block; width: 100%; height: 100%}
.full_banner img{width: 100%; height: 100%; object-fit: cover}

@media screen and (max-width: calc(1200px + 32px)){
.full_banner{width: 100%; height: auto !important}
}

@media screen and (max-width: 600px){
.wrap_inner_box.banner_container .btn_box .this_btn{padding: 6px 14px;}
.wrap_inner_box.banner_container .btn_box .this_btn img{width: 5px}
}

/*헤드라인*/
#main_headline{grid-column: 1 / 3;  height: 410px}

@media screen and (max-width: calc(1200px + 32px)){
#main_headline{width: calc(100% + 32px); margin-left: -16px; border-radius: unset}
}

@media screen and (max-width: 750px){
#main_headline{width: 100%; margin-left: unset}
#main_headline ~ *{width: calc(100% - 32px); margin: 0 auto}
}

/*메인 최상위 탑 1번 and 메인 최상위 탑 2번*/

.com_main_top_list .tab_wrap{margin-top: 18px}
.com_main_top_list .tab_wrap .tab_list_box > div .num_tag{transition: all 0.3s}
.com_main_top_list .tab_list_box > div + div{margin-top: 12px}
.com_main_top_list .tab_list_box:not(.this_no_data) a{display: table; width: 100%}

.com_main_top_list .tab_btn_box{position: relative; font-size: 1.4rem}
.com_main_top_list .tab_btn_box::before{content: ''; position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 1px; background: var(--df_color_background)}
.com_main_top_list .tab_btn_box::after{content: ''; display: block; clear: both}
.com_main_top_list .tab_btn_box .tab_btn{position: relative; z-index: 1; float: left; width: calc(100% / 4); padding: 8px 0; text-align: center; color: #999 }
.com_main_top_list .tab_btn_box .tab_btn.on{border: 1px solid var(--df_color_background); border-bottom: unset; border-radius: 10px 10px 0 0; font-weight: 600; background: #fff; color: #333}

.com_main_top_list .text_date, .com_main_top_list .day_date{display: table-cell; vertical-align: middle}
.com_main_top_list .text_date{width: calc(100% - 60px)}
.com_main_top_list .text_date span{vertical-align: middle}
.com_main_top_list .text_date .num_tag{width: 18px; height: 18px; border-radius: 5px; text-align: center; line-height: 18px; background: #b7b7b7; color: #fff}
.com_main_top_list .text_date .text{max-width: 265px; margin-left: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 1.4rem; color: #333}
.com_main_top_list .text_date .comment_date{margin-left: 3px}
.com_main_top_list .day_date{width: 60px; text-align: right; font-size: 1.2rem; color: #999}

.com_main_top_list .tab_list_box > div.on .num_tag{background: var(--df_color_background)} 



/*메인 최상위 탑 1번*/
#main_top_1{}

/*메인 최상위 탑 2번*/
#main_top_2{}

@media screen and (min-width: 1000px){
.com_main_top_list .tab_wrap .tab_list_box > div:hover .num_tag{transition: unset; background: var(--df_color_background); color: #fff}
}

@media screen and (max-width: 750px){
.com_main_top_list{grid-column: 1 / 3;}
}

/*-----*/


/*메인 갤러리*/
#main_gallery{grid-column: 1 / 3}
#main_gallery .grid_wrapper{grid-template-columns: repeat(4, 1fr); grid-gap: 32px 16px; margin-top: 32px}
#main_gallery .grid_wrapper a{display: block}
#main_gallery .img_box{position: relative; aspect-ratio: 6 / 4; overflow: hidden; border-radius: 15px; background: #fafafa}
#main_gallery .img_box img{width: 100%}
#main_gallery .img_box .comment_tag{position: absolute; right: 14px; top: 14px; padding: 1px 10px; border-radius: 32px; background: rgb(0 0 0 / 50%); color: #fff}
#main_gallery .txt{-webkit-line-clamp: 2; display:-webkit-box; -webkit-box-orient: vertical; height: 34px; margin-top: 16px; overflow: hidden; text-overflow: ellipsis; line-height: 17px; font-weight: 500; font-size: 1.5rem}
#main_gallery .nickname{margin-top: 14px; font-weight: 500; font-size: 1.3rem; color: #999}
#main_gallery .day_date{text-align: right; font-size: 1.2rem; color: #999}

@media screen and (max-width: 750px){
#main_gallery .grid_wrapper{grid-template-columns: repeat(2, 1fr);}
}


/*메인 중간 기본 리스트*/
.com_main_mid_list .list_wrapper{margin-top: 32px}
.com_main_mid_list .list_wrapper > li + li{margin-top: 8px}
.com_main_mid_list .list_wrapper a{width: 100%}
.com_main_mid_list .list_wrapper a::after{content: ''; display: block; clear: both}
.com_main_mid_list .text_date{float: left; width: calc(100% - 40px)}
.com_main_mid_list .text_date span{vertical-align: middle}
.com_main_mid_list .text_date .txt{max-width: 85%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 1.4rem; color: #333}
.com_main_mid_list .text_date .comment_date{margin-left: 3px}
.com_main_mid_list .day_date{float: right; width: 40px; font-size: 1.2rem; color: #666}

@media screen and (max-width: 750px){
.com_main_mid_list{grid-column: 1/3}
}

/*메인 중간 복합 리스트*/
.com_mid_compound{}
.com_mid_compound .list{margin-top: 32px; font-size: 1.4rem}

.compound_mid_list{}
.compound_mid_list .list{}
.compound_mid_list .list > li + li{margin-top: 10px; padding-top: 10px; border-top: 1px solid #ededed}
/*
.compound_mid_list .list a{display: block; width: fit-content; margin: 0 auto}
*/
.compound_mid_list .list > li:not(.this_no_data) a{display: block}
.compound_mid_list .list a::after{content: ''; display: block; clear: both}
.compound_mid_list .list a > *{float: left}
.compound_mid_list .subject{width: calc(100% - 70px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.compound_mid_list .datetime{width: 70px; text-align: right; font-size: 1.2rem; color: #777}

.compound_mid_gallery{}
.compound_mid_gallery .list{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 24px 16px}
.compound_mid_gallery .list > *{overflow: hidden; border: 1px solid #ededed; border-radius: 10px}
.compound_mid_gallery .list a{display: block}
.compound_mid_gallery .list img{width: 100%; height: 100%; object-fit: cover}
.compound_mid_gallery .img_box{width: 100%; height: 130px}
.compound_mid_gallery .caption{height: 68px; padding: 14px 12px}
.compound_mid_gallery .caption > *{-webkit-line-clamp: 2; display:-webkit-box; -webkit-box-orient: vertical;  overflow: hidden; text-overflow: ellipsis;}

.compound_mid_webjin{}
.compound_mid_webjin .list{}
.compound_mid_webjin .first_thume{position: relative; width: 100%; height: 250px; overflow: hidden; border-radius: 16px;}
.compound_mid_webjin .first_thume a{display: block}
.compound_mid_webjin .first_thume img{width: 100%; height: 100%; object-fit: cover}
.compound_mid_webjin .first_thume .caption{position: absolute; left: 0; bottom: 0; width: 100%; padding: 30px 10px; font-size: 1.6rem; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); color: #fff}
.compound_mid_webjin .in_grid{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 16px; margin-top: 16px}
.compound_mid_webjin .in_grid a{display: block}
.compound_mid_webjin .in_grid img{width: 100%; height: 100%; object-fit: cover}
.compound_mid_webjin .in_grid > *{overflow: hidden;}
.compound_mid_webjin .in_grid .img_box{width: 100%; height: 100px; overflow: hidden; border-radius: 10px;}
.compound_mid_webjin .in_grid .subject{-webkit-line-clamp: 2; display:-webkit-box; -webkit-box-orient: vertical;  overflow: hidden; text-overflow: ellipsis;}

@media screen and (min-width: 750px){
.compound_mid_webjin.full_grid .list::after{content: ''; display: block; clear: both}
.compound_mid_webjin.full_grid .list > *{float: left}                                
.compound_mid_webjin.full_grid .first_thume{width: 320px;}
.compound_mid_webjin.full_grid .first_thume, .compound_mid_webjin.full_grid .in_grid{height: 300px;}
.compound_mid_webjin.full_grid .in_grid{grid-template-columns: repeat(3, 1fr); width: calc((100% - 320px) - 16px); margin-top: unset; margin-left: 16px}
.compound_mid_webjin.full_grid > *{}
}

@media screen and (max-width: 750px){
.com_mid_compound{grid-column: 1 / 3}

.compound_mid_webjin .first_thume,
.compound_mid_webjin .in_grid .img_box{height: unset; aspect-ratio: 8 / 4;}

.compound_mid_webjin.full_grid .first_thume, .compound_mid_webjin.full_grid .in_grid{width: 100%; }
.compound_mid_webjin.full_grid .in_grid{grid-template-columns: repeat(2, 1fr);}
}

/*.com_main_mid_list .list_wrapper.grid > li{list-style: decimal}*/

/*메인 중간 섹션 랜덤*/
#main_mid_img{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 16px;}
#main_mid_img img{width: 100%; height: 100%; object-fit: cover}
#main_mid_img .thum{height: 130px; overflow: hidden; border-radius: 5px}
#main_mid_img .subject{-webkit-line-clamp: 2; display:-webkit-box; -webkit-box-orient: vertical;  overflow: hidden; text-overflow: ellipsis; margin-top: 2px; font-size: 1.4rem}
#main_mid_img .subject .cate{color: var(--df_color_background)}

#main_mid_webjin{}
#main_mid_webjin .webjin_top{}
#main_mid_webjin .webjin_top::after{content: ''; display: block; clear: both}
#main_mid_webjin .webjin_top a{display: block}
#main_mid_webjin .webjin_top > *{float: left; width: calc((100% / 2) - 8px)}
#main_mid_webjin .webjin_top > * + *{margin-left: 16px}
#main_mid_webjin .webjin_top img{width: 100%; height: 100%; object-fit: cover}
#main_mid_webjin .webjin_top .thum{width: 100%; height: 130px; overflow: hidden; border-radius: 5px}
#main_mid_webjin .webjin_top .subject{-webkit-line-clamp: 2; display:-webkit-box; -webkit-box-orient: vertical;  overflow: hidden; text-overflow: ellipsis; margin-top: 2px; font-size: 1.4rem}
#main_mid_webjin .webjin_top .subject .cate{color: var(--df_color_background)}
#main_mid_webjin .webjin_list{margin-top: 20px; font-size: 1.4rem}
#main_mid_webjin .webjin_list > li + li{border-top: 1px solid #ededed}
#main_mid_webjin .webjin_list a{display: block; padding: 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#main_mid_webjin .webjin_list .cate{margin-right: 5px; color: var(--df_color_background)}

@media screen and (max-width: calc(1200px + 32px)){
#main_mid_webjin .webjin_top .thum{height: auto; aspect-ratio: 16 / 10;}
}



/*메인 웹진*/
#main_webjin{grid-column: 1/3}

#main_webjin .tab_wrap{margin-top: 24px}
#main_webjin .tab_wrap > li::after{content: ''; display: block; clear: both}

#main_webjin .tab_wrap .grid_wrapper, #main_webjin .tab_wrap .list_wrapper{float: left; width: calc(50% - 16px);}
#main_webjin .grid_wrapper{grid-template-columns: repeat(2, 1fr); grid-gap: 24px 16px}
#main_webjin .grid_wrapper a{display: block}
#main_webjin .grid_wrapper figure{} 
#main_webjin .grid_wrapper .img_box{height: 120px; overflow: hidden; border-radius: 15px; background: #fafafa}
#main_webjin .grid_wrapper .img_box img{width: 100%; height: 100%; object-fit: cover}
#main_webjin .grid_wrapper .caption{-webkit-line-clamp: 2; display:-webkit-box; -webkit-box-orient: vertical;  overflow: hidden; text-overflow: ellipsis; margin-top: 12px; line-height: 17px; font-weight: 500; font-size: 1.4rem}
#main_webjin .list_wrapper{margin-left: 32px}
#main_webjin .list_wrapper > li{}
#main_webjin .list_wrapper > li + li{margin-top: 12px}
#main_webjin .list_wrapper a{display: block; width: 100%}
#main_webjin .list_wrapper a::after{content: ''; display: block; clear: both}
#main_webjin .list_wrapper .txt{float: left; font-weight: 500; font-size: 1.4rem}
#main_webjin .list_wrapper .comment_date{float: right}
#main_webjin .m_more_btn{display: none}

@media screen and (min-width: 1000px){
#main_webjin .webjin_tab_btn{position: relative; display: flex; justify-content: space-between; align-items: center}
#main_webjin .webjin_tab_btn::before{content: ''; position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 1px; background: var(--df_color_background)}
#main_webjin .webjin_tab_btn .tab_btn_box{text-align: center; font-size: 1.4rem}
#main_webjin .webjin_tab_btn .tab_btn_box::after{content: ''; display: block; clear: both}
#main_webjin .webjin_tab_btn .tab_btn_box a{position: relative; z-index: 1; float: left; width: 90px; line-height: 35px; color: #999 }
#main_webjin .webjin_tab_btn .tab_btn_box a.on{border: 1px solid var(--df_color_background); border-bottom: unset; border-radius: 10px 10px 0 0; font-weight: 600; background: #fff; color: #333}
#main_webjin .webjin_tab_btn .more_btn{font-size: 1.3rem; color: #888}
#main_webjin .webjin_tab_btn .more_btn .icon{vertical-align: top; margin: 6px 4px 0 0;}
}

@media screen and (max-width: calc(1200px + 32px)){
#main_webjin .grid_wrapper .img_box{height: auto; aspect-ratio: 16 / 10;}
}

@media screen and (max-width: 1000px){
.Dark #main_webjin .tab_wrap{margin-top: 16px; border-radius: 10px !important}

#main_webjin .webjin_tab_btn{overflow: auto; font-size: 1.4rem}
#main_webjin .webjin_tab_btn::-webkit-scrollbar{height: 0; background: transparent}
#main_webjin .webjin_tab_btn .more_btn{display: none}
#main_webjin .webjin_tab_btn .tab_btn_box{display: flex;}
#main_webjin .webjin_tab_btn .tab_btn_box a{padding: 6px 16px; border-radius: 16px; white-space: nowrap; color: #777}
#main_webjin .webjin_tab_btn .tab_btn_box a.on{background: var(--df_color_background); color: var(--df_color_font)}

#main_webjin .tab_wrap .grid_wrapper, #main_webjin .tab_wrap .list_wrapper{float: unset; width: 100%}

#main_webjin .list_wrapper{margin-left: unset; margin-top: 32px}
#main_webjin .list_wrapper > li{}
#main_webjin .list_wrapper > li + li{margin-top: 10px; padding-top: 10px; border-top: 1px solid #ededed}

#main_webjin .m_more_btn{display: block; margin-top: 32px; padding-top: 16px; border-top: 1px solid #ededed; text-align: center; font-size: 1.1rem; color: #777}
}

@media screen and (max-width: 450px){
#main_webjin .grid_wrapper .img_box{border-radius: 8px}
}

/*메인 중고장터*/
#main_market{grid-column: 1/3;}

#main_market .tab_btn_box{position: relative; margin-top: 18px; text-align: center; font-size: 1.4rem}
#main_market .tab_btn_box::before{content: ''; position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 1px; background: var(--df_color_background)}
#main_market .tab_btn_box::after{content: ''; display: block; clear: both}
#main_market .tab_btn_box a{position: relative; z-index: 1; float: left; width: 90px; line-height: 35px; color: #999 }
#main_market .tab_btn_box a.on{border: 1px solid var(--df_color_background); border-bottom: unset; border-radius: 10px 10px 0 0; font-weight: 600; background: #fff; color: #333}

#main_market .com_market{margin-top: 24px}
#main_market .grid_wrapper{grid-template-columns: repeat(2, 1fr); grid-gap: 32px}
#main_market .grid_wrapper a{width: 100%}
#main_market .grid_wrapper a::after{content: ''; display: block; clear: both}
#main_market .grid_wrapper a > *{float: left}
#main_market .img_box{width: 110px; height: 110px; overflow: hidden; border-radius: 10px; background: #fafafa}
#main_market .img_box img{width: 100%; height: 100%; object-fit: cover}
#main_market .wri_date{position: relative; width: calc((100% - 110px) - 24px); height: 110px; margin-left: 24px}
#main_market .wri_date .tit, #main_market .wri_date .txt{-webkit-line-clamp: 2; display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
#main_market .wri_date .tit{line-height: 19px; font-size: 1.6rem; color: #333}
#main_market .wri_date .price{margin-top: 6px; font-size: 1.4rem; color: #333}
#main_market .wri_date .txt{position: absolute; bottom: 0; width: 100%; font-size: 1.4rem; color: #666}
#main_market .open_btn{width: 100%; padding-top: 24px; margin-top: 24px; border-top: 1px solid #ededed; text-align: center; font-weight: 600; font-size: 1.4rem; color: #666} 



@media screen and (min-width: 1000px){

}

@media screen and (max-width: 1000px){
#main_market .tab_btn_box a{width: calc(100% / 2)}
}

@media screen and (max-width: 750px){
#main_market .grid_wrapper{grid-template-columns: repeat(1, 1fr);}
}


/*메인 하단 배너*/
#main_bot_banner{grid-column: 1/3; height: 300px}