﻿@charset "utf-8";

.location {display:none;}

.blind {position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); margin: -1px; overflow:hidden;}

/* 기사 작성 기자, 입력, 수정 */
.article-info {display: flex; flex-wrap: wrap; flex-direction: column; align-items: flex-start; margin: 4.5% 0 10px; padding: 0 0 5px 3px; border-bottom: 1px solid #d2d4d7;}
.article-info > div:first-child {color: #666; font-size: 0.85rem; padding-bottom: 5px;}
.article-info-date {display:inline-flex; align-items: center; justify-content: flex-start; gap: 3vw; flex-wrap: wrap;  padding-bottom: 0;}
.article-info-date div {font-size: 0.789rem; color: #666;}
.article-info-date span {color: #666; font-size: 0.8rem;}

/* 기능 icon style */
.icon-box {display: flex; justify-content: space-between;}

/* 구독, SNS 버튼 영역*/
.util-left {display: flex; flex-grow: 1; justify-content: left; gap: min(2vw, 8px);}
/* TTS, 글자 크기, 번역 버튼 영역 */
.util-right {display: flex; flex-grow: 1; justify-content: right; gap: min(2vw, 8px);}

.util-icon {width: min(12vw, 38px); height: min(12vw, 38px);}

/* 구독 버튼 */
.util-left .util-icon:nth-of-type(1) {width: auto;}

/* util button backgroud img */
.btn-util {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    border-radius: 50%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 50%;
}

#icon-subs {position: relative; border-radius: 2em;}

#icon-subs::before {
    content: '';
    width: 100%;
    height: 100%;
    background-image: url("https://img.wowtv.co.kr/MobileStyle/images/news/utilbar/add_24px.png");
    background-repeat: no-repeat;
    position: absolute;
    left: 5px;
    right: 0;
    top: 11px;
    bottom: 0;
    margin: auto;
    background-size: auto 70%;
}

#icon-subs > span {
    margin-left: min(8vw, 25px);
    margin-right: min(2vw, 10px);
    font-size: min(4.8vw, 16px);
    font-weight: bold;
    color: #767676;
}

#icon-share {background-image: url("https://img.wowtv.co.kr/MobileStyle/images/news/utilbar/share.png");}
#icon-tts {background-image: url("https://img.wowtv.co.kr/MobileStyle/images/news/utilbar/speaker.png");}
#icon-size {background-image: url("https://img.wowtv.co.kr/MobileStyle/images/news/utilbar/size.png");}
#icon-trans {background-image: url("https://img.wowtv.co.kr/MobileStyle/images/news/utilbar/trans.png");}

/* tooltip style */
.util-tooltip {
    display: none;
    position: fixed;
    z-index: 999999999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s;
}

.tooltip-content {
    position: fixed;
    width: 100%;
    /*max-height: 70%; 설정시 화면 잘림*/ 
    bottom: 0;
    padding: min(9vw, 30px);
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    background-color: #fff;
    color: #000;
    text-align: left;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s;
}

/* tooltip Animation */
@-webkit-keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

/* 툴팁 닫기 버튼 */
.btn-close-tooltip {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    background: url("https://img.wowtv.co.kr/MobileStyle/images/news/utilbar/close_24px.png") right center no-repeat;
    border: none;
}

/* 툴팁 제목 및 설명 */
.tooltip-content > p {color: #222; font-size: min(5.8vw, 18px); font-weight: 500;}

    .tooltip-content > p > a {color: #222; font-size: min(5.8vw, 18px); font-weight: 500;}

/* 툴팁 내용 */
.tooltip-content > div, .tooltip-content > ul {margin-top: 24px;}

.tooltip-content li {font-size: 0.938em; color: #000; cursor: pointer;}

.tooltip-content li:not(:last-child) {padding-bottom: 9.4px; margin-bottom: 9.8px; border-bottom: 1px solid #e6e6e6;}

.tooltip-content li a, .tooltip-content li button {
    padding: 0;
    color: #000;
    font-size: 0.938em;
    border: none;
    background-color: transparent;
    font-weight: 500;
}

/*** 기능 버튼별 tooltip style ***/
.icons {
    display: inline-block;
    width: min(12vw, 38px);
    height: min(12vw, 38px);
    margin: 0 10px 0 11px;
    /*line-height: 38px;*/
    vertical-align: middle;
    border: 1px solid #e6e6e6;
    border-radius: 50%;
    background-position: center center;
    background-repeat: no-repeat;
}

/* 구독 */
.tooltip-content.subscribe > p:nth-of-type(3) {
    line-height: 1.38;
    font-size: 0.813em;
    color: #888;
}

.icons.hktv-pin {background-image: url("https://img.wowtv.co.kr/MobileStyle/images/news/utilbar/pin.png");}
.icons.youtube {background-image: url("https://img.wowtv.co.kr/MobileStyle/images/news/utilbar/youtube.png");}
.icons.naver {background-image: url("https://img.wowtv.co.kr/MobileStyle/images/news/utilbar/naver.png");}
.icons.daum {background-image: url("https://img.wowtv.co.kr/MobileStyle/images/news/utilbar/daum.png");}
.icons.kakaoplus, .icons.kakaostory {background-image: url("https://img.wowtv.co.kr/MobileStyle/images/news/utilbar/kakao.png");}

.tooltip-content.subscribe > ul > li > button > span {
    font-weight: 500;
    width: calc(100% - 65px);
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

    .tooltip-content.subscribe > ul > li > button > span > span {
        color: #666;
        font-size: 0.938em;
        line-height: 20px;
        font-weight: 500;
        margin: 0;
        padding: 0;
    }

/* SNS 보내기*/
.tooltip-content.share li:last-child {
    margin-bottom: 18px;
}

.icons.url {background-image: url("https://img.wowtv.co.kr/MobileStyle/images/news/utilbar/link.png");}
.icons.facebook {background-image: url("https://img.wowtv.co.kr/MobileStyle/images/news/utilbar/facebook.png");}
.icons.blog {background-image: url("https://img.wowtv.co.kr/MobileStyle/images/news/utilbar/blog.png");}
.icons.email {background-image: url("https://img.wowtv.co.kr/MobileStyle/images/news/utilbar/icon_email.png");}

/* 뉴스 듣기(TTS) 버튼 */
/* 뉴스 듣기 - radio 버튼 디자인 */
.radio-area {margin-bottom: 8px;}
.speak_option {margin-right: 8px;}
.speak_option input[type="radio"] {display: none;}
.speak_option input[type="radio"] + span {
    display: inline-block;
    padding: 0 12px;
    line-height: 33px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    text-align: center;
    color: #000;
    font-size: min(5vw, 15px);
    cursor: pointer;
    font-weight: 500;
}
.speak_option input[type="radio"]:checked + span {background: #f5f5f5; border: 1px solid #ccc;}

#tts-button {width: 100%; /*height: 36px;*/ padding: 5px 0; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 6px; margin-bottom: 10px; font-size: 15px;}

#tts-button > i {display: inline-block; width: 20px; height: 20px; background-image: url("https://img.wowtv.co.kr/MobileStyle/images/news/utilbar/icon_speaker_b.png"); background-position: center center; background-repeat: no-repeat; vertical-align: middle; margin-left: 10px;}

.tooltip-content.tts > div > p:nth-of-type(1) {color: #888; font-size: min(3.8vw, 13px); margin: 7px 0 10px; font-weight: 500;}

.tooltip-content.tts > div > p:nth-of-type(2) {padding: 11px 14px; border-radius: 10px; background-color: #f5f5f5; font-size: min(5vw, 15px); line-height: 1.33; font-weight: 500; color: #000;}

.blinkAudioText {
    -webkit-animation: blinkAudioText 0.8s ease-in-out infinite alternate;
    -moz-animation: blinkAudioText 0.8s ease-in-out infinite alternate;
    animation: blinkAudioText 0.8s ease-in-out infinite alternate;
}

.blinkAudioIcon {
    -webkit-animation: blinkAudioIcon 0.8s ease-in-out infinite alternate;
    -moz-animation: blinkAudioIcon 0.8s ease-in-out infinite alternate;
    animation: blinkAudioIcon 0.8s ease-in-out infinite alternate;
}

@-webkit-keyframes blinkAudioText {
    0% {
        opacity: 1;
        color: #ccc;
    }

    50% {
        opacity: 1;
        color: #bbb;
    }

    100% {
        opacity: 1;
        color: #aaa;
    }
}

@-moz-keyframes blinkAudioText {
    0% {
        opacity: 1;
        color: #ccc;
    }

    50% {
        opacity: 1;
        color: #bbb;
    }

    100% {
        opacity: 1;
        color: #aaa;
    }
}

@keyframes blinkAudioText {
    0% {
        opacity: 1;
        color: #ccc;
    }

    50% {
        opacity: 1;
        color: #bbb;
    }

    100% {
        opacity: 1;
        color: #aaa;
    }
}

@-webkit-keyframes blinkAudioIcon {
    0% {
        opacity: 0.5;
        background-image: url("https://img.wowtv.co.kr/PcStyle/images/news/utilbar/speaker.png");
    }

    100% {
        opacity: 1;
        background-image: url("https://img.wowtv.co.kr/PcStyle/images/news/utilbar/icon_speaker_b.png");
    }
}

@-moz-keyframes blinkAudioIcon {
    0% {
        opacity: 0.5;
        background-image: url("https://img.wowtv.co.kr/PcStyle/images/news/utilbar/speaker.png");
    }

    100% {
        opacity: 1;
        background-image: url("https://img.wowtv.co.kr/PcStyle/images/news/utilbar/icon_speaker_b.png");
    }
}

@keyframes blinkAudioIcon {
    0% {
        opacity: 0.5;
        background-image: url("https://img.wowtv.co.kr/PcStyle/images/news/utilbar/speaker.png");
    }

    100% {
        opacity: 1;
        background-image: url("https://img.wowtv.co.kr/PcStyle/images/news/utilbar/icon_speaker_b.png");
    }
}

/* TTS 툴팁의 랜덤 기사 */
#major-article {margin-top: 10px;}
#major-article p {font-weight: bold; font-size: min(4.8vw, 16px); margin: 22px 0 10px;}
#major-article li {width: 100%; padding: 11px 0; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#major-article li a {font-size: min(4.5vw, 15px);}

/* 글자 크기 버튼 */
.tooltip-content.size > div {display:flex; margin: 18px 0 137.7px;}
.tooltip-content.size > div > button {width: 50%; color: #000; font-size: min(5vw, 20px); font-weight: 500; border: 1px solid #ccc; background-color: transparent; padding: 2% 0;}
.tooltip-content.size > div > button:first-child {border-right: 1px solid transparent; font-size: min(10vw, 36px);}

/* 번역 */
#google_translate_element {display: none !important;}
.tooltip-content.trans > p:last-of-type {margin-top: 25.3px; color: #000; font-weight: bold; font-size: min(4.8vw, 16px);}
.tooltip-content.trans li:first-child {padding-bottom: 11.2px; font-weight: bold;}
.tooltip-content.trans li {font-size: min(4.5vw,15px); font-weight: 500;}