﻿/*main home css*/
body img {
    width: 100%;
}

/* common */
.wrapper {
    margin: 0 6.25% 35px;
    position: relative;
}

    .wrapper .s_info {
        display: inline-block;
        letter-spacing: 0;
    }

.btn_link {
    padding-right: 13px;
    background: url(../images/arr-right.png) right center no-repeat;
    font-size: 14px;
    background-size: 5px;
}

/*notch ¼¼·Î*/
/*body{padding-top: calc(constant(safe-area-inset-top));padding-top: calc(env(safe-area-inset-top))}*/
/*notch °¡·Î */
/*body{
    padding-right:constant(safe-area-inset-right);
    padding-left:constant(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
    padding-left:env(safe-area-inset-left);
}*/

.wrap_home {
    padding-top: 30px;
}

.main_top {
    position: relative;
    margin-top: -30px;
}

    .main_top .wrap_txt {
        width: 100%;
        box-sizing: border-box;
        padding: 40px 0;
        position: absolute;
        bottom: 0;
        text-align: center;
        background: rgb(29,29,28);
        background: linear-gradient(0, rgba(29,29,28,1) 5%, rgba(29,29,28,0.5) 35%, rgba(29,29,28,0) 76%, rgba(29,29,28,0) 100%);
    }

    .main_top h2 {
        margin-bottom: 10px;
        font-size: 24px;
        font-family: 'notokr-bold';
        line-height: 24px;
        color: #e6f4f4
    }

    .main_top .s_info {
        font-size: 17px;
        color: #e6f4f4;
    }

.wrap_player .player {
    overflow: hidden;
    position: relative;
}

.wrap_player .img, .wrap_vod .img {
    display: inline-block;
}

.wrap_player .wrap_txt {
    margin-top: 10px
}

    .wrap_player .wrap_txt h3 {
        font-family: 'notokr-medium';
        font-size: 16px;
        line-height: 2
    }

.wrap_player .bg_round {
    display: inline-block;
    min-width: 58px;
    height: 20px;
    margin-right: 7px;
    padding: 0 8px;
    border-radius: 10px;
    background: #fff;
    color: #601986;
    font-size: 11px;
    font-family: 'notokr-medium';
    box-sizing: border-box;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
}

.wrap_player .s_info {
    margin-right: 2px;
    font-size: 12px;
    color: #c9c9c9;
    line-height: 20px;
}

/*content 3*/
.wrap_promo {
    background: #27253f;
    position: relative;
}

    /*.wrap_promo.flag1:after {
        width: 43px;
        height: 50px;
        content: '';
        background: url(../images/flag1.png) no-repeat;
        background-size: 43px;
        position: absolute;
        right: 20px;
        top: 0;
    }

    .wrap_promo.flag2:after {
        width: 43px;
        height: 50px;
        content: '';
        background: url(../images/flag2.png) no-repeat;
        background-size: 43px;
        position: absolute;
        right: 20px;
        top: 0;
    }*/
    .wrap_promo .flag {
        display: block;
        box-sizing: border-box;
        padding-top: 13px;
        padding-left: 9px;
        width: 43px;
        height: 50px;
        background: url(../images/bg_flag.png) no-repeat;
        background-size: 43px;
        position: absolute;
        right: 20px;
        top: 0;
        font-family: 'notokr-medium';
        font-size: 13px;
    }

    .wrap_promo .img {
        overflow: hidden;
    }

    .wrap_promo .wrap_txt {
        padding: 20px;
        font-family: 'notokr-medium';
    }

    .wrap_promo h3 {
        font-size: 18px;
    }

    .wrap_promo .s_info {
        font-size: 12px;
        color: #c9c9c9
    }

/*news*/
.wrap_news {
    position: relative;
}

    .wrap_news h2 {
        margin-bottom: 10px;
        padding-bottom: 11px;
        border-bottom: 1px solid #636362;
        font-size: 20px;
        font-family: 'notokr-medium';
    }

    .wrap_news .btn_link {
        position: absolute;
        top: 5px;
        right: 0;
    }

    .wrap_news li {
        padding: 9px 0 0;
        line-height: 25px;
        font-size: 15px;
        overflow: hidden;
    }

        .wrap_news li strong {
            display: inline-block;
            margin-right: 3px;
            font-family: 'notokr-bold';
            font-weight: normal;
        }

        .wrap_news li .img {
            width: 48%;
            margin-right: 4%;
            float: left;
        }

    .wrap_news .tabs {
        position: absolute;
        overflow: hidden;
        top: 1px;
        right: 0;
        letter-spacing: -0.075em;
    }

        .wrap_news .tabs li {
            padding: 0 8px;
            float: left;
            line-height: 34px;
            font-family: 'notokr-regular';
            font-size: 15px;
            color: #959595;
            position: relative;
        }

            .wrap_news .tabs li span {
                cursor: pointer
            }

            .wrap_news .tabs li:after {
                content: '';
                width: .5px;
                height: 8px;
                background: #636362;
                position: absolute;
                left: 0;
                top: 13px;
            }

            .wrap_news .tabs li:first-child:after {
                background: none
            }

            .wrap_news .tabs li.on span {
                display: block;
                color: #fff;
                font-family: 'notokr-bold';
            }

/*sports*/
.wrap_sports .wrap_txt {
    padding: 16px 0 12px;
}

    .wrap_sports .wrap_txt .title {
        display: block;
        font-size: 16px;
        font-family: 'notokr-medium';
    }

    .wrap_sports .wrap_txt .title_olympic {
        display: block;
        font-size: 15px;
        font-family: 'notokr-medium';
    }

    .wrap_sports .wrap_txt .btn_link {
        position: absolute;
        right: 0;
        bottom: 18px
    }

/*vod*/
.wrap_vod {
    padding: 32% 20px 0;
    background: #27253f;
}

    .wrap_vod:before {
        content: '';
        background: url(../images/vod_top_gra.png) no-repeat;
        background-size: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .wrap_vod .wrap_txt {
        overflow: hidden;
        padding: 16px 0;
        box-sizing: border-box;
        z-index: 1;
        height: 88px;
        position: relative;
    }

        .wrap_vod .wrap_txt .tit_info {
            width: 70%;
            position: absolute;
            left: 0;
        }

    .wrap_vod.wrap_sports .tit_info {
        margin-top: 10px
    }

    .wrap_vod .wrap_txt .title {
        line-height: 1.7;
        font-family: 'notokr-medium';
        font-size: 18px;
    }

    .wrap_vod .wrap_txt .tit_info span {
        display: inline-block;
        margin-right: 3px;
        font-size: 12px;
        color: #c9c9c9;
        letter-spacing: 0;
    }

    .wrap_vod .wrap_txt .btn_vod {
        width: 56px;
        height: 56px;
        text-align: center;
        line-height: 56px;
        color: #fff;
        font-size: 12px;
        font-family: 'notokr-medium';
        background: url(../images/bg-link.png) no-repeat;
        background-size: 56px;
        position: absolute;
        right: 0;
    }

/*banner type B*/
.wrap_banner {
    position: relative;
}

    .wrap_banner .banner_txt {
        position: absolute;
        top: 50%;
        right: 5%;
        color: #fff;
        line-height: 23px;
        margin-top: -23px;
        text-align: right;
    }

        .wrap_banner .banner_txt.center {
            margin-top: -12px;
        }

        .wrap_banner .banner_txt .title {
            font-size: 17px;
            font-family: 'notokr-bold'
        }

        .wrap_banner .banner_txt .date {
            font-size: 12px;
            font-family: 'notokr-regular'
        }

/*banner*/
.wrap_banners {
    padding-top: 10px;
}

    .wrap_banners .thumb_right {
        display: table;
        width: 100%;
        position: relative;
        margin: 16px 0 60px;
        background: #2b2933;
    }

        .wrap_banners .thumb_right .wrap_txt {
            height: 80px;
            display: table-cell;
            width: 100%;
            vertical-align: middle;
            box-sizing: border-box;
            padding: 0 135px 0 18px;
        }

        .wrap_banners .thumb_right .title {
            display: inline-block;
            margin-bottom: 3px;
            font-size: 17px;
            line-height: 21px;
        }

        .wrap_banners .thumb_right .s_info {
            display: block;
            font-size: 12px;
            color: #c9c9c9;
        }

        .wrap_banners .thumb_right .img {
            width: 108px;
            height: 108px;
            position: absolute;
            top: -15px;
            right: 10px;
            overflow: hidden;
            border: 1px solid #555554;
        }

.vod_prev {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
}

[v-cloak] {
    display: none;
}

.img_thumb {
    filter: brightness(60%);
}

.wrap_olymphics {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    margin-top: -21px;
}

    .wrap_olymphics .ico_olymphics {
        display: inline-block;
        vertical-align: top;
        margin-top: 5px;
        width: 42px;
        height: 19px;
        background: url(../images/ico_olymphics.png) no-repeat;
        background-size: 42px;
    }

    .wrap_olymphics .medals {
        display: inline-block;
        margin: 0 17px;
    }

        .wrap_olymphics .medals li {
            display: inline-block;
            margin-bottom: 8px;
            color: #fff;
        }

            .wrap_olymphics .medals li .medal {
                display: inline-block;
                margin: 0 4px;
                width: 23px;
                height: 23px;
                line-height: 23px;
                font-size: 9px;
                font-family: 'notokr-bold';
                background: url(../images/bg_medal.png) 1px 0 no-repeat;
                background-size: 22px;
                vertical-align: top;
            }

        .wrap_olymphics .medals .num {
            display: inline-block;
            margin-right: 3px;
            font-size: 19px;
            font-family: 'notokr-bold';
            line-height: 23px;
            vertical-align: top;
            font-style: italic;
        }

    .wrap_olymphics .stand {
        width: 100%;
        font-family: 'notokr-regular';
        font-size: 12px;
        color: #9dcce2;
    }

    .wrap_olymphics .korea {
        display: inline-block;
        vertical-align: top;
        color: #fff;
        font-size: 16px;
        line-height: 1.4;
        font-family: 'notokr-regular';
    }

        .wrap_olymphics .korea strong {
            font-size: 18px;
            font-family: 'notokr-bold';
        }

.wrap_corona h3 {
    font-family: 'notokr-medium';
    font-size: 20px;
    margin-bottom: 17px;
}

    .wrap_corona h3 .standard {
        display: inline-block;
        margin-left: 6px;
        color: #9c9c9c;
        font-size: 13px;
    }

.wrap_corona .box {
    margin-bottom: 19px;
}

.wrap_corona .c-number {
    padding: 12px 3%;
    text-align: center;
    letter-spacing: -.075rem;
    color: #fff;
    overflow: hidden;
    background: url(../images/bg-covid1.jpg) no-repeat;
    background-size: 100%;
}

.wrap_corona .box:nth-child(2) .c-number {
    background: url(../images/bg-covid2.jpg) no-repeat;
    background-size: 100%;
}

.wrap_corona .c-number > div {
    width: 50%;
    float: left;
    box-sizing: border-box;
}

.wrap_corona .c-number div:first-child {
    border-right: 1px solid #545454;
}

.wrap_corona .c-number strong {
    display: block;
    font-family: 'notokr-bold';
    font-size: 17px;
}

.wrap_corona .c-number span {
    margin-right: 3px;
    font-size: 15px;
    font-family: 'notokr-regular';
}

.wrap_corona .c-number .num-change span {
    margin-right: 2px;
    padding-right: 15px;
    background: url(../images/ico-arr-up.png) right center no-repeat;
    background-size: 12px;
    padding-left: 2px;
}
.scroll-top {
    display: none;
    position: fixed;
    bottom: 40px;
    right: 4.5%;
    width: 40px;
    height: 40px;
    background: url(../images/ico_top.png) no-repeat;
    background-size: 40px;
    text-indent: -9999px;
    z-index:9999;
}
