@charset "utf-8";

/*----------------------------------- 전체 공유 스타일 -----------------------------------*/
.title_headingtag{font-size: 2.8rem}

.wrap_inner_box .tab_wrap .tab_list_box:not(:first-of-type){display: none}

/*팝업*/
.df_popup{position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff}
.df_background_popup{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgb(0 0 0 / 50%)}
.df_background_popup .content_wrapper{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff}

/*페이징*/

.pg_wrap{width: fit-content; margin: 0 auto; font-size: 1.4rem}
.pg_wrap .pg_page{display: inline-block; vertical-align: middle; width: 32px; height: 32px; text-align: center; border: 1px solid #eee; border-radius: 5px; line-height: 32px; color: #9f9f9f}
.pg_wrap .pg_page.pg_current{background: var(--df_color_background); color: #fff}
.pg_wrap .pg_start{background:url('../img/btn_first.gif') no-repeat 50% 50%}
.pg_wrap .pg_prev{background:url('../img/btn_prev.gif') no-repeat 50% 50%}
.pg_wrap .pg_end{background:url('../img/btn_end.gif') no-repeat 50% 50%}
.pg_wrap .pg_next{background:url('../img/btn_next.gif') no-repeat 50% 50%}
.pg_wrap .pg_page:not(.pg_start, .pg_prev, .pg_end, .pg_next):hover{background: var(--df_color_background); color: #fff}


/*필터링*/
.fillter_box{padding: 16px; border: 1px solid #ededed; border-radius: 12px; font-size: 1.3rem; background: #fafafa; }
.fillter_box .option_inner{display: none; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ededed; }
.fillter_box .inner_box{display: table; table-layout: fixed; width: 100%}
.fillter_box .inner_box + .inner_box{margin-top: 10px}
.fillter_box .inner_box > *{display: table-cell; vertical-align: middle}
.fillter_box .inner_box .tit{width: 70px; color: #777;}
.fillter_box .inner_box .btn_box{width: calc(100% - 70px);}
.fillter_box .btn_box .this_btn{padding: 6px 20px; border: 1px solid #e1e1e1; border-radius: 3px; font-size: 1.2rem; background: #fff; color: #555}
.fillter_box .btn_box .this_btn.on{background: var(--df_color_background); color: var(--df_color_font)}
.fillter_box .df_fillter{display: flex; justify-content: space-between; align-items: center;}
.fillter_box .df_fillter .op_btn{font-weight: 500; color: #777}
.fillter_box .df_fillter .op_btn.on{font-weight: 600; color: #333}
.fillter_box .df_fillter .op_btn::after{content: '\f107';  font-family: "FontAwesome"; margin-left: 5px; font-size: 1.8rem}
.fillter_box .df_fillter .op_btn.on::after{content: '\f106';}
.fillter_box .search_text{width: 60%; text-align: right}
.fillter_box .search_text select{width: 100px}
.fillter_box .search_text input[name="in_search_str"]{width: calc(100% - 176px)}
.fillter_box .search_text .this_btn.clear{width: 70px ; height: 40px; border-radius: 3px; background: var(--df_color_background); color: var(--df_color_font)}



/*기본 h2 태그*/
.this_title{margin-bottom: 32px; font-size: 2.8rem}

/*인위적인 테이블1*/
.d_table_list{font-size: 1.4rem}
.d_table_list .dhead{text-align: center; background: #fafafa}

.d_table_list .dhead, .d_table_list .dbody > li{display: table; width: 100%}
.d_table_list .dhead > *, .d_table_list .dbody > li > *{display: table-cell; vertical-align: middle}


/*인위적인 테이블2*/
.n_table_wrap{padding: 24px; border: 1px solid #ededed; border-radius: 15px}

.n_table{}
.n_table .cate{width: 60px;}
.n_table .subject{}
.n_table .mb{width: 100px;}
.n_table .good{width: 50px;}
.n_table .hit{width: 50px;}

.n_table .n_body{margin-top: 10px; border-top: 1px solid #ededed; }
.n_table .n_head, .n_table .n_body a{display: table; width: 100%}
.n_table .n_head > *, .n_table .n_body a > *{display: table-cell; vertical-align: middle}

.n_table .n_head{text-align: center; font-size: 1.6rem}

.n_table .n_body a > *{padding: 10px}
.n_table .n_body a > *:not(.subject){font-size: 1.2rem; text-align: center}
.n_table .n_body .cate{color: #777}
.n_table .n_body .subject{font-size: 1.4rem}
.n_table .n_body .mb{}
.n_table .n_body .good{}
.n_table .n_body .hit{}

/*인위적인 버튼 리스트*/
.this_cate_btn{margin: -4px 0 0 -4px}
.this_cate_btn .this_btn{display: inline-block; margin: 4px 0 0 4px; padding: 5px 16px; border-radius: 16px; border: 1px solid #ededed; color: #777}
.this_cate_btn .this_btn.on{border-color: var(--df_color_background); font-weight: 600; background: var(--df_color_background); color: var(--df_color_font)}


/*인위적인 서치박스*/
.this_search_box{text-align: right}
.this_search_box > *{height: 30px; border: 1px solid #ededed; border-radius: 3px}
.this_search_box select{width: 65px}
.this_search_box button{width: 30px; background: #fafafa}

/*인위적인 데이터 없음*/
.this_nodata_wri_box{border: 1px solid #ededed; line-height: 50vh; text-align: center; border-radius: 15px; color: #777}

@media screen and (min-width: 1000px){
.n_table .n_body > li:hover{background: #fafafa}

.this_search_box button:hover{background: var(--df_color_background); color: var(--df_color_font)}
}



/*----------------------------------- header -----------------------------------*/
body[active="main_background"] .com_header{background: transparent}
body[active="main_background"] .header_mobile_type .main_header .search_input{background: #fff}

.com_header{position: relative; z-index: 30; background: #fff} 
.dark_mode_box{position: relative; width: 52px; height: 22px; padding: 2px; border-radius: 25px; cursor: pointer; background: #dbdbdb}
.dark_mode_box .dark_mode_btn{position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; background: #fff}
.dark_mode_box .dark_mode_btn img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)}

.Dark .dark_mode_box{background: #555}
.Dark .dark_mode_btn{left: 33px; background: #000}

#simple_head{padding: 10px 0; border-bottom: 1px solid #ededed;}
#simple_head .logo img{max-width: 90px}
#simple_head > *{display: flex; justify-content: space-between; align-items: center}

/*.com_header .dark_mode_box input[id="Dark_mode_btn"]:checked ~ .dark_mode_btn{left: 33px; background: #000}*/
/*.com_header .dark_mode_box.on{background: #ddd;}
.com_header .dark_mode_box .dark_mode_btn.on{left: 30px; background: #000}*/


#full_menu{display: none; position: fixed; left: 0; top: 0; z-index: 30; width: 100%; height: 100%; background: rgb(0 0 0 / 50%)}

#full_menu .inner_wrapper{position: relative; transform: translateY(-100%); transition: 0.5s; box-shadow: 0 10px 10px 0 rgb(0 0 0 / 10%); background: #fff}
#full_menu .inner_wrapper.on{transform: translateY(0);}

#full_menu .inner_wrapper .close{position: absolute; right: 32px; top: 62px; font-size: 2.5rem}

#full_menu .top_position{padding: 12px 0; border-bottom: 1px solid #ededed}
#full_menu .top_position > *{display: flex; justify-content: space-between; align-items: center;}
#full_menu .top_position .logo{width: 100px}
#full_menu .top_position .logo img{width: 100%}
#full_menu .top_position .user_data{font-size: 1.2rem}
#full_menu .top_position .user_data > *{}
#full_menu .top_position .user_data > * + *{margin-left: 5px}
#full_menu .top_position .user_data .adm{padding: 2px 6px; border-radius: 3px; background: var(--df_color_background); color: var(--df_color_font)}

#full_menu .content_position{display: flex; padding: 32px 0 55px 0}

#full_menu .menu_list{flex: 1; display: flex; flex-wrap: wrap; gap: 32px 16px;}
#full_menu .menu_list > li{flex-basis: calc((100% / 5) - 13px); margin-top: 30px; padding-left: 16px; border-left: 1px solid #ededed}
#full_menu .menu_list > li:nth-of-type(5n + 1){padding-left: unset; border-left: unset}
#full_menu .menu_list .subject{transform: translateY(-30px); font-size: 1.8rem;}
#full_menu .menu_list .sub_menu{position: relative; z-index: 1; margin-top: -30px; padding: 12px 0; overflow: hidden; font-size: 1.4rem}
#full_menu .menu_list .sub_menu > *{float: left; width: calc(100% / 2); color: #555;}

#full_menu .cus_box{flex-basis: 120px; text-align: right; font-size: 1.4rem;}
#full_menu .cus_box > *{font-weight: 600}
#full_menu .cus_box > * + *{margin-top: 10px}
#full_menu .cus_box .icon{margin-right: 5px; color: var(--df_color_background)}

#wing_banner{position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); width: 1200px;}
#wing_banner.fixed{position: fixed}
#wing_banner .com_ad{position: absolute; }
#wing_banner .com_ad > * + *{margin-top: 16px} 
#wing_banner .left_ad{left: -200px}
#wing_banner .right_ad{right: -200px}

.header_mobile_type{display: none}
.header_mobile_type .head_nav{overflow: auto; background: var(--df_color_background)}
.header_mobile_type .head_nav.fixed{position: fixed; left: 0; top: 0; width: 100%;}
.header_mobile_type .head_nav::-webkit-scrollbar{height: 0; background: transparent}
.header_mobile_type .head_nav .menu_list{display: flex; width: 100%; padding: 0 16px}
.header_mobile_type .head_nav .menu_list a{padding: 10px 16px; white-space: nowrap; font-size: 1.4rem; color: #fff}
.header_mobile_type .head_nav .menu_list a + a{}

.header_mobile_type .main_header{padding: 32px 0; border-top: 5px solid var(--df_color_background);}
.header_mobile_type .main_header .main_logo{text-align: center}
.header_mobile_type .main_header .search_input{width: calc(100% - 32px); margin: 32px auto 0 auto; overflow: hidden; border: 1px solid var(--df_color_background); border-radius: 26px;}
.header_mobile_type .main_header .search_input > *{border: none}
.header_mobile_type .main_header .search_input .df_input{width: calc(100% - 60px); padding: 16px; font-size: 1.4rem}
.header_mobile_type .main_header .search_input .trans_btn{width: 55px; height: 41px; font-size: 1.8rem; color: var(--df_color_background)}

.header_mobile_type .main_nav{}
.header_mobile_type .main_nav .menu_list a{}

.header_mobile_type .sub_header{padding: 16px}
.header_mobile_type .sub_header img{width: 120px}
.header_mobile_type .sub_nav .menu_list{}
.header_mobile_type .sub_nav .menu_list a{}
.header_mobile_type .sub_nav .menu_list a.on{position: relative; z-index: 1}
.header_mobile_type .sub_nav .menu_list a.on::before{content: ''; position: absolute; left: 0; top: 50%; z-index: -1; transform: translateY(-50%); width: 100%; height: calc(100% - 15px); border-radius: 50px; background: var(--df_color_highlight); animation: nav_on 2s forwards}
.header_mobile_type .sub_nav .menu_list a:last-of-type{}

#mobile_full_nav{display: none; position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 100%; background: rgb(0 0 0 / 70%)}

#mobile_full_nav .content_wrapper{position: absolute; left: 0; top: 0; transform: translateX(-100%); transition: all 0.5s; transition-delay: 0.2s; width: 500px; height: 100%; background: #fafafa}
#mobile_full_nav .content_wrapper.on{transform: translateX(0); }
#mobile_full_nav .content_wrapper > *{background: #fff}
#mobile_full_nav .content_wrapper > * + *{margin-top: 10px}
#mobile_full_nav .user_profile{}
#mobile_full_nav .pf_inner{position: relative; padding: 16px; background: var(--df_color_background); color: var(--df_color_font)}

#mobile_full_nav .wellcom_txt{width: calc(100% - 130px); font-size: 1.8rem}
#mobile_full_nav .pf_inner:has(.wellcom_txt) .pf_bot{margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 50%)} 

#mobile_full_nav .pf_inner .nav_top_btn{position: absolute; right: 16px; top: 16px;}
#mobile_full_nav .pf_inner .nav_top_btn > *{display: inline-block; vertical-align: middle; color: var(--df_color_font); font-size: 1.4rem}
#mobile_full_nav .pf_inner .nav_top_btn > * + *{margin-left: 14px}
#mobile_full_nav .pf_top{display: flex; align-items: center; gap: 0 16px; }

#mobile_full_nav .pf_top .img_box{width: 60px; height: 60px; border-radius: 50%; overflow: hidden}
#mobile_full_nav .pf_top .img_box img{width: 100%; height: 100%; object-fit: cover}
#mobile_full_nav .pf_top .name_data{flex: 1;}
#mobile_full_nav .pf_top .name_data .name{font-size: 1.8rem;}
#mobile_full_nav .pf_top .name_data .sub{font-size: 1.4rem}
#mobile_full_nav .pf_bot{margin-top: 25px; font-size: 1.2rem; }
#mobile_full_nav .pf_bot .icon{margin-right: 2px}
#mobile_full_nav .pf_bot > *{color: var(--df_color_font)}
#mobile_full_nav .pf_bot > * + *{margin-left: 16px}

#mobile_full_nav .activiti_data{padding: 25px 16px; text-align: center; }
#mobile_full_nav .activiti_data > *{display: inline-block; vertical-align: middle;}
#mobile_full_nav .activiti_data > * + *{position: relative; margin-left: 35px; padding-left: 35px;}
#mobile_full_nav .activiti_data > * + *::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: calc(100% - 8px); background: #e7e7e7}
#mobile_full_nav .activiti_data .data{font-size: 1.4rem; font-weight: 500;}
#mobile_full_nav .activiti_data .txt{margin-top: 5px; color: #777; font-size: 1.2rem}

#mobile_full_nav .content_wrapper:has(.activiti_data) .menu_inner{height: calc(100% - (226px + 10px));} 
#mobile_full_nav .menu_inner{height: calc(100% - (126px + 10px)); overflow: hidden}

#mobile_full_nav .menu_inner > *{float: left; padding: 16px 0;  height: 100%;}
#mobile_full_nav .menu_inner .menu_btn{width: 150px; background: #f3f3f3}
#mobile_full_nav .menu_inner .menu_btn .this_btn{width: 100%; height: 50px; padding-left: 30px; font-size: 1.6rem; text-align: left; color: #999}
#mobile_full_nav .menu_inner .menu_btn .this_btn.on{position: relative; z-index: 1; font-weight: 600; color: #fff}
#mobile_full_nav .menu_inner .menu_btn .this_btn.on::before{content: ''; position: absolute; left: 16px; top: 0; z-index: -1; width: 100%; height: 100%; border-radius: 3px; background: var(--df_color_background)}
#mobile_full_nav .menu_inner .menu_list{width: calc(100% - 150px)}
#mobile_full_nav .menu_inner .menu_list > li{padding: 10px 16px 0 45px; max-height: 100%; overflow: auto;}
#mobile_full_nav .menu_inner .menu_list > li:not(:first-of-type){display: none}
#mobile_full_nav .menu_inner .all_menu{}
#mobile_full_nav .menu_inner .com_menu > * + *{margin-top: 30px}
#mobile_full_nav .menu_inner .com_menu a{display: block}
#mobile_full_nav .menu_inner .com_menu .menu{padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #ededed; font-size: 1.6rem}
#mobile_full_nav .menu_inner .com_menu .menu:has(.icon){position: relative;}
#mobile_full_nav .menu_inner .com_menu .menu:has(.icon) .icon{position: absolute; right: 0; top: 50%; transition: all 0.3s; transform: translateY(-50%); color: #999}
#mobile_full_nav .menu_inner .com_menu .menu.on .icon{transform: translateY(-50%) rotate(180deg); color: var(--df_color_background)}
#mobile_full_nav .menu_inner .com_menu .sub_menu{display: none; font-size: 1.4rem}
#mobile_full_nav .menu_inner .com_menu .sub_menu *{}
#mobile_full_nav .menu_inner .com_menu .sub_menu * + *{margin-top: 2px}


#mobile_bottom_nav{display: none; justify-content: space-around; align-items: center; position: fixed; z-index: 9; left: 0; bottom: 0; transition: all 0.5s; width: 100%; padding: 10px 16px; border-top: 1px solid #ededed; font-size: 2.0rem; box-shadow: 0 -10px 10px -10px rgb(0 0 0 / 10%); background: #fff}
#mobile_bottom_nav .nav_open_btn{display: flex; flex-direction: column; justify-content: space-between; width: 18px; height: 16px; }
#mobile_bottom_nav .nav_open_btn .line{width: 100%; height: 2px; background: #333} 
#mobile_bottom_nav .memo_btn{position: relative}
#mobile_bottom_nav .memo_btn .cnt{position: absolute; right: -13px; top: -7px; width: 20px; height: 20px; border-radius: 50%; line-height: 20px; text-align: center; font-size: 1.2rem; background: red; color: #fff}
#mobile_bottom_nav .home_btn{width: 40px; line-height: 40px; border-radius: 16px; text-align: center; background: var(--df_color_background); color: var(--df_color_font)}
#mobile_bottom_nav .util_btn{position: relative;}
#mobile_bottom_nav .util_btn .this_btn{}
#mobile_bottom_nav .util_btn .this_btn .icon{transition: all 0.5s;}
#mobile_bottom_nav .util_btn .this_btn.on .icon{transform: rotate(180deg)}
#mobile_bottom_nav .util_btn .util_list{display: none; position: absolute; right: -30px; bottom: 60px; width: 150px; border: 1px solid #ededed; border-radius: 10px; text-align: center; font-size: 1.4rem; box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%); background: #fff}
#mobile_bottom_nav .util_btn .util_list .no_edata{padding: 10px; border: 1px solid #d1d1d1; border-radius: 5px; background: #fafafa; color: #777}
#mobile_bottom_nav .util_btn .util_list a{display: block}
#mobile_bottom_nav .util_btn .util_list .logout_a{padding: 10px 0; border-top: 1px solid #ededed}
#mobile_bottom_nav .util_btn .util_list .a_list{padding: 10px 0;}
#mobile_bottom_nav .util_btn .util_list .a_list a{}
#mobile_bottom_nav .util_btn .util_list .a_list a + a{margin-top: 10px}


@keyframes nav_on{
	0%{opacity: 1}
	25%{opacity: 1}
	50%{opacity: 1}
	75%{opacity: 1}
	100%{opacity: 0}
}

@media screen and (min-width: 470px){
/*#mobile_nav .activiti_data > * + *::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: calc(100% - 8px); background: #e7e7e7}*/
}

@media screen and (max-width: 1630px){
#wing_banner{display: none}
}

@media screen and (max-width: calc(1200px + 32px)){
.header_pc_type{display: none}
.header_mobile_type{display: block}
#mobile_bottom_nav{display: flex}

#simple_head > *{padding: 0 16px}
}

@media screen and (max-width: 1000px){
#mobile_full_nav .activiti_data{padding: 16px;}

#mobile_full_nav .content_wrapper:has(.activiti_data) .menu_inner{height: calc(100% - (205px + 10px));} 
#mobile_full_nav .menu_inner{height: calc(100% - (121px + 10px)); overflow: hidden}
}

@media screen and (max-width: 650px){
#mobile_full_nav .content_wrapper{width: calc(100% - 15%)}
}

@media screen and (max-width: 500px){
#mobile_full_nav .menu_inner .menu_btn{width: 120px}
#mobile_full_nav .menu_inner .menu_list{width: calc(100% - 120px)}

#mobile_full_nav .menu_inner .menu_btn .this_btn{padding-left: 20px;}
#mobile_full_nav .menu_inner .menu_btn .this_btn.on::before{left: 10px; width: calc(100% + 10px)}

#mobile_bottom_nav{font-size: 1.8rem}
#mobile_bottom_nav .memo_btn .cnt{right: -7px; top: -4px; width: 15px; height: 15px; line-height: 15px}
}

@media screen and (max-width: 470px){
#mobile_full_nav .activiti_data > * + *{margin-left: 28px; padding-left: 28px}
}

@media screen and (max-width: 450px){
#mobile_full_nav .pf_inner .nav_top_btn{position: unset; margin-bottom: 16px; text-align: right}
#mobile_full_nav .wellcom_txt{width: 100%;}
#mobile_full_nav .content_wrapper:has(.activiti_data) .menu_inner{height: calc(100% - (243px + 10px));} 
#mobile_full_nav .menu_inner{height: calc(100% - (159px + 10px)); overflow: hidden}
}

@media screen and (max-width: 390px){
#mobile_full_nav .activiti_data > * + *{margin-left: 22px; padding-left: 22px}
}


/*----------------------------------- main index  -----------------------------------*/

/*---------- 같거나 비슷한걸 공유 함 ----------*/
.index_all_wrap{padding: 32px 0 90px 0}
.index_all_wrap::after{content: ''; display: block; clear: both}
.index_all_wrap .wrap_box{float: left}

.wrap_inner_box{border-radius: 15px; background: #fff}
.wrap_inner_box:not(#main_headline, #main_bot_banner, #main_login_bot_banner, #main_rank_bot_banner){padding: 16px; border: 1px solid #ededed;}
.wrap_inner_box.swiper{position: relative}
.wrap_inner_box.swiper .btn_box{position: absolute; right: 0; bottom: 0; z-index: 1; width: 75px; overflow: hidden; border-top-left-radius: 15px}
.wrap_inner_box.swiper .btn_box button{float: left; width: calc(100% / 2); height: 30px; background: rgb(199 199 199 / 90%)}
.wrap_inner_box .right_nodata{line-height: 160px; letter-spacing: -1px; border-radius: 10px; text-align: center; font-size: 1.2rem; background: #fafafa; color: #777}

.wrap_inner_box.banner_container .btn_box{position: absolute; right: 0; bottom: 0; z-index: 1; overflow: hidden; border-top-left-radius: 15px ; background: rgb(0 0 0 / 70%)}
.wrap_inner_box.banner_container .btn_box .this_btn{padding: 8px 18px;}
.wrap_inner_box.banner_container .btn_box .prev{}
.wrap_inner_box.banner_container .btn_box .next{}

.sub_ad_box .btn_box{}
.sub_ad_box .btn_box .this_btn{position: absolute; top: 50%; z-index: 1; transform: translateY(-50%); transition: all 0.3s; width: 35px; height: 35px; border-radius: 50%; opacity: 0; font-size: 1.8rem; background: rgb(0 0 0 / 50%); color: #fff}
.sub_ad_box .btn_box .prev{left: 10px}
.sub_ad_box .btn_box .next{right: 10px}

.index_all_wrap .left_wrap{width: calc((100% - 300px) - 32px); min-height: 50vh}
.index_all_wrap .right_wrap{width: 300px; margin-left: 32px}
.index_all_wrap .right_wrap .wrap_inner_box + .wrap_inner_box{margin-top: 32px}
.index_all_wrap .right_wrap .inner_top_tit_box{display: flex; justify-content: space-between; align-items: center}
.index_all_wrap .right_wrap h3{letter-spacing: -1px; font-size: 2.0rem}
.index_all_wrap .right_wrap .list{margin-top: 20px}

#main_index .left_wrap{display: grid; grid-template-columns: calc(50% - 16px) calc(50% - 16px); grid-gap: 32px;}

#main_headline, #main_bot_banner, #main_login_bot_banner, #main_rank_bot_banner{overflow: hidden} 

@media screen and (min-width: 1000px){
.sub_ad_box:hover .btn_box .this_btn{opacity: 0.5}
.sub_ad_box .btn_box .this_btn:hover{opacity: 1; background: var(--df_color_background)}
}


/*메인 로그인 하단 배너*/
#main_login_bot_banner{}




/*메인 공지사항 리스트*/
#main_notice{}
#main_notice .list{}
#main_notice .list > li{}
#main_notice .list > li + li{margin-top: 4px}
#main_notice .list a{display: table; table-layout: fixed; width: 100%}
#main_notice .tit_date{width: calc(100% - 40px); padding-right: 5px; font-weight: 500; font-size: 1.4rem}
#main_notice .tit_date, #main_notice .day_date{display: table-cell; vertical-align: middle}
#main_notice .tit_date span{vertical-align: middle}
#main_notice .tit_date .tag{color: var(--df_color_background) !important}
#main_notice .tit_date .tit{max-width: calc(100% - 40px); margin-left: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333}
#main_notice .day_date{width: 40px; text-align: right; color: #666}

/*메인 포인트 랭크 and 메인 검색 랭크*/
.main_com_rank .list{}
.main_com_rank .list > li{display: table; width: 100%; table-layout: fixed}
.main_com_rank .list > li + li{margin-top: 6px}

.main_com_rank .list > li.rank_1st .num{background: var(--df_color_background)}
.main_com_rank .list > li.rank .num{background: #8b8b8b}

.main_com_rank .rank_date, .main_com_rank .ing_date{display: table-cell; vertical-align: middle}

.main_com_rank .rank_date{}
.main_com_rank .rank_date span{vertical-align: middle}
.main_com_rank .rank_date .num{width: 18px; height: 18px; border-radius: 5px; text-align: center; line-height: 18px; background: #b7b7b7; color: var(--df_color_font)}
.main_com_rank .rank_date .name{margin-left: 5px; font-size: 1.4rem; font-weight: 500; color: #333}
.main_com_rank .ing_date{text-align: right}

/*메인 포인트 랭크*/
#main_point_rank{}
#main_point_rank .score{width: 50px; font-weight: 500; font-size: 1.2rem}

/*메인 검색 랭크*/
#main_search_rank{}
#main_search_rank .var_date{width: 30px}

/*메인 렝크 하단 배너*/
#main_rank_bot_banner{width: 300px; height: 300px}
#main_rank_bot_banner .swiper-wrapper img{width: 100%; height: 100%; object-fit: cover}

/*메인 자유 게시판*/
#main_notice_free{}
#main_notice_free .list{}
#main_notice_free .list a{display: block; width: 100%}
#main_notice_free .list a::after{content: ''; display: block; clear: both}
#main_notice_free .list > li{}
#main_notice_free .list > li + li{margin-top: 5px}
#main_notice_free .tit_date{float: left; max-width: 89%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.4rem; font-weight: 500;}
#main_notice_free .comment_date{float: right; color: var(--df_color_background) !important}


/*메인 설문조사*/
#main_survey{}
#main_survey .inner_top_tit_box .btn_result{}
#main_survey .question_tit{font-size: 1.5rem}
#main_survey .question_tit .icon{color: #999}
#main_survey .list_wrapper{margin-top: 12px}
#main_survey .list_wrapper > li{}
#main_survey .list_wrapper > li + li{margin-top: 2px}
#main_survey .list_wrapper input[type="radio"]{}
#main_survey .list_wrapper label{margin-left: 4px; font-weight: 500; font-size: 1.2rem}
#main_survey .clear_btn{width: 100%; height: 42px; margin-top: 24px;border-radius: 3px; font-weight: 500; font-size: 1.3rem; background: var(--df_color_background); color: var(--df_color_font)}


@media screen and (max-width: calc(1200px + 32px)){
.index_all_wrap:not(#main_index){padding: 32px 16px 90px 16px;}
.index_all_wrap .left_wrap{width: 100%}
.index_all_wrap .right_wrap{display: none}
}


/*서브페이지 배너*/
.sub_ad_box a{display: block}
.sub_ad_box img{width: 100%}


/*----------------------------------- footer -----------------------------------*/
#footer{background: #f8f8f8}
#footer > div + div{border-top: 1px solid #f0f0f0}
#footer .fot_nav{padding: 40px 0}
#footer .fot_nav > *{display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 24px 14px}
#footer .fot_nav .tit{font-size: 1.5rem}
#footer .fot_nav .list{margin-top: 16px; font-size: 1.3rem;}
#footer .fot_nav .list::after{content: ''; display: block; clear: both}
#footer .fot_nav .list a{color: #6b6b6b}
#footer .fot_nav .list .num{color: var(--df_color_background) !important}

#footer .fot_page_date{padding: 32px 0 120px 0}
#footer .fot_page_date .fot_link{font-size: 1.6rem;}
#footer .fot_page_date .fot_link a{font-weight: 500; color: #6d6d6d}
#footer .fot_page_date .fot_link a + a::before{content: '|'; display: inline-block; transform: translateY(-3px); margin: 0 10px; font-size: 1.2rem; color: #cacaca}
#footer .fot_page_wri{margin-top: 55px} 
#footer .fot_page_wri::after{content: ''; display: block; clear: both}
#footer .fot_page_wri .info_date{float: left; line-height: 22px; font-weight: 500; font-size: 1.4rem; color: #9b9b9b}
#footer .fot_page_wri .sns_box{float: right}
#footer .fot_page_wri .sns_box a{width: 36px; height: 36px; background: url(../../community01/img/fot_sns.png) no-repeat}
#footer .fot_page_wri .sns_box a + a{margin-left: 8px}
#footer .fot_page_wri .sns_box a.twiter{}
#footer .fot_page_wri .sns_box a.facebook{background-position-x: -38px;}
#footer .fot_page_wri .sns_box a.instagram{background-position-x: -77px;}
#footer .fot_page_wri .sns_box a.kakao{background-position-x: -115px;}
#footer .fot_page_date .fot_logo{clear: both; margin-top: 70px}
#footer .fot_page_date .fot_logo img{width:120px;height:auto;object-fit:contain;}

#simple_footer{text-align: center; padding: 6px; font-weight: 500; letter-spacing: -1px; background: #f3f3f3; color: #999;}

@media screen and (min-width: calc(1200px + 32px)){
#footer .fot_nav .list > li{float: left; width:130px; *margin-left: 20px;}
#footer .fot_nav .list > li:nth-of-type(3n + 1){clear: both; margin-left: unset}
}

@media screen and (max-width: calc(1200px + 32px)){
#footer{padding: 0 16px}
#footer .fot_nav .list > li + li{margin-top: 2px}
}


@media screen and (max-width: 800px){
#footer .fot_nav > *{grid-template-columns: repeat(5, 1fr);}

}

@media screen and (max-width: 650px){
#footer .fot_page_wri .info_date, #footer .fot_page_wri .sns_box{float: unset}
#footer .fot_page_wri .sns_box{margin-top: 32px}
}

@media screen and (max-width: 600px){
#footer .fot_nav > *{grid-template-columns: repeat(4, 1fr);}
}

@media screen and (max-width: 450px){
#footer .fot_nav > *{grid-template-columns: repeat(3, 1fr);}
}