@charset "utf-8";

/*********** Chrome, Safari용 스크롤 바 ***********/
html {
    scrollbar-arrow-color: #efefef;
    scrollbar-Track-Color: #efefef; 
    scrollbar-base-color: #dfdfdf;
    scrollbar-Face-Color: #dfdfdf;
    scrollbar-3dLight-Color: #dfdfdf;         
    scrollbar-DarkShadow-Color: #dfdfdf;
    scrollbar-Highlight-Color: #dfdfdf;
    scrollbar-Shadow-Color: #dfdfdf
};

::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-button:start:decrement, 
::-webkit-scrollbar-button:end:increment {display: none;}
::-webkit-scrollbar-track {background: rgba(0,0,0,.07);}
::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.5); border-radius: 25px; height: 200px;}
:root {accent-color: #ef4d4d;  --height-height : 67px;}

/* 로그인 박스 */
#naverIdLogin {display: none;}
.naverlogin_box {position: relative; width: 100%; height: 52px; line-height: 52px; background-color: #03C75A; border-radius: 5px;} 
.naverlogin_box::before {content: ''; position: absolute; top: 50%; left: 10px; ;transform: translate(0% , -50%); background-image: url(/img/navericon.png); width: 24px; height: 24px;}
.naverlogin_box h2 {text-align: center; color: #fff; font-weight: bold; font-size: 14px;}

.normallogin_box {position: relative; width: 100%; height: 52px; line-height: 52px; background-color: #fff; border-radius: 5px; border: 1px solid #eee;} 
.normallogin_box::before {content: ''; position: absolute; top: 50%; left: 10px; ;transform: translate(0% , -50%); background-image: url(/img/normal_icon.png); width: 24px; height: 24px;}
.normallogin_box h2 {text-align: center; color: #999; font-weight: bold; font-size: 14px;}

/* 이미지 선명도 크롬 사파리 */
img {image-rendering: -webkit-optimize-contrast; backface-visibility: visible; transform: translateZ(0)}

/* 모달 값 공통 */
.verfiValue {display: none;}

/* 임시 프로모션 */
.promotion_banner {width: 100%; display: none;}
.promotion_banner .img_box {width: 100%; height: 100%;}
.promotion_banner .img_box img {width: 100%;}

/* 이벤트 배너 */
.banner_container {max-width: 100%; position: relative; overflow: hidden;} 
.banner_inner {width: 100%; height: 100%;}
.banner_box {width: 100%; height: 100%; position: relative;}

.banner_list {}
.banner_list a {
    position: relative;
    width: 100%;
    height: 60px;
    display: block;
}
.belt_img_box {position: relative; width: 100%; height: 100%; z-index: 1;}
.belt_img_box img {position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); object-fit: cover;}

.belt_pc_box {}
.belt_pc_box img {}

.belt_mobile_box {display: none;}
.belt_mobile_box img {}

.banner_close_btn {position: absolute; top: 10px; right: 10px; z-index: 1;}
.banner_close_btn img {width: 15px; height: 15px;}

.banner_btn {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; display: none;}
.banner_btn_inner {max-width: 1200px; height: 100%; position: relative; margin: 0 auto;}
.banner_btn .banner_prev {position: absolute; top: 50%; left: 20px; transform: translate(-50%, -50%);}
.banner_btn .banner_prev img {width: 25px; height: 25px; opacity: 30%;}
.banner_btn .banner_next {position: absolute; top: 50%; right: 0; transform: translate(-50%, -50%);}
.banner_btn .banner_next img {width: 25px; height: 25px; opacity: 30%;}

/*********** 이벤트 팝업 ***********/
.event_popup {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; 
    z-index: 997;
    display: none;
}
.event_popup.active {display: block;}

.event_popup .event_inner {position: absolute; left: 50%; top: 50%; transform: translate(-50% , -50%); z-index: 999;}
.event_popup .event_inner .event_box {position: relative; overflow: hidden; border-radius: 15px 15px 15px 15px; max-width: 400px; min-width: 300px;  background-color: #fff;}
.event_popup .event_inner .event_custom_box {overflow: hidden; border-radius: 15px 15px 15px 15px; max-width: 400px; min-width: 300px;  background-color: #fff;}

.event_popup .event_inner .event_box .img_box {max-width: 100%; height: auto; cursor: pointer;}
.event_popup .event_inner .event_box .img_box img {width: 100%; height: 100%;}

.event_popup .event_inner .event_box .text_box a {padding: 18px 5px 18px 5px; display: inline-block;}
.event_popup .event_inner .event_box .text_box span {color: #333; font-size: 14px; font-weight: bold;}
.event_popup .event_inner .event_box .text_box::after {content: ''; clear: both; height: 0; visibility: hidden; display: block;}

.event_popup .event_inner .event_box .text_box .left_box {float: left; width: 49%; height: 100%; text-align: center; border-right: 1px solid #eee;}
.event_popup .event_inner .event_box .text_box .right_box {float: right; width: 49%; height: 100%; text-align: center;}

.event_popup .event_inner .event_box .slick-dots {bottom: 15px !important; left: 80% !important;}
.event_popup .event_inner .event_box .slick-dots li button:before {font-size: 40px !important;}

.event_popup .event_inner .event_box .custom_img_box {position: absolute; width: 100%; bottom: 60px; left: 50%; transform: translate(-50% , 0%);}
.event_popup .event_inner .event_box .custom_img_box ul {overflow: hidden; display: flex; flex-wrap: wrap; justify-content: center;}
.event_popup .event_inner .event_box .custom_img_box ul li {max-width: 110px; width: 100%; height: auto; padding-left: 10px;}
.event_popup .event_inner .event_box .custom_img_box ul li:hover img {transform: scale(1.1); transition: 0.3s;}
.event_popup .event_inner .event_box .custom_img_box ul li a {display: block;}
.event_popup .event_inner .event_box .custom_img_box ul li a img {width: 100%; height: 100%; transition: 0.3s;}
.event_popup .event_bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7);}

.event_popup .event_inner .event_box .custom_text_box {
    position: absolute; 
    top: -29px; 
    left: 0; 
    width: 100%; 
    background-color: #333;
    box-sizing: border-box;
    padding: 6px 0;
}
.event_popup .event_inner .event_box .custom_text_box img {width: 90%; height: auto; margin: 0 auto; display: block;}
.event_popup .event_inner .event_box .custom_text_box img {animation: blink-effect 1s step-end infinite;}
@keyframes blink-effect {
    50% {
      opacity: 0;
    }
  }


/*********** 웹 설정 및 공통 이너 값 ***********/
.html_style , .body_style{width: 100%; height: 100%;}
.wrap {position: relative; min-height: calc(100vh - 240px);}
.wrap_hidden{overflow: hidden;}

.mypage_inner {width: 100%; margin: 0 auto; max-width: 1200px; position: relative; display: flex; margin-bottom: 100px; margin-top: 50px;}
.popup_inner {width: 1200px; margin: 0 auto; position: relative;}

.inner {width: 100%; margin: 0 auto; max-width: 1200px; position: relative;}
.inner2 {width: 1200px; margin: 0 auto; max-width: 1200px; position: relative;}
.inner3 {width: 500px; margin: 0 auto;}
.inner4 {width: 450px; margin: 0 auto;}
.inner5 {width: 100%; height: 100vh; display: table-cell; vertical-align: middle; background-color: #F9F9F9; box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.05); position: relative;}
.inner6 {width: 800px; margin: 0 auto;}
.inner7 {max-width: 592px; margin: 0 auto;}

/* 색상 & 서브 색상 */
.m_color {color:#ef4d4d}
.s_color {color:#000}
.s_color2 {color:#eef3fd}
.s_color3 {color:#FBF4F4}

/* 패딩 & 마진값 */
.p_d1 {padding: 10px;}
.p_d2 {padding: 20px;}
.m_g1 {margin: 10px;}
.m_g2 {margin: 20px;}

/* 비디오 공통 */
video {}
video::-internal-media-controls-download-button {display:none;}
video::-webkit-media-controls-enclosure {overflow:hidden;}
video::-webkit-media-controls-panel {width: calc(100% + 30px); /* Adjust as needed */}
    

/* 이모지 */
.emoji_common {font-size: 30px; padding-bottom: 20px;}

/*********** 버튼 및 폰트 공통 ***********/
.main_btn {background-color: #ef4d4d; color: #fff; width: 200px; display: inline-block; height: 50px; line-height: 50px; font-size: 16px; font-weight: bold; border-radius: 10px;}

/*********** 메인 컨텐츠 공통 부분 ***********/
.main_cont {margin-top: 100px;}
.title_box {margin-bottom: 20px; position: relative;}
.title_left .main_title {position: relative; letter-spacing: -0.02em; text-align: left; font-weight: bold; font-size: 22px;}
.title_left .sub_title {color: #ef4d4d; font-weight: bold; display: inline-block; margin-bottom: 5px; font-size: 16px;}
.title_left .main_title::before {display: none; content: ''; position: absolute; width: 4px; height: 60%; background-color: #ef4d4d; top: 4px; left: 0;}
.title_right {position: absolute; right: 10px; top: 20px;}

.title_right .more_btn span {position: relative; color: #999; margin-top: 5px; font-size: 12px; padding-right: 12px; }
.title_right .more_btn span::after {content: ''; position: absolute; background-image: url(/img/viewAll_btn2.png); background-repeat: no-repeat; width: 6px; height: 16px; top: 4px; right: 0px;}

.title_right .m_more_btn {display: none;}
.title_right .m_more_btn span {position: relative; color: #999; margin-top: 5px; font-size: 12px; padding-right: 12px; }
.title_right .m_more_btn span::after {content: ''; position: absolute; background-image: url(/img/viewAll_btn2.png); background-repeat: no-repeat; width: 6px; height: 16px; top: 4px; right: 0px;}


.inner_border {border: 1px solid #eeee; padding-top: 40px; padding-bottom: 40px; border-radius: 15px;}
.m_title {font-weight: bold; font-size: 20px; margin-bottom: 20px;}

/*********** placeholde custom ***********/
input[type='text'] {font-size: 12px; height: 48px;}
input[type='number'] {font-size: 12px; height: 48px;}
input[type='password'] {font-size: 12px; height: 48px;}
select {width: 50%; padding: 10px 0;  color: #b1b1b1; font-size: 14px;}
textarea {padding: 10px 10px; box-sizing: border-box; resize:none;}
input , select , textarea {border: 1px solid #ddd; border-radius: 5px; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s;}
input::placeholder {font-size: 12px; color: #999;}
input::-webkit-input-placeholder {padding-left: 5px; font-size: 12px;}
input:-ms-input-placeholder {padding-left: 5px; font-size: 12px;}
textarea::placeholder{padding-left: 7px; font-size: 12px; color: #999;}
textarea::-webkit-input-placeholderr{padding-left: 7px; font-size: 13px; color: #999;}
textarea::-ms-input-placeholder{padding-left: 7px; font-size: 12px; color: #999;}
input[disabled] {background-color: #f5f5f5;}

/*********** 인풋 , 버튼 공통부분 ***********/
button {border: none; background-color: transparent; background: inherit; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input {box-sizing: border-box; padding-left: 10px;}

.select_box_custom {position: relative;}
.select_box_custom > a {
    display: block; 
    font-size: 12px; 
    padding: 16px 12px 16px 12px; 
    box-sizing: border-box; 
    width: 100%; 
    border: 1px solid #ddd; 
    border-radius: 5px;
    color: #999;
}
.select_box_custom .img_box {
    position: absolute; 
    top: 49%; 
    right: 12px; 
    transform: translate(0 ,-50%);
}
.select_box_custom > ul {
    display: none;
    z-index: 1;
    width: 100%;
    position: absolute;
    top: 52px;
    background-color: #Fff; 
    border-radius: 5px;
    box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.07);
}
.select_box_custom ul li {
    color: #333; 
    width: 100% !important; 
    border-color:  transparent !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
}
.select_box_custom ul li a {
    padding: 16px 12px 16px 12px !important; 
    box-sizing: border-box !important; 
    display: block !important; 
    width: 100% !important;
    height: 100% !important;
    font-size: 13px;
}
.select_box_custom ul li a:hover {background-color: #eee;}


/*********** TRANS . CLEARFIX , COLOR  ***********/
.trans {transition:all 0.5s; -ms-transition:all 0.5s; -webkit-transition:all 0.5s; -o-transition:all 0.5s; -moz-transition:all 0.5s;}
.clearfix {content: ''; clear: both; height: 0; visibility: hidden; display: block;}


/*********** 메인 서브 배너 ***********/
.banner_box1 {background:url(/img/sub_banner2.png); background-size: cover; width: 100%; border-radius: 10px; box-sizing: border-box; height: 130px; background-color: #333;}
.banner_box2 {background-color: #000;}

/*********** 메뉴 서브 배너 ***********/
.list_img {display: none; background: url(/img/banner2.png); width: 100%; height: 460px; background-repeat: no-repeat; background-size: cover; background-position: center;}

/* 팝업박스 */
.popup_box1 {position: absolute; text-align: left; top:0%; left: 50%; transform: translate(-50% ,0%);  margin-top: 80px;}
.popup_box2 {position: absolute; text-align: left; top:50%; left: 50%; transform: translate(-50% ,-50%);}
.popup_box3 {position: absolute; text-align: left; top:50%; left: 50%; height: 100%; text-align: left;  transform: translate(-50% ,-50%);}
.popup_box4 {position: absolute; width: 100%; height: 100%; top:0%; margin-top: 100px;} 

.art_show .popup_box2 {margin-top: 150px; padding-bottom: 20px; top: 0 !important; transform: translate(-50% , 0) !important;}

.popup_box1 .popup_inner {transition: 0.4s; transform: scale(0); -webkit-transform:scale(0); -moz-transform:scale(0);  margin-top: 80px 0; opacity: 0; padding-bottom: 20px;}
.popup_box2 .popup_inner {transition: 0.4s; transform: scale(0); -webkit-transform:scale(0); -moz-transform:scale(0);  opacity: 100;}
.popup_box3 .popup_inner {transition: 0.4s; transform: scale(0); -webkit-transform:scale(0); -moz-transform:scale(0);   margin-top: 80px; opacity: 0; padding-bottom: 20px;}

.popup_box1 .popup_inner.active {transform: scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);  opacity: 1;}
.popup_box2 .popup_inner.active {transform: scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);  opacity: 1;}
.popup_box3 .popup_inner.active {transform: scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);  opacity: 1;}

.win_popup .right_middle {height: 398px; overflow-y: scroll;}
.win_popup .right_middle::-webkit-scrollbar {display: none;}

.matching_box .popup_inner {width: 100%;}
.matching_box .popup_inner .popup_left {border-radius: 25px;}

/* 모달 공통 */
.modal_bg {width: 100%; height: 100%;}
.modal_inner {position: absolute; top: 50%; left: 50%; transform: translate(-50% ,-50%); -webkit-transform: translate(-50% ,-50%); -o-transform: translate(-50% ,-50%); -ms-transform: translate(-50% ,-50%);}
.modal_agree {display: none; z-index: 999; position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.4);}
.modal_agree .modal_container {background-color: #fff; border-radius: 15px;}
.modal_agree .modal_container .modal_cont {padding: 20px 20px;}

.modal_top > h3 {margin-top: 20px; font-size: 18px; font-weight: bold;}

.modal_middle {margin-top: 20px;}
.modal_middle .middle_cont {overflow-y: auto; max-height: 500px; border: 1px solid #ddd; padding: 10px; box-sizing: border-box;}
.modal_middle .middle_cont h3 {font-size: 14px; font-weight: bold; margin: 10px 0 5px 0;}
.modal_middle .middle_cont p {line-height: 1.3;}
.modal_middle .middle_cont .p1_padding {padding-top: 15px;}
.modal_middle .middle_cont .p_color {color: #ef4d4d; font-weight: bold;}

.modal_middle .m_cont2 {margin-top: 10px;}
.modal_middle .middle_cont p {font-size: 13px; line-height: 1.3;}

.modal_bot {margin-top: 20px;}
.modal_bot .bot_cont {margin-left: 5px;}
.modal_bot .bot_cont label {color:#000;}
.modal_bot .bot_cont label.disabled {color: #ddd}

.modal_bot .modal_btn {margin: 30px 0 20px 0; text-align: center;}
.modal_bot .modal_btn button {display: block; background-color: #ef4d4d; width: 100%; height: 52px; line-height: 52px; border-radius: 5px;}
.modal_bot .modal_btn button span {font-weight: bold; color: #fff; font-size: 16px;}

.popup_btn {position: absolute; right: -20px; top: -20px; z-index: 6; cursor: pointer;}
.popup_btn img {width: 50px; height: 50px;}


/*********** pagination ***********/
.pagination {text-align: center; padding-top: 30px;}
.pagination2 {padding-top: 20px !important;}
.pagination ul .page_prev {margin-right: 10px; border: 1px solid #ddd; border-radius: 5px;}
.pagination ul .page_next {margin-left: 10px; border: 1px solid #ddd; border-radius: 5px;}
.pagination ul li {display: inline-block; vertical-align: middle;}
.pagination ul li a {font-size: 13px; font-weight: bold; color: #333; width: 30px; height: 30px; line-height: 30px; display: block; transition: 0.3s; -ms-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; -moz-transition: 0.3s;}
.pagination ul li a.active {border-radius: 5px; background-color: #ef4d4d; color: #fff;}

/*********** 서브 탑 탭 메뉴1 ***********/
.sub_container {padding-left: 10px; padding-top: 60px;}

.sub_title_box {padding-bottom: 30px;}
.sub_title_box h3 {position: relative; font-weight: bold; font-size: 22px; }
.sub_title_box h3::before {display: none; content: ""; position: absolute; width: 4px; height: 15px; background-color: rgb(239, 77, 77); top: 50%; left: 0px; transform: translate(0% , -50%);}
.sub_title_box h3 em {font-size: 12px; font-weight: normal; color: #999}
.sub_title_box h3 em b {font-size: 12px; font-weight: normal;}
.sub_title_box p {font-size: 12px; padding-top: 10px; color: #999;}

.cate_bg::before {content: ''; top: 0; left: -10px; position: absolute; display: block; z-index: 2;  width: 60px; height: 56px; background-image: -webkit-gradient(linear,right top,left top,from(hsla(0,0%,100%,0)),color-stop(50%,#fff)); background-image: linear-gradient(270deg,hsla(0,0%,100%,0),#fff 70%);}
.cate_bg::after {content: ''; top: 0; right: 0px; position: absolute; display: block; z-index: 1;  width: 80px; height: 54px; background-image: -webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),color-stop(50%,#fff)); background-image: linear-gradient(90deg,hsla(0,0%,100%,0),#fff 70%);}

.cate_prv {top: 50% !important; left: -10px !important; box-shadow: rgba(255, 255, 255, 255) 0px 0px 10px !important;}
.cate_next {top: 50% !important; right: 10px; box-shadow: rgba(255, 255, 255, 255) 0px 0px 10px !important;}

.cate_box {position: relative;}
.cate_box ul::after {clear: both; content: ''; display: block; height: 0; visibility: hidden;}
.cate_box ul li {transition: 0.3s; cursor: pointer; float: left; font-weight: bold; text-align: center; width: 125px; height: 40px; line-height: 40px;  font-size: 13px; border-radius: 5px; border: 1px solid #ddd;}
.cate_box ul li:hover {border-color: #ef4d4d; color: #ef4d4d; box-shadow: #eee 2px 3px 3px 2px; background-color: #FBF4F4;}
.cate_box ul li.on {border-color: #ef4d4d; color: #ef4d4d; box-shadow: #eee 2px 3px 3px 2px; background-color: #FBF4F4;}

.cate_box2 {padding-top: 20px;}
.cate_box2::after {clear: both; content: ''; display: block; height: 0; visibility: hidden;}
.cate_box2 .box_left {float: left;}
.cate_box2 .box_right {float: right;}

.media_cate_box ul li {margin-right: 10px !important;}

/*********** 메인 로딩(전체) ***********/
.main_loading {padding-top: 100px; text-align: center;}
.main_loading img {width: 80px; height: 80px;}
.biz_loading {display: none;}

/*********** 모달 로딩(전체 , 사업자) ***********/
.modal_loading {display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%);}
.modal_loading.active {display: block;}
.modal_loading img {width: 75px; height: 75px;}

.biz_loading {display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%);}
.biz_loading.active {display: block;}
.biz_loading img {width: 60px; height: 60px;}

/*********** 스크롤 방지 ***********/
.not_scroll {position: fixed; overflow: hidden; width: 100%; height: 100%;}

/*********** 팝업 닫기 위치 ***********/
.popup_btn_close {position: absolute; top: -30px; right: 12px;}
/* .popup_right .popup_btn_close {display: none;} */
.m_popup_close {display: none;}

/*********** 서브 로딩(참여하기) ***********/
.loading_background { display: none; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); position: fixed; z-index: 999;}
.loading_bar {position: absolute; transform: translate(-50% ,-50%); top: 50%; left: 50%;}
.loading_bar img {width: 75px; height: 75px;}
.loading_text {position: absolute; transform: translate(-50% ,-50%); top: 55%; left: 50%;}
.loading_text p {color: #fff; font-weight: bold;}
.loading_list .text_box {width: 100%; display: inline-block; text-align: center;}
.loading_list .text_box h3 {display: inline-block; width: 700px; text-align: center; margin-top: 20px; padding: 15px 10px; background-color: #ef4d4d; color: #fff; border-radius: 10px; font-weight: bold; font-size: 14px; border: 2px solid #fd8787;}
.parti_loading {padding: 0 0 !important;}

.callback_loading {position: absolute; top: 60%; left: 50%; transform: translate(-50% ,-50%);}
.callback_loading img {width: 90px; height: 90px;}

/*********** 서브 탑 탭 메뉴2 ***********/
.top_menu::after {content: ''; clear: both; height: 0; visibility: hidden; display: block;}
.top_tab {float: left;}
.top_tab > ul > li {margin-right: 5px;; display: inline-block; vertical-align: middle; z-index: 2; position: relative; width: 130px; height: 30px; line-height: 40px; border-radius: 10px; }
.top_tab ul > li > a {display: block; font-size: 13px; position: relative; color: #999; font-weight: bold; padding: 0 10px 3px 0px;}
.top_tab > ul > .select_tab {background-color: #fff; }
.top_tab > ul > .select_tab > a.active {color: #ef4d4d;}
.top_tab > ul > .select_tab > a::after {transition: 0.3s; content: ''; background: url(/img/cate_arrow3.png); background-repeat: no-repeat; position: absolute; width: 13px; height: 6px; right: 13px; top: 18px;}
.top_tab > ul > .select_tab:hover > a::after {transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg);}
.top_tab ul li .tab_depth {padding-top: 5px;}
.top_tab ul li .tab_depth ul {display: none; background-color: #fff; border-radius: 10px; width: 170px; box-shadow: rgb(0 0 0 / 10%) 0px 2px 10px;}
.top_tab ul li .tab_depth ul li {display: block; line-height: 30px; padding: 7px 0 7px 10px;}
.top_tab ul li .tab_depth ul li a {display: block; color: #999; transition: 0.3s; font-size: 12px; color: #2c3e50;}
.top_tab ul li .tab_depth ul li a:hover {color: #ef4d4d;}

/*********** 검색***********/
.search_box {display: block; text-align: right; background-color: #F9F9F9;}
.search_box.active {background-color: #fff;}
.search_box .search_form  {cursor: pointer; border: 1px solid #eee; border-radius: 10px; transition: 0.3s; -ms-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; -moz-transition: 0.3s;}
.search_box .search_form.active {border-color: #ef4d4d;}
.search_box .search_form img {padding-left: 10px; width: 15px; display: inline-block; vertical-align: middle;}
.search_box .search_form .search_input {width: 170px; height: 40px; color: #999; font-size: 12px; display: inline-block; vertical-align: middle; border: 0; background-color: transparent;}
.search_box .search_form .search_input.active {width: 250px;}

.not_search {text-align: center; padding-top: 70px;}
.not_search .img_box {width: 200px;display: inline-block;}
.not_search .img_box img {width: 100%; display: block;}
.not_search h2 {font-size: 20px; font-weight: bold;}
.not_search p {padding-top: 10px; font-size: 14px; line-height: 1.4; color: #999;}

.browse_box {position: relative; width: 100%;} 
.browse_form {width: 100%; box-sizing: border-box;}
.browse_form .box_left {position: absolute; top: 50%; left: 10px; transform: translate(0% , -50%);}
.browse_form .box_right input {
    width: 100% !important; 
    border: 1px solid #eee !important; 
    padding-left: 35px !important; 
    height: 40px !important; 
    line-height: 40px; 
    vertical-align: middle;
    border-radius: 5px; 
    background-color: #fff;
}

.browse_del {position: absolute; right: 5px; top: 50%; transform: translate(-50% , -50%); cursor: pointer; display: none;}
.browse_del.active {display: block;}
.browse_del:hover a img{opacity: 100%; transition: 0.1s;}
.browse_del a img {width: 15px; height: 15px; opacity: 70%;}

/*********** 더보기 css ***********/
.alarm_btn {text-align: center; display: flex; justify-content: center; margin-top: 30px;}
.alarm_btn.on {display: none;}
.alarm_btn a {position: relative; display: flex; justify-content: center; align-items: center; width: 140px; height: 40px;border-radius: 25px; border: 1px solid #ef4d4d; font-size: 14px; color: #ef4d4d;}
.alarm_btn a.on {display: none;}
.alarm_btn a span {font-weight: bold;}
.alarm_btn a img {padding-left: 3px;}

/*********** 비디오 css ***********/
.video_thum {position: relative; text-align: center; width: 100%; padding-top: 56.2378%; height: 0; border-radius: 10px 10px 0 0; background-color: #F9F9F9;}
.contest_thum {padding-top: 75%}
.contest_thum a {display: block;}
.video_thum .thum_inner {position: absolute; width: 100%; height: 100%; top:50%; left: 50%; transform: translate(-50% , -50%); box-sizing: border-box; overflow: hidden;}
.video_thum .thum_inner img {width: 100%; height: 100%; object-fit: cover; transition: 0.3s; -webkit-transition: 0.3s;}

/*********** 비디오 css 이미지 일떄 ***********/
.img_box2 {position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%);}
.img_box2 img {width: 80%; height: auto;}

.loading_list {padding-top: 100px; display: none;}
.loading_list .img_box {width: 100%; text-align: center;}
.loading_list .img_box img {display: inline-block; width: 70px;}
.loading_list .text_box {width: 100%; display: inline-block; text-align: center;}
.loading_list .text_box h3 {display: inline-block; width: 700px; text-align: center; margin-top: 20px; padding: 15px 10px; background-color: #ef4d4d; color: #fff; border-radius: 10px; font-weight: bold; font-size: 14px; border: 2px solid #fd8787;}

/*********** 이미지 애니메이션 ***********/
.transition-effect {opacity: 0; transition: opacity 0.2s ease;}
.transition-effect.show {opacity: 1;}

/*********** 이미지 상세팝업 ***********/
.imgdetail_popup {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 999; display: none;}
.imgdetail_popup.active {display: block;}
.imgdetail_popup .img_inner {position: relative; width: 100%; height: 100%;}
.imgdetail_popup .img_close {position: absolute; top: 25px; right: 25px; cursor: pointer; opacity: 70%; z-index: 998;}
.imgdetail_popup .img_box {background: #000; position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); width: 100vw; height: 100%;}
.imgdetail_popup .img_box ul {display: flex; align-items: center; width: 100vw;; height: 100%; justify-content: center;}
.imgdetail_popup .img_box img {max-height: 100vh; max-width: 100vw; display: inline-block;}
.imgdetail_popup .img_btn {opacity: 100%; position: absolute; background-color: rgba(0, 0, 0,0.6); bottom: 0; left: 0; width: 100%; text-align: center; z-index: 999;}
.imgdetail_popup .img_btn_box {width: 100px; display: inline-block; color: #fff; padding: 14px 0;}
.imgdetail_popup .img_btn_box .left_btn {display: inline-block; vertical-align: top; padding-right: 10px; cursor: pointer; opacity: 70%;}
.imgdetail_popup .img_btn_box .left_btn:hover {opacity: 100%; transition: 0.3s;}
.imgdetail_popup .img_btn_box .text_num {display: inline-block; vertical-align: top;}
.imgdetail_popup .img_btn_box .text_num span {font-size: 14px; font-weight: lighter;}
.imgdetail_popup .img_btn_box .right_btn {display: inline-block; vertical-align: top; padding-left: 10px; cursor: pointer; opacity: 70%;}
.imgdetail_popup .img_btn_box .right_btn:hover {opacity: 100%; transition: 0.3s;}

.imgdetail_popup .img_box.active {overflow-y: auto;}
.imgdetail_popup .img_box.active ul {margin: 0 auto; max-width: 850px !important; align-items: start;} 
.imgdetail_popup .img_box.active ul img {max-width: 100% !important; max-height: 100% !important;}

.img_currentnum {padding-right: 5px;}
.img_lastnum {padding-left: 5px;}

/*********** 팝업 ***********/
.contest_popup {display: none; position: absolute; z-index: 3; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4);}
.contest_popup .popup_box {width: 500px; height: 300px;}
.contest_popup .popup_container2 {position: absolute; transform: translate(-50% ,-40%); position: absolute; top: 40%; left: 50%;}
.contest_popup .popup_box ul li {height: 100%; border-radius: 15px; overflow: hidden;}
.contest_popup .popup_box .popup_img {width: 500px; height: 300px;}
.contest_popup .popup_box .popup_img img {width: 100%; height: 100%;}
.contest_popup .popup_box .popup_text {padding: 40px 0; text-align: center; background-color: #fff;}
.contest_popup .popup_box .popup_text h3 {line-height: 1.4; color: #333; font-weight: bold;}
.contest_popup .popup_box .popup_text h3 span {border-bottom: 1px solid #000;}
.contest_popup .popup_box .popup_text p {padding-top: 10px; font-size:13px; color: #999; font-weight: lighter;}

.contest_popup ul.slick-dots {left: 5%; bottom:10px; transform: translate(0 , -45%);}
.contest_popup ul.slick-dots li {width:8px; height:8px; background-color: #333; margin:0 4px; border-radius: 15px; transition:all 0.5s; -ms-transition:all 0.5s; -webkit-transition:all 0.5s; -o-transition:all 0.5s; -moz-transition:all 0.5s;}
.contest_popup ul.slick-dots li button{width:100%; height:100%; padding:0;}
.contest_popup ul.slick-dots li button:before{display:none}
.contest_popup ul.slick-dots li.slick-active{background:#000; width: 50px;}

/**************** 메인 스켈레톤 ****************/
.contest_skel_list {position: relative; width: 100%; height: 295px;}
.media_skel_list {position: relative; width: 100%; height: 361px;}

.main_skel {width: 285.83px; margin-right: 20px;}
.main_skel_list .skel_box {width: 100%; height: 160px; background-color: #eee;}
.main_skel_list .skel_box1 {width: 100%; height: 285px; background-color: #eee; border-radius: 10px;}
.main_skel_list .skel_box2 {padding: 10px 20px;}
.main_skel_list .skel_box2 .skel_text {width: 50px; height: 15px; background-color: #eee; border-radius: 10px;}
.main_skel_list .skel_box2 .skel_text2 {width: 150px; height: 15px; background-color: #eee; border-radius: 10px; margin-top: 10px;}
.main_skel_list .skel_box2 .skel_text3 {margin-top: 10px;}
.main_skel_list .skel_box2 .skel_text3 .skel_left {display: inline-block; vertical-align: middle; width: 20px; height: 20px; border-radius: 50%; background-color: #eee;}
.main_skel_list .skel_box2 .skel_text3 .skel_right {display: inline-block; vertical-align: middle; width: 59px; height: 15px; background-color: #eee; border-radius: 10px;}
.main_skel_list .skel_box2 .skel_text4 {position: absolute; bottom: 15px; right: 20px; width: 40px; height: 15px; background-color: #eee; border-radius: 10px;}
.main_skel_list .skel_box2 .skel_text5 {width: 100%;; height: 285px; background-color: #eee;}

/**************** 콘테스트 스켈레톤 ****************/
.hold_skel_list {position: relative}
.hold_skel_list .skel_box1 {width: 270px;  height: 202px; background-color: #eee;}
.hold_skel_list .skel_box2 {position: absolute; top: 50%; left: 310px; transform: translate(0% ,-50%);}
.hold_skel_list .skel_box2 .skel_text1 {width: 90px; height: 17px; background-color: #eee; border-radius: 10px; margin-bottom: 10px;}
.hold_skel_list .skel_box2 .skel_text2 {width: 300px; height: 17px; background-color: #eee; border-radius: 10px; margin-bottom: 15px;}
.hold_skel_list .skel_box2 .skel_text3 {width: 60px; height: 17px; background-color: #eee; border-radius: 10px; margin-bottom: 25px;}
.hold_skel_list .skel_box2 .skel_text4 {width: 240px; height: 17px; background-color: #eee; border-radius: 10px;}
.hold_skel_list .skel_box3 {position: absolute; top: 25px; right: 20px;}
.hold_skel_list .skel_box3 .skel_text1 {width: 240px; height: 43px; background-color: #eee; border-radius: 10px;}
.hold_skel_list .skel_box3 .skel_text2 {width: 240px; height: 43px; background-color: #eee; border-radius: 10px; margin: 10px 0;}
.hold_skel_list .skel_box3 .skel_text3 {width: 240px; height: 43px; background-color: #eee; border-radius: 10px;}

/*********** 커뮤니티 스켈레톤 ***********/
.comu_skeleton{-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; max-width: 100%; color: #2c3e50;}
.skeleton {background: #eee;}
.skel_middle {padding : 10px 0;}

.skel_bot2 {padding: 20px 0; position: relative;}
.skel_bot2 .bot_left {position: absolute; left: 0;}
.skel_bot2 .bot_right {position: absolute; right: 0;}

.board_box ul li .postname {width: 50% !important;}
.hot_box ul li .postTitle {width: 70% !important;}

.postItem {padding: 20px 16px; box-sizing: border-box; margin-bottom: 15px; background-color: #fff; box-shadow: 6px 6px 6px #ddd; border-radius: 5px;}
.postItem-wrap{position: relative; width: 100%; margin: 0; overflow: hidden;}
.postcate {display: inline-block; width: 40px; height: 20px; background: #eee; border-radius: 5px; margin-right: 5px;}
.postlike {position: absolute; top: 14px; right: 12px; display: inline-block; width: 35px; height: 20px; background: #eee; border-radius: 5px; margin-right: 5px;}
.postname {display: inline-block; width: 40px; height: 20px; background: #eee; border-radius: 5px; margin-right: 5px;}
.postdate {display: inline-block; width: 80px; height: 20px; background: #eee; border-radius: 5px; margin-right: 5px;}
.postThumb{width: 180px; height: 100%; background: #eee; margin: 0 !important;}
.postContent{display: flex; flex-wrap: wrap; align-content: space-around; align-items: center;width: calc(100% - 180px); height: 100%; padding: 0 0.5rem; margin: 0}
.postTitle{width: 30%; height: 20px;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 5px;}
.postBody{font-size: 1.1rem; width: 70%; height: 20px; display: -webkit-box; text-overflow: ellipsis;  -webkit-line-clamp: 3; overflow: hidden; -webkit-box-orient: vertical; border-radius: 5px;}

.skeleton-ui{width: 100%; height: 100%; background: #000;}
.skeleton-bar{
    position: absolute;
    top: -10px; left: 0px;
    width: 30px;
    height: 100%;
    background: #fff;
    transform: rotate(15deg);
    filter: blur(15px);
    -webkit-filter: blur(15px);
    animation: skeletonMove 2s infinite;
}
@keyframes skeletonMove {
    from{
        left: -0px;
    }
    to{
        left: calc(100% - 40px);
    }
}

@media screen and (max-width: 600px){
    .banner_box {height: auto;}
}


/*********** 제작자 포트폴리오 썸네일 ***********/
.skeleton-bar2{
    position: absolute;
    top: -10px; left: 0px;
    width: 30px;
    height: 100%;
    background: #fff;
    transform: rotate(15deg);
    filter: blur(15px);
    -webkit-filter: blur(15px);
    animation: skeletonMove 1s infinite;
}
@keyframes skeletonMove {
  from{
      left: -0px;
  }
  to{
      left: calc(100% - 40px);
  }
}

/*********** 음원 스켈레톤 ***********/
.source_skel_list {box-sizing: border-box; padding: 15px 0px; position: relative;}
.source_skel_list .skel_box {display: inline-block; vertical-align: middle;}
.source_skel_list .skel_box .skel_img {width: 70px; height: 70px; border-radius: 10px; background-color: #eee;}
.source_skel_list .skel_box2 {padding-left: 10px;}
.source_skel_list .skel_box2 .skel_text {width: 150px; height: 15px; background-color: #eee; border-radius: 10px;}
.source_skel_list .skel_box2 .skel_text2 {width: 70px; height: 15px; margin-top: 7px; background-color: #eee; border-radius: 10px;}
.source_skel_list .skel_box3 {padding-left: 50px;}
.source_skel_list .skel_box3 .skel_tag {display: inline-block; vertical-align: middle; width: 50px; height: 20px; background-color: #eee; border-radius: 10px;}
.source_skel_list .skel_box4 {padding-left: 100px;}
.source_skel_list .skel_box4 .skel_text {width: 280px; height: 15px; background-color: #eee; border-radius: 10px;}
.source_skel_list .skel_box4 .skel_text2 {width: 100px; height: 15px; background-color: #eee; border-radius: 10px; margin-top: 7px;}
.source_skel_list .skel_box5 {padding-left: 50px;}
.source_skel_list .skel_box5 .skel_text {width: 30px; height: 15px; background-color: #eee; border-radius: 10px;}
.source_skel_list .skel_box6 {position: absolute; right: 15px; top: 50%; transform: translate(0% , -50%);}
.source_skel_list .skel_box6 .skel_option {margin-right: 5px; width: 25px; height: 25px; border-radius: 50px; background-color: #eee; display: inline-block; vertical-align: middle;}


@media screen and (max-width: 1200px) {
    .popup_btn_close {display: none;}
    .m_popup_close {display: block;}

    .hold_skel_list .skel_box1 {display: none;}
    .hold_skel_list .skel_box2 {height: 140px; position: static; transform: translate(0 , 0); padding: 20px 0 0 20px;}
    .hold_skel_list .skel_box3 {display: none;}

    .hold_skel_list .skel_box2 .skel_text2 {width: 270px;}
    .hold_skel_list .skel_box2 .skel_text4 {width: 240px;}
}

@media screen and (max-width: 768px) {

    /* 공통 */
    .main_skel {width: 251px;}

    .title_right .m_more_btn {display: none;}


    /* 카테고리 공통 */
    .cate_box ul li {width: 100px !important; height: 35px !important; line-height: 35px !important;}


    /* 아트레이터 프로신청 */
    .launch_form {margin-top: 0;}
    .modal_inner {width: 100% !important; box-sizing: border-box; padding: 0 10px;}
    .modal_middle .middle_cont {max-height: 200px !important;}
    .launch_art_type ul {display: flex; flex-direction: column; padding-top: 20px !important;}
    .launch_art_type ul li {padding-bottom: 15px;}


    .event_popup .event_inner .event_box .custom_img_box ul li {max-width: 90px;}

    .banner_inner {width: 100%; max-width: 768px;}
    .banner_list a {}
    .belt_img_box {max-width: 640px; margin: 0 auto;}
    .belt_img_box img {position: static; width: 100%; height: 100%; transform: none; object-fit: contain;}

    .belt_pc_box {display: none;}
    .belt_mobile_box {display: block;}
}

@media screen and (max-width: 480px) {
    .event_popup .event_inner .event_box .custom_img_box ul li {max-width: 80px;}
    .event_popup .event_inner .event_box .custom_text_box {top: -25px;}
}