/* =================== HEADER =================== */

#wrap #header{width: 240px; margin-right: 32px; position: relative;}
#header .hd_wrap{border: 2px solid var(--deep_blue_bg); border-radius: 5px;}
#header .hd_wrap .gnb {padding: 20px 0;}
#header .hd_wrap .gnb li:first-child img{width: 90px;}
#header .hd_wrap .gnb .nav_tit{display: flex; align-items: center; font-weight: 500; padding: 5px 30px; color: #fff; line-height: 1.5;}
#header .hd_wrap .gnb .nav_tit img{margin-right: 8px;}
#header .hd_wrap .gnb .nav_tit.main{color: var(--black);}
#header .hd_wrap .gnb .nav_tit.main .hd_logo{width: 67px; height: 40px; background: url(/asset/img/common/logo.svg)no-repeat center / contain; margin-right: 6px; margin-left:-10px; margin-top:-10px;}
#header .hd_wrap .gnb .nav_tit.fmkorea{background: #456BC1;}
#header .hd_wrap .gnb .nav_tit.ruliweb{background: #002368;}
#header .hd_wrap .gnb .nav_tit.humoruniv{background: #E53248;}
#header .hd_wrap .gnb .nav_tit.etoland{background: #0E840A;}
#header .hd_wrap .gnb .nav_tit.todayhumor{background: #EE6323;}
#header .hd_wrap .gnb > li ul{padding: 5px 0;}
#header .hd_wrap .gnb > li ul > li a{color: #797979; padding: 5px 30px;}
#header .hd_wrap .gnb > li ul > li.on a{color: var(--black); background: #ECF6FF; font-weight: 500;}
.menu_close {width: 24px; height: 24px; background: url(/asset/img/common/menu_close.svg)no-repeat center; margin: 0 0 0 auto}


/* =================== CONTENTS =================== */

#container.contents{width: 1150px;min-height: 1000px;}
.top_con {padding: 60px 0; display: flex; justify-content: center; align-items: center; min-width: 1520px;}
.top_con .menu_btn{display: none; width: 24px;}
.top_con .menu_btn span{display: block; width: 100%; height: 3px; background: #000; margin-bottom: 8px;}
.top_con .menu_btn span:last-child{margin-bottom: 0;}
.top_con h1{margin-right: 45px;}
.top_con h1 .logo{width: 100px; height: 60px; margin-top:-15px; background: url(/asset/img/common/logo.svg) no-repeat center / contain;}
.search_wrap {display: flex; max-width: 536px; width: 100%; border: 2px solid var(--dark_blue); border-radius: 5px;}
.search_wrap.bd{border-radius: 5px 5px 5px 0;}
.search_wrap .search_select{width: 135px; height: auto; line-height: 40px;}
.search_wrap .search_select .nice-select{width: 135px; height: 40px; padding: 0 14px; background: url(/asset/img/common/select_arrow.png)no-repeat center right 10px;}
.search_wrap .search_select .nice-select::after{display: none;}
.search_wrap .search_select .nice-select.open .list{width: 100%; border: 2px solid var(--dark_blue); border-top: 0; border-radius: 0 0 5px 5px; background: #fff;  box-shadow: none; left: -2px;  margin-top: 0;}
.search_wrap .search_select .nice-select.open .list::before{position: absolute; top: 0; width: calc(100% - 30px); height: 1px; background: var(--dark_blue); left: 50%; transform: translateX(-50%); content: '';}
.search_wrap .search_select .nice-select .option{padding: 0 14px;}
.search_wrap input{border: none; outline: none; width: 100%; background: transparent;}
.search_wrap button{padding: 0 20px; background: var(--dark_blue); min-width: 68px; color: #fff;}
.search_wrap button span{display: inline-block; font-size: 15px; font-weight: 500; color: #fff;}

.contents .hot_cont h1{font-size: 18px; font-weight: 600; margin-bottom: 10px;}
.contents .hot_cont .item{width: calc(33.3333% - 20px); position: relative;box-shadow: 0px 0px 10px 1px gray;}
.contents .hot_cont .item > img{width: 100%; height: 200px; object-fit: cover;}
.contents .hot_cont .item .hot_txt{position: absolute; padding: 8px 16px; width: 100%; background: rgba(0, 0, 0, 0.70); bottom: 0; left: 0; overflow: hidden; display: flex; align-items: center;} 
.contents .hot_cont .item .hot_txt p{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 14px;}
.contents .hot_cont .item .hot_txt img{margin-right: 10px;}

.contents .main_cont{margin-top: 30px; max-height: 600px; height: 100%;}
.main_cont .tab_container{width: calc((100% - 33.3333%) - 10px);}
.main_cont .tab_container .tabs{display: flex;}
.main_cont .tab_container .tabs li{width: 50%;}
.main_cont .tab_container .tabs li a{width: 100%; line-height: 40px; height: 40px; border: 1px solid var(--deep_blue_bg); text-align: center; font-weight: 600; color: var(--black);border-bottom: 2px solid var(--dark_blue);}
.main_cont .tab_container .tabs li.active a{border-bottom: 2px solid #ffffff; color: var(--deep_blue); background: var(--deep_blue_bg);border-left: 2px solid var(--dark_blue);border-top: 2px solid var(--dark_blue);border-right: 2px solid var(--dark_blue)}
.main_cont .tab_container .tab_content{min-height: 560px;}
.main_cont .best_list{width: 100%;}
.main_cont .best_list li{border-bottom: var(--main_border);}
.main_cont .best_list li a{display: flex; padding: 8px 30px; color: var(--deep_blue); font-weight: 500; font-size: 14px; line-height: 1.36; align-items: center;}
.main_cont .best_list li p{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;width:75%}
.main_cont .best_list li .site_tit{width: 108px; display: flex; align-items: center;}
.main_cont .best_list li .bestDiv{width:100%}
/*.main_cont .best_list li .site_tit span{background: var(--blue_bg); color: var(--blue); padding: 2px 6px; font-weight: 500;}*/
.main_cont .best_list li .site_tit span{background: var(--blue_bg); color: var(--blue); padding: 2px 6px; font-weight: 500;min-width:95px;text-align: center;}

.main_cont .box_cont{width: calc(33.3333% - 20px); display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
.main_cont .box_cont .item{position: relative; height: calc(33.3333% - 20px);}
.main_cont .box_cont .item.adver{border:2px solid var(--deep_blue_bg)}
.main_cont .box_cont .item:last-child{margin-bottom: 0;}
.main_cont .box_cont .item .swiper .img_wrap{position: relative;}
.main_cont .box_cont .item .swiper .img_wrap img{width: 100%; height: 100%; object-fit: cover;}
.main_cont .box_cont .item .swiper .img_wrap video{width: 100%; height: 180px; object-fit: cover;}
.main_cont .box_cont .item .swiper .img_wrap::before{position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.30); content: ''; }
.main_cont .box_cont .item .swiper .img_wrap::after{position: absolute; width: 60px; height: 60px; background: url(/asset/img/ico_video_play.png) no-repeat center; transform: translate(-50%, -80%); top: 50%; left: 50%; content: ''; }
.main_cont .box_cont .item .swiper{height: 100%; position: relative;}
.swiper.latest_video .video_desc{position: absolute; width: 100%; background: #101743; bottom: 0; left: 0; height: 40px; display: flex; align-items: center; padding: 0 16px; z-index: 9;}
.swiper.latest_video .video_desc p{flex: 1; color: #fff;}
.swiper.latest_video .video_desc .control_wrap{display: flex; align-items: center;}
.swiper.latest_video .swiper-pagination-fraction{display: flex; align-items: center; color: #fff;}
.swiper.latest_video .swiper-button-prev{ background: url(/asset/img/wh_prev_arrow.png)no-repeat center;}
.swiper.latest_video .swiper-button-next{ background: url(/asset/img/wh_next_arrow.png)no-repeat center;}
.swiper.latest_video .swiper-button-toggle{width: 15px; height: 15px; background: url(/asset/img/wh_pause.png)no-repeat center; margin: 0 8px;}
.swiper.latest_video .swiper-button-toggle.stop{width: 15px; height: 15px; background: url(/asset/img/wh_play.png)no-repeat center right; margin: 0 8px;}
.swiper.latest_video .swiper-pagination-fraction .page_line{width: 14px; height: 1px; background: #fff; margin: 0 8px;}

.swiper.latest_video .swiper-button-prev,
.swiper.latest_video .swiper-button-next{width: 15px; height: 15px; margin-top: 0;}
.swiper.latest_video .swiper-button-prev,
.swiper.latest_video .swiper-button-next,
.swiper.latest_video .swiper-pagination-fraction{position: relative;bottom: unset; top: unset; left: unset; right: unset;}
.swiper-button-next:after, .swiper-button-prev:after{display: none;}

.main_cont .box_cont .ad_wrap .ad_mark{position: absolute; background: #101743; top: 0; left: 0; color: #fff; line-height: 1.5; padding: 0 16px; font-weight: 600;}

.main_cont .box_cont .trend_head{width: 100%; line-height: 40px; height: 40px; text-align: center; background: var(--deep_blue_bg); color: var(--deep_blue); font-weight: 600;}
.main_cont .box_cont .trend_body{padding: 16px 0; border: 2px solid var(--deep_blue_bg);}
.main_cont .box_cont .trend_body ul{display: flex; flex-wrap: wrap; width: 100%; justify-content: center;}
.main_cont .box_cont .trend_body li{width: calc(50% - 7px); margin-right: 7px; max-width: 160px;}
.main_cont .box_cont .trend_body li:nth-child(2n){margin-right: 0;}
.main_cont .box_cont .trend_body li a{width: 100%; text-align: center; color: #fff; border-radius: 50px; margin-bottom: 6px; line-height: 2.15; font-size: 14px;}
.main_cont .box_cont .trend_body li:first-child a{background: #784E2C;}
.main_cont .box_cont .trend_body li:nth-child(2) a{background: #705A9D;}
.main_cont .box_cont .trend_body li:nth-child(3) a{background: #FF7E3D;}
.main_cont .box_cont .trend_body li:nth-child(4) a{background: #E50913;}
.main_cont .box_cont .trend_body li:nth-child(5) a{background: #436F5A; margin-bottom: 0;}
.main_cont .box_cont .trend_body li:nth-child(6) a{background: #EB4B8A; margin-bottom: 0;}

#container.main .tb_wrap{margin-top: 30px;}
.tb_wrap .total{font-weight: 500;font-size: 17px;color: #000;}
.tb_wrap .site{margin:20px 0 5px 0;}
.tb_wrap .tb_type1 {width: 100%;margin-bottom:35px;}
.tb_wrap .tb_type1 .thead{background: var(--deep_blue_bg); border-bottom: 2px solid var(--deep_blue);}
.tb_wrap .tb_type1 .thead li{height: 40px; line-height: 40px; font-size: 15px; font-weight: 600; text-align: center; vertical-align: middle;}
.tb_wrap .tb_type1 .tbody a{padding: 5px 0; border-bottom: var(--main_border);}
.tb_wrap .tb_type1 .tbody .td{font-size: 14px;}
.tb_wrap .tb_type1 .tbody .site_tit{color: var(--blue); background: var(--blue_bg); padding: 0 6px; font-size: 14px; font-weight: 500; word-break: keep-all;}
.tb_wrap .tb_type1 .tbody .nothing{width:100%;height:50px;border-bottom:var(--main_border);display: flex;align-items: center;justify-content: center;}
.tb_wrap .tb_type1 .thead,
.tb_wrap .tb_type1 .tbody a{display: flex; text-align: center; align-items: center;min-height: 61px;;}
.tb_wrap .tb_type1 .website{width: 11%;}
.tb_wrap .tb_type1 .title{width: 60%;}
.tb_wrap .tb_type1 .writer{width: 11%;}
.tb_wrap .tb_type1 .date{width: 9%;}
.tb_wrap .tb_type1 .views{width: 9%;}
.tb_wrap .tb_type1 .title.td {display: inline-flex; align-items: center; text-align: left; font-weight: 500;}
.tb_wrap .tb_type1 .title.td img{margin-right: 20px;width:80px;height:50px;}
.tb_wrap .tb_type1 .tb_bg{background: rgba(45, 187, 226, 0.10);}
.tb_wrap .tb_type1 .tb_bg .td.title{color: var(--deep_blue);}
.tb_wrap .tb_type1 .title.td .tb_new{color: red; font-weight: bold; margin-left: 10px;}
.tb_wrap .tb_type1 .mb_ico_pic{display: none;}
.pc_hide{display: none;}
.tb_wrap .tb_type1 .td.views span{margin-right: 5px; line-height: 0; width: 15px; height: 10px; background: transparent url(/asset/img/ico_views_grey.svg) no-repeat center;}
.tb_wrap .ttop_wrap{display:flex;justify-content: space-between;align-items: center;}
.tb_wrap .ttop_wrap .moreView{width:70px;height:30px;background-color: #fff;border: 1px solid #333333;border-radius:5px;color: #333333;}



/* 페이징 버튼 영역 */

.btn_wrap{display: flex; justify-content: space-between; margin-top: 40px;}
.pagination{display: flex;}
.pagination a{width: 30px; height: 30px; line-height: 30px; margin-right: 8px; text-align: center; line-height: 28px; border-radius: 5px;}
.pagination .page_arrow{border: 1px solid #D0D0D0; background-repeat: no-repeat; background-position: center;}
.pagination .page_arrow.prev{background-image: url(/asset/img/common/page_arrow_prev.png);}
.pagination .page_arrow.next{background-image: url(/asset/img/common/page_arrow_next.png);}
.pagination ul{display: flex;}
.pagination .pag_num a{border: 1px solid var(--blue); font-weight: bold;}
.pagination .pag_num.on a{color: #fff; background: var(--blue);}
.list_btn{padding: 0 30px; background: var(--dark_blue); color: #fff; font-weight: 500; border-radius: 5px; font-size: 16px; height: 40px; line-height: 40px;}
.top_btn{padding: 10px 20px; background: #343644; color: #fff; font-weight: 500; border-radius: 5px; font-size: 16px;margin-bottom:15px;}
.top_btn img{margin-left: 6px;}

.bottom_con{margin: 30px 0 40px 0;}
.bottom_con .search_wrap{margin: 0 auto; border: 1px solid var(--dark_blue);}
.bottom_con .search_wrap .search_select .nice-select.open .list{width: 100%; border: 1px solid var(--dark_blue); border-top: 0; left: -1px;}

/* 서브컨텐츠 */

.view_wrap .view_top{border-top: var(--main_border); border-bottom: var(--main_border);}
.view_wrap .site_tit{color: var(--blue); background: var(--blue_bg); padding: 0 6px; font-size: 14px; font-weight: 500; white-space: nowrap;}
.view_wrap .view_tit{width: 100%; background: var(--deep_blue_bg); border-bottom: 2px solid var(--deep_blue); padding: 8px 12px 8px 34px; font-size: 14px; line-height: 22px; height: 40px;}
.view_wrap .view_tit h2{font-weight: 500; padding-left: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.view_wrap .view_tit li:first-child{display: flex; align-items: center;width: 75%;}
.view_wrap .view_group{ padding: 8px 12px 8px 34px; height: 40px; font-size: 14px; line-height: 22px;}
.view_wrap .view_group li:last-child{display: flex; align-items: center; gap: 5px;}
.view_wrap .view_cont{padding: 30px 0; min-height: 767px;}
/*.view_wrap .view_cont video{max-width: 1150px;}*/
/*.view_wrap .view_cont img{max-width: 1150px;}*/
.view_wrap .view_cont video{max-width: 100%;height:auto;}
.view_wrap .view_cont img{max-width: 100%;height:auto;}

/* 레이어 팝업 */

.pop_cont{width: 100%; height: 100%; position: absolute; z-index: 9999; top: 0; left: 0; display: none;}
.pop_cont.open{display: block;}
.pop_cont .pop_box{width: 640px; height: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 15px 15px 0 0; overflow: hidden; box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);}
.pop_cont .pop_box.dif{width:465px;}
.pop_cont .pop_box .pop_head{background: var(--main_blue); padding: 20px 24px;}
.pop_cont .pop_box .pop_head h2{color: #fff; font-size: 16px;}
.pop_cont .pop_box .pop_body{padding: 20px;}
.pop_cont .pop_box .pop_body .pop_con_inner{border: 1px solid #333333; padding: 25px 14px; min-height: 405px;}
.pop_cont .pop_box .btn_wrap{justify-content: center; margin-top: 20px; flex-wrap: wrap;}
.pop_cont .pop_box .pop_tit{min-width: 140px; font-weight: 500; font-size: 20px;}
.pop_cont .pop_box .red {color: #FF5454;}
.pop_cont .pop_box .inp_cont{overflow:auto;}
.pop_cont .pop_box .inp_cont li{display: flex; align-items: center; margin-bottom: 13px;}
.pop_cont .pop_box .inp_cont li:last-child{margin-bottom: 0;}
.pop_cont .pop_box .inp_cont .inp_wrap{width: calc(100% - 140px);}
.pop_cont .pop_box .inp_cont select{min-width: 250px; border-radius: 5px; padding: 0 10px; height: 32px; line-height: 1; background: url(/asset/img/common/select_arrow.png) no-repeat center right 10px; border: 1px solid #333; font-size: 16px;}
.pop_cont .pop_box .inp_cont .inp_wrap input{min-width: 230px; border-radius: 5px; padding: 0 10px; height: 32px; line-height: 32px; border: 1px solid #333; font-size: 16px;}
.pop_cont .pop_box .inp_cont .inp_wrap span{display:block;min-width: 230px; border-radius: 5px; padding: 0 10px; height: 32px; line-height: 32px; border: 1px solid #333; font-size: 16px;}
.pop_cont .pop_box .inp_cont .inp_wrap [name='trend']{width:230px}
.pop_cont .pop_box.notice{width: calc(100% - 120px); max-height: 90vh;}
.pop_cont .pop_box.notice .pop_con_inner{border: 0; padding: 25px 40px;}
.pop_cont .pop_box.notice .no_title input{width: 600px; font-size: 16px;}
.pop_cont .pop_box.notice .no_title input::placeholder{color: #333333;}
.pop_cont .pop_box.notice .txt_area{margin-top: 18px;}
.pop_cont .pop_box.notice .txt_area #boardDesc{max-height: 360px; overflow:auto; border:1px solid #c9c9c9; padding:5px; border-radius: 5px;}
.pop_cont .pop_box .txt_area {width: 100%;}
.pop_cont .pop_box .txt_area textarea{width: 90%; border-radius: 5px; border: 1px solid #333; margin-top: 16px; font-size: 16px; padding: 10px;}
.pop_cont .pop_box.notice .txt_area textarea{padding: 20px;}
.pop_cont .pop_box.notice .txt_area textarea::placeholder{color: #333333;}

/* 버튼 스타일 */

.bt_cont{display: flex; align-items: center; justify-content: space-between; position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px 44px;}
.btn_wrap{display: flex; flex: 1;}
.btn_wrap .btn{margin-right: 16px; padding: 0 30px; height: 40px; line-height: 40px; border-radius: 5px; font-weight: 500;}
.btn_wrap .btn.delete{background: var(--orange); color: #fff;}
.btn_wrap .btn.add{background: var(--main_blue); color: #fff;}
.btn_wrap .btn.hide{background: var(--light_grey_blue); color: var(--grey_purple);}
.btn_wrap .btn.edit{background: var(--light_blue); color: var(--grey_purple);}
.btn_wrap .btn.cancel{background: var(--deep_grey); color: #fff;}
.btn_wrap.right{justify-content: flex-end !important;}

/* =================== FOOTER =================== */

#footer{width: 100%; border-top: var(--main_border);}
#footer .inner{padding: 46px 30px; color: var(--grey); }
#footer ul{display: flex; align-items: center;justify-content: center;}
#footer .ft_link{justify-content: center; margin-bottom: 30px;}
#footer .ft_link li{padding: 0 30px; position: relative;}
#footer .ft_link li a{font-weight: 500;}
#footer .ft_link li::after{position: absolute; top: 50%; right: 0; transform: translate(0, -50%); width: 1px; height: 10px; background: var(--grey); content: '';}
#footer .ft_link li:last-child::after,
#footer .ft_info li:last-child::after{display: none;}
#footer a{color: var(--grey);}
#footer .darkmode_btn a{border-radius: 30px; background: #FFF; box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.20); padding: 16px 29px; color: var(--black); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; transition: all .3s;}
#footer .darkmode_btn .darkmode_ico{width: 16px; height: 17px; background: url(/asset/img/common/ico_darkmode.png) no-repeat center; transition: all .3s;}
#footer .darkmode_btn a:hover{background: #000; color: #fff;}
#footer .darkmode_btn a:hover .darkmode_ico{width: 16px; height: 17px; background: url(/asset/img/common/ico_darkmode_on.png) no-repeat center;}

#footer .darkmode_btn a.dark{background: var(--black); color: var(--grey); box-shadow: none;}
#footer .darkmode_btn a.dark .darkmode_ico{width: 16px; height: 16px; background: url(/asset/img/common/ico_lightmode.png) no-repeat center; transition: all .3s;}
#footer .darkmode_btn a.dark:hover{background: #666666; color: #fff;}
#footer .darkmode_btn a.dark:hover .darkmode_ico{width: 16px; height: 16px; background: url(/asset/img/common/ico_lightmode_on.png) no-repeat center;}

#footer .ft_info_wrap{max-width: 620px; margin: 0 auto;}
#footer .ft_info li{position: relative;padding: 0 16px;}
#footer .ft_info li::after{position: absolute; top: 50%; right: 0; transform: translate(0, -50%); width: 1px; height: 10px; background: var(--grey); content: '';}