@import "pin.css";

body {
    background-color: white;
    /*모바일 image, link long click 방지*/
    -webkit-touch-callout: none;
}

img {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

.board_container:not(.select-none) img {
    -webkit-touch-callout: initial;
}

.no_drag {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@supports (-webkit-touch-callout: none) {
    content {
        height: -webkit-fill-available;
    }
    /*html {*/
    /*    height: -webkit-fill-available;*/
    /*}*/
}



.avatar-container {

}

.avatar-container canvas {
    /*position: relative !important;*/
    /*width: 200px !important;*/
    /*height: 200px !important;*/
    /*max-width: 200px !important;*/
    /*margin: auto;*/
}

/*input*/

.outline_field {
    max-width: 327px;
}

@media(max-width: 768px) {
    .outline_field {
        width: 100%;
        max-width: unset;
    }
}

.outline_field .btn_check {
    position: relative;
    right: 0;
    top: 0;
    margin: 0 0 0 8px;
    color: #333;
}

.input_icon img {
    width: 16px;
    height: 16px;
}

.input_box input.MuiInputBase-input {
    height: unset;
}

.MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-formControl {
    height: 56px;
}

/*기본 border 삭제*/
.login_slide .input_box input:focus,
.MuiFormControl-root input,
.MuiFormControl-root input:focus,
.MuiFormControl-root .login_slide .input_box input:focus {
    border: unset !important;
}


.login_slide .input_box input:focus,
.MuiFormControl-root input,
.MuiFormControl-root input:focus,
.MuiFormControl-root .login_slide .input_box input:focus {
    margin-top: 8px;
    padding-top: 8px;
    /*background-color: white;*/
}

.MuiFormControl-root input.MuiAutocomplete-input {
    margin: 0
}

/*input 속성 수정*/
.input_box .single{
    margin: 0;
}

.input_box .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-formControl input {
    /*width: 100%;*/
}

/*Label Font*/
.MuiFormControl-root .MuiTextField-root label {
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
}

/*input font*/
.input_box .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-formControl input,
.MuiFormControl-root .MuiTextField-root .MuiInputLabel-shrink  {
    color: #333;
}

.outline_field .outline_field_message {
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
}

/*Default*/
/*border*/
.MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-formControl:not(.Mui-disabled) fieldset.MuiOutlinedInput-notchedOutline  {
    border: 1px solid #EAEAEA;
    border-radius: 8px;
}

/*label*/
label.MuiInputLabel-root.MuiInputLabel-formControl,
.MuiFormControl-root label,
.MuiFormControl-root .MuiTextField-root label.Mui-focused {
    color: #AAAAAA;
}




/*Focused*/
/*border*/
.MuiInputBase-root.MuiOutlinedInput-root.Mui-focused.MuiInputBase-formControl fieldset.MuiOutlinedInput-notchedOutline  {
    border-color: #333333;
}

/*label*/
label.MuiInputLabel-root.MuiInputLabel-formControl.Mui-focused,
.MuiFormControl-root label,
.MuiFormControl-root .MuiTextField-root label.Mui-focused {
    color: #333333;
}



/*Disabled*/
/*border*/
.Mui-disabled fieldset.MuiOutlinedInput-notchedOutline {
    background: #F6F6F6;
    border: unset;
}

/*input*/
.Mui-disabled input {
    z-index: 1;
}

/*Error*/
/*border, background*/
.MuiFormControl-root.error fieldset.MuiOutlinedInput-notchedOutline {
    border: 1px solid #FF334B !important;
}

/*label*/
.MuiFormControl-root.error label.MuiInputLabel-root.MuiInputLabel-formControl,
.MuiFormControl-root.error label  {
    color: #FF334B !important;
}

.outline_field.error .outline_field_message {
    color: #FF334B !important;
}

/*Success*/
.Mui-disabled fieldset.MuiOutlinedInput-notchedOutline {
    background: #F6F6F6;
    border: unset;
}


/*Label*/
.Mui-disabled fieldset.MuiOutlinedInput-notchedOutline {
    background: #F6F6F6;
    border: unset;
}

/*.MuiInputAdornment-root .MuiCollapse-root.MuiCollapse-entered {*/
/*    width: 100% !important;*/
/*}*/



/*email dropdown*/

/*.input_select_box {*/
/*    width: 100%;*/
/*    height: 338px;*/
/*    overflow-y: auto;*/
/*    overflow-x: hidden;*/
/*    border: 1px solid #eaeaea;*/
/*    border-radius: 8px;*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 72px;*/
/*    z-index: 999;*/
/*    background: #fff;*/
/*    box-sizing: border-box;*/
/*    margin-top: -8px;*/
/*    display: none;*/
/*}*/

/*.input_select_box li {*/
/*    width: 100%;*/
/*    padding: 12px 16px;*/
/*    cursor: pointer;*/
/*}*/

/*.input_select_box li .domain {*/
/*    width: 65%;*/
/*    display: inline-block;*/
/*}*/

/*.input_select_box li:hover {*/
/*    background: #f3fbff;*/
/*}*/

/*.input_select_box.active {*/
/*    display: block;*/
/*}*/



/*checkbox*/

/*checked만 높이가 있어 움찔거림 방지*/
.all_agree_wrap input[type="checkbox"]+label {
    height: 24px;
}

.agree_wrap input[type="checkbox"]:checked+label:after {
    border-top: 1px solid #008cdc;
    border-right: 1px solid #008cdc;
    transition: 0.5s;
}


/* email pin */

.one_col_wrap  input.one_col_pw{
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    color: #000;
    line-height: 100%;
}

/*nav*/

.nav_wrap .nav li a.active {
    color: #008cdc;
    border-bottom: 3px solid #008cdc;
    transition: 0.1s;
}

.mobile_nav li a.active {
    /*
        https://codepen.io/sosuke/pen/Pjoqqp
        #008cdc
    */
    filter: invert(46%) sepia(55%) saturate(6665%) hue-rotate(181deg) brightness(99%) contrast(101%);
    transition: 0.1s;
}

.mobile_nav {
    /*text long click 방지*/
    -webkit-user-select: none;
}

a:active {
    background-color: transparent !important;
    -webkit-tap-highlight-color: transparent;
}

/** 로그인, 검색 sidebar 항상 열려있는 스타일로 **/
.sidebar.open {
    position: initial;
    opacity: 1;
    right: 0;
    transition: unset;
}

.login_slide ul li:first-child:after {
    right: -10px;
}

/** header는 로그인보다 낮고, 검색창보다 높아야함 **/
#header {
    z-index: 1300;
}

@media (max-width: 768px) {

    /** 로그인 Drawer 모바일에서 풀사이즈 **/
    .MuiDrawer-paperAnchorRight {
        width: 100%;
    }
}

/*header*/
/*헤더 아이콘 여백 문제로 다시 선언*/
.nav_wrap > .global > li {
    margin: 0 16px !important;
    display: flex;
    justify-content: center;
}

.profile {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    object-fit: cover;
}


.profile {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    object-fit: cover;
}


img.profile_img {
    width: 80px;
    height: 80px;
    border-radius: 80px;
    object-fit: cover;
}

.login_after .profile {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .login_after .profile {
        width: 24px;
        height: 24px;
        border-radius: 24px;
        object-fit: cover;
    }
}

/*thumbnail card*/
.text_info .ch_name:after {
    content: unset;
}

.text_info .ch_name:not(:last-child):after {
    display: inline-block;
    clear: both;
    content: "";
    background: #aaa;
    width: 1px;
    height: 10px;
    position: absolute;
    right: -10px;
    top: 2px;
}

.info_icon img {
    width: 16px;
    height: 16px;
}

.info_icon span {
    font-size: 12px;
    font-weight: 300;
}

.thumbnail {
    background: unset;
    height: auto;
    /*aspect-ratio: 16/9;*/
    padding: unset;
}

.thumbnail .thumbnail_img {
    border-radius: 16px;
    margin: auto;
    height: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.thumbnail .blur {
    border-radius: 16px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(1px);
}

.timer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.top_label .text.top {
    font-size: 18px;
}

.timer.countdown {
    font-size: 70px;
}

.timer.schedule {
    font-size: 50px;
}

.timer.waitOpen {
    font-size: 35px;
}

/*pipplayer*/
.foot_play_box {
    position: fixed;
    /*일반 컴포넌트 중 zIndex있는 항목들이 있음*/
    z-index: 100;
}


/*join*/

.domain_li {
    display: flex;
    align-items: center;
}

.domain {
    word-break: break-all;
}

.term-popup {
    height: 800px;
    display: flex;
}

.term-popup .inner_box {
    overflow: auto;
}

/*회원유형에서 배경과 내용 분기가 달라 680으로 통일*/
@media (max-width: 680px) {
    .join_box .user_Staff {
        width: 100%;
    }
}

/*popup*/

.popup-z-index {
    z-index: 2000;
}

.hidden {
    display: none !important;
}

/*tooltip*/
img[title] {
    cursor: pointer;
}

.no_read_alert_box li.dis:hover {
    background: white !important;
    transition: none !important;
}

.no_read_alert_box li.dis a {
    color: #999;
    cursor: default;
}

.no_read_alert_box h5 {
    padding-right: 0 !important;
}


.upload_file span:after {
    all: unset;
}

.file_item {
    font-weight: 300;
}

/*loading*/

.loading svg circle {
    color: #008cdc !important;
}

.iframe_fill {
    width: 100%;
    height: calc(100vh - 96px - 89px);
}

@media (max-width: 768px) {
    .iframe_fill {
        width: 100%;
        height: calc(100vh - 63px - 69px);
    }

}

.rel_box .thumb {
    background: unset !important;
}

#tab3.tab_content {
    overflow-y: unset;
}


@media (max-width: 768px) {
    #tab3.tab_content {
        overflow: hidden;
    }
}

.video_rel .thumbnail {
    aspect-ratio: 16/9;
    height: unset;
}

@media (max-width: 400px) {
    .video_rel .rel_text {
        margin-top: 12px;
    }

    .thumbnail {
        height: unset;
        /*min-height: 160px;*/
    }

    .video_rel .thumb {
        height: auto !important;
        aspect-ratio: 16/9;
    }


}
.thumbnail .play_time {
    font-family: Pretendard, sans-serif;
    background: rgba(0, 0, 0, 0.6);
    font-weight: 400;
    width: unset;
    padding: 0 8px;
}

.thumbnail .bottom_left_label {
    font-size: 12px;
    color: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    position: absolute;
    left: 12px;
    bottom: 12px;
    font-family: Pretendard, sans-serif;
    background: rgba(0, 0, 0, 0.6);
    font-weight: 400;
    padding: 0 8px;
}

.thumbnail .bottom_right_label {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    align-items: center;
}

.thumbnail .bottom_right_label .label {
    background: #fff;
    border-radius: 9999px;
    font-size: 12px;
    padding: 0 8px;
    height: 24px;
    display: flex;
    align-items: center;
}

.thumbnail .top_right_label {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
}

.thumbnail .top_right_label .label {
    background: #fff;
    border-radius: 9999px;
    font-size: 12px;
    padding: 0 8px;
    height: 24px;
    display: flex;
    align-items: center;
}


.loginIn {
    position: relative;
    z-index: 1;
}

.info_tit {
    /*    height: 48px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .wetube_read_tit {
        text-align: initial;
        font-size: 24px;
        font-weight: 700;
    }

}

/*oembed 항목 크기 최대로 키움*/
oembed > iframe {
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
}

.term-popup {
    height: 100% !important;
}

.term-popup .inner_box {
    max-width: 1000px;
    width: 100%;
}

.term-popup .join_box {
    max-height: 700px;
    overflow: auto;
}

.term-popup .pri_btn {
    max-width: 320px;
    flex: 0 0 auto;
}

.term-popup .inner_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 64px;
}

@media (max-width: 680px) {
    #term_detail_portal {
        top: calc(63px + 1px);
        bottom: 68px;
    }

    .term-popup {
        height: 100% !important;
    }

    .term-popup .inner_box {
        padding: 24px;
    }
}

@media (max-width: 1200px) {
    .cont_tit {
        font-size: 24px;
    }
}

.live_box .inner {
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .live_box .inner {
        margin: 0;
        padding: 0;
    }
}

.thumbnail .lock.shadow {
    filter: drop-shadow(2px 2px 4px #000);
}

.tooltip-text {
    font-family: Pretendard, sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: white;
}

.popup_join2 {
    width: unset !important;
}

.app-download-text {
    font-family: 'Pretendard', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    word-break: keep-all;
}

.url_input {
    display: flex;
    align-items: center;
}

.url_input input {
    flex: 1;
    width: 100%;
}

.live_text_border {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.left_box .my_logout {
    font-size: 16px;
    font-weight: 400;
}

.read {
    color: #AAAAAA;
}

.rel_box.overflow-hidden {
    overflow: hidden !important;
}

.player_portal .live_text_border {
    font-weight: 700;
    color: #fff;
    font-size: 64px;
    line-height: 1;
}

.player_portal .live_text_border2 {
    font-weight: 700;
    color: #fff;
    font-size: 30px !important;
    line-height: 1;
}

.player_portal .live_text_border3 {
    font-weight: 700;
    color: #fff;
    font-size: 140px;
    line-height: 1;
}

@media (max-width: 768px) {
    .player_portal .live_text_border {
        font-size: 32px;
    }

    .player_portal .live_text_border2 {
        font-size: 20px !important;
    }

    .player_portal .live_text_border3 {
        font-size: 80px;
    }
}
@media (max-width: 400px) {
    .player_portal .live_text_border {
        font-size: 20px;
    }
    .player_portal .live_text_border2 {
        font-size: 15px !important;
    }
    .player_portal .live_text_border3 {
        font-size: 60px;
    }
}


.pin_number input::-webkit-outer-spin-button,
.pin_number input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.pin_number input[type=number] {
    -moz-appearance: textfield;
}

/*event*/
body:has(#root .event-landing) {
    height: 100vh;
}

#root:has(.event-landing) {
    height: 100%;
}


/*board*/

.post-grid a:visited h5 {
    color: #aaaaaa;
}

.big_thumbnail {
    max-width: 400px;
}

.big_thumbnail .thumbnail_img {
    aspect-ratio: 1 !important;
    width: 100%;
    height: auto;
}

.big_thumbnail .thumbnail {
    aspect-ratio: 1 !important;
}

.inner {
    padding-top: 1rem;
}

/*썸네일 최소 크기가 380px인데, 화면이 380보다 작아지면 기본 크기 해제 */
@media (max-width: 380px) {
    .event_wrap .thumbnail {
        height: unset !important;
    }
}



@media (max-width: 768px) {
    .event_wrap .thumbnail {
        /*height: unset !important;*/
    }

    .check_td {
        display: grid !important;
        position: absolute;
        left: 0;
    }
    .chw_table tr.tr_wrap {
        padding-left: 45px;
    }
}




/*banner*/


.menu_banner_p {
    width: 100%;
    display: block;
    height: 240px;
    object-fit: cover;
}

.menu_banner_m {
    display: none;
}

.slick-slide {
    max-width: 1200px;
}

@media (max-width: 1024px) {
    .menu_banner_p {
        display: none;
    }
    .menu_banner_m {
        display: block;
        height: 240px;
        object-fit: cover;
    }
}


/* 2023.08.08 고객 요청 여백 변경 */

#mainvisual {
    margin-bottom: 16px;
    margin-top: 48px;
}

#mainvisual .slick-dots {
    margin-top: 24px !important;
}

@media (max-width: 768px) {
    #mainvisual {
        margin-top: 6px;
    }

    #mainvisual .slick-dots {
        margin-top: 20px !important;
    }

    .new_cont {
        padding: 20px 0 48px;
    }
}

.editor_menu_input button:last-child {
    z-index: 1!important;
}

.editor_menu_input input {
    color: #000000!important;
    -webkit-text-fill-color: #000000!important;
}

.editor_select_box.input_select_box {
    height: auto!important;
}


/* 20240725 팝업 추가 */
.privacyPopup {
    border: 1px solid #000;
    height: max-content;
    font-size: 19px;
}

.privacyPopup.innerPopup {
    width: 600px;
}

.privacyPopup.mobile {
    top: 4.2rem;
    width: 98%;
}

.privacyPopup.mobile div {
    font-size: 12px!important;
}

.privacyPopup a {
    height: 100%;
    font-size: 16px!important;
    font-weight: 700!important;
    text-decoration: underline;
    color: #008cdc;
}

.privacyPopup.mobile a {
    font-size: 12px!important;
}

.privacyPopup .inner_box {
    max-height: 680px;
}

.privacyPopup.mobile .inner_box {
    max-height: 460px;
}