﻿.LongThinAD {
    margin:0 10px 10px 10px;
}
.BlogIntroContainer {
    padding: 0 10px;
}
.VideoFiveColumn {
    position:relative;
    float:left;
    margin-bottom:20px;
    width:100%;
}
    .VideoFiveColumn .TopicColumn {
        width:20%;
        float:left;
        overflow:hidden;
    }
    .VideoFiveColumn a {
        border:1px solid #dedcdc;
        display:block;
        position:relative;
        margin:5px;
        padding:5px;
    }
        .VideoFiveColumn a .ImageFrame {
            position:relative;
        }
        .VideoFiveColumn a img {
            display:block;
            margin:auto;
            max-height:100%;
            max-width:100%;
            position:absolute;
            top:0;
            bottom:0;
            left:0;
            right:0;
        }
        .VideoFiveColumn a .BlogTitle {
            font-weight:bold;
            display:block;
        }
        .VideoFiveColumn a:hover .BlogTitle {
            color: #dedcdc;

        }
.ArticleContainer {
    margin-bottom:20px;
}
    
    
.PopularArticleContainer {
    margin-bottom:20px;
    text-align:center;
}
    .PopularArticleContainerLink {
        display:inline-block;
        margin: 10px 0;
    }
    .PopularArticleContainerLink:hover {
        color:#dedcdc;
    }
.AllNewArticleArticleContainer {
    margin-bottom:30px;
}
    .AllNewArticleArticleContainer a {
        display:block;
    }
    .AllNewArticleArticleContainer a:hover {
        color:#dedcdc;
    }

.Article {
    position:relative;
    border-bottom:1px dotted #dedcdc;
    height:125px;
    padding-bottom:10px;
    overflow:hidden;
}
.VideoContent {
    position:relative;
    border-bottom:1px dotted #dedcdc;
    /*height:220px;*/
    padding:10px;
    overflow:hidden;
}
    .VideoContent a {
        display: block;
        padding: 0 5px;
    }
    .VideoContent a:hover {
        color:#dedcdc;
    }
.AllNewArticle {
    position:relative;
    border-bottom:1px dotted #dedcdc;
    padding:8px 6px;
    overflow:hidden;
}
.PopularArticle {
    position:relative;
    border-bottom:1px dotted #f1efef;
    height:125px;
    padding:2px;
    overflow:hidden;
    width: 150px;
    text-align: center;
    background-color:#f1efef;
}
    .PopularArticle:hover {
        color:#dedcdc;
    }
.PopularBlogName {
    position:absolute;
    height:100%;
    left:0;
    top:0;
    height:100px;
    position:relative;
    background-color: white;
}

    .PopularBlogName img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        display:block;
        max-width:100%;
        max-height:100%;
    }
.BlogName {
    position:absolute;
    width:150px;
    height:100%;
    left:0;
    top:0;
}
    .BlogName .BlogImage {
        width:150px;
        height:190px;
        position:relative;
        margin-top:10px;
    }
    .BlogName img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        display:block;
        max-width:100%;
        max-height:100%;
    }
    .BlogName .BlogTitle {
        text-align:center;
        font-weight: bold;
    }
.PopularBlogTitle {
    margin-top:4px;
}
.AllNewArticleBlogName {
    position:absolute;
    padding: 8px 10px;
    width:150px;
    left:0;
    top:0;
}
.BlogContent, .BlogContentLong {
    margin-left: 150px;
    margin-right: 10px;
    padding-top:10px;
    height:150px;
    text-align:left;
    font-weight: bold;
}
.AllNewArticleBlogContent {
    margin:0 100px 0 170px;
    padding-top:8px;
    text-align:left;
}
.BlogContentLong {
    margin-right:0;
}
.ImageContainer {
    height:115px;
    padding:5px 0;
    top:5px;
}
    .BlogContent .BlogSubject, .BlogContentLong .BlogSubject {
        font-weight:bold;
        font-size:14px;
        margin-bottom:5px;
    }
.AllNewArticleBlogSubject {
    font-weight:bold;
    font-size:13px;
}
.BlogDate {
    color: #808080;
    font-size: 11px;
    font-weight: normal;
    padding: 0 5px;
}
.AllNewArticleBlogDate {
    position:absolute;
    right:0;
    top:0;
    text-align:right;
    font-weight:bold;
    color:#808080;
    padding-top:8px;
    padding-right: 10px;
}
/* Start Blog Detail for Blog Intro Page */

#BlogTitleContainer {
    position:relative;
    margin:20px 10px;
    height:100px;
    font-size:14px;
}
    #BlogTitleContainer .BlogImgContaner {
        width: 150px;
        float: left;
        height: 100px;
        position: relative;
        overflow:hidden;
    }
    #BlogTitleContainer .BlogOwnerImg {
        max-width:100%;
        max-height:100%;
        position:absolute;
        margin:auto;
        top:0;
        left:0;
        right:0;
        bottom:0;
    }
    #BlogTitleContainer .BlogTitleSubContainer {
        margin-left:165px;
        height:100px;
        position:relative;
    }
    #BlogTitleContainer .BlogTitle {
        font-weight:bold;
        font-size:18px;
    }

    #BlogTitleContainer .BlogOwnerName {
        display:inline-block;
        font-weight:bold;
        margin-right:20px;
        margin-top:10px;
    }
    #BlogTitleContainer .PostDate, .BlogComment .PostDate {
        display:inline-block;
        color:#808080;
    }
    #BlogTitleContainer .BlogLink {
        display: inline-block;
        padding: 10px;
        margin-top: 10px;
        position: relative;
        left: -10px;
    }
    #BlogTitleContainer .BlogLink:hover {
        color:#dedcdc;
    }
        #BlogTitleContainer .BlogLink a {
            color:#4978b1;
        }
#BlogContainer {
    font-size:16px;
    line-height:24px;
    margin:0 10px;
    overflow: auto;
}
    #BlogContainer img {
        margin:20px auto 0 auto;
        display:block;
        background-color: #dedcdc;
        max-width:100%;
    }
#BlogComments {
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid #dedcdc;
}
.BlogComment {
    padding-bottom:20px;
    margin-bottom:20px;
    border-bottom:1px dotted #dedcdc;
    position:relative;
}
    .BlogComment img {
        position:absolute;
        top:0;
        height:60px;
    }
    .BlogComment .CommentorName {
        font-weight:bold;
    }
#BlogComments .CommentContainer {
    margin-left:100px;
}
/* End Blog Detail for Blog Intro Page */
.HorizontalPadding6 {
    padding: 0 6px;
}
.VideoSeriesList {
    margin: 10px 0px 20px 0;
}
.VideoSeriesList li{
    height: 20px;
    font-weight: normal !important;
    padding: 0 5px;
}
.FontLightGray {
    color: #808080;
}
.VideoCategoryName {
    padding: 0 5px;
    color: #808080;
}
.VideoTitle {
    font-size: 14px;
}
.VideoUCCContent {
    border-bottom: 1px dotted #DEDCDC;
    float: left;
    height: 100px;
    overflow: hidden;
    padding-bottom: 10px;
    position: relative;
    width: 50%;
}

.VideoUCCName {
    position:absolute;
    width:150px;
    height:100%;
    left:0;
    top:0;
}
    .VideoUCCName .VideoUCCImage {
        height: 80px;
        margin-top: 10px;
        position: relative;
        width: 150px;
    }
    .VideoUCCName img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        display:block;
        max-width:100%;
        max-height:100%;
    }
    .VideoUCCName .BlogTitle {
        text-align:center;
        font-weight: bold;
    }
.HQContent {
    width: 100%;
    height: 1650px;
}
.VideoPlayerWrapper {
    text-align: center;
}
.VideoPlayerWrapper iframe {
    width: 100% !important;
    max-width: 800px;
    height: 500px !important;
}
.VideoPlayerWrapper embed {
    width: 100% !important;
    max-width: 800px;
    height: 500px !important;
}

/*START MainCategory.css*/
.ClubIntroTitleContainer {
    padding-bottom:10px;
    margin-bottom: 10px;
    border-bottom:2px solid #dedcdc;
}
.ListTitleWrapper {
    position: relative;
    height: 20px;
    border-bottom: 1px solid Silver;
    padding-bottom: 10px;
}
.ListLeftTitle {
    display: inline-block;
    padding: 0 18px;
    text-align: center;
    float: left;
}
.ListMiddleTitle {
    display: inline-block;
    margin-left: 30%;
}
.ListLeftMiddleTitle {
    display: inline-block;
    margin-left: 14%;
}
.ListRightTitle {
    display: inline-block;
    float:right;
    padding-right: 40px;
}
.ClubBoardDetailListItemPop {
    text-align: center;
    float: right;
    padding-right: 14px;
}
.ClubBoardDetailListItem {
    -moz-transition: all .5s;
	-o-transition: all .5s;
	-webkit-transition: all .5s;
	transition: all .5s;
    padding: 10px 0;
}
.ClubBoardDetailListItemDate, .ClubBoardDetailListItemName {
	display:inline-block;
	color:#808080;
}
.ClubBoardDetailListItemDate {
	float:right;
    text-align: right;
    width: 15%;
}
.ClubBoardDetailListItemName {
	color:#333333;
    float: left;
    width: 25%;
    overflow: hidden;
    height: 20px;
    padding-left:14px;
}
.ClubBoardDetailListItemTitle {
    margin-left: 30%;
}
.ClubBoardDetailListItem:hover
	{
		background-color:#ebe8e8;
	}
.ClubBoardDetailListItemContent {
    width: 60%;
    margin-left: 195px;
}
.BoardListDetailItemTitleWrapper {
	overflow:hidden;
	position:relative;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-webkit-transition: all .5s;
	transition: all .5s;
    padding: 0 5px;
}
	.BoardListDetailItemTitleWrapper:after {
		clear:right;
	}
.BoardListDetailItem {
	margin-bottom: 10px;
	/*border:1px solid #ffffff;*/
	padding:5px;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-webkit-transition: all .5s;
	transition: all .5s;
}
	.BoardListDetailItem a {
		text-decoration:none;
	}
	.BoardListDetailItem:hover
	{
		margin-bottom:10px;
		padding:5px;
		background-color:#ebe8e8;
		/*border:1px solid #808080;*/
	}
    .ClubBoardListItemDate, .ClubBoardListItemName {
	display:inline-block;
}
.ClubBoardListItemDate {
	float:right;
    text-align: right;
    width: 15%;
}
.ClubBoardListItemName {
    float: left;
    overflow: hidden;
    height: 20px;
    font-weight: 500;
}
.ClubBoardListItemCategory {
    float: left;
    font-size: 11px;
    height: 20px;
    overflow: hidden;
    width: 20%;
}
/*END MainCategory.css*/
.VideoListContentsWrapper {
    display: inline-block;
    width: 100%;
}
.UCCMainContentIntroductionContainer {
    margin-top: 30px;
    margin-bottom: 100px;
}
.MainContentIntroductionContainer {
    margin-bottom: 30px;
    padding-bottom: 10px;
}
.SeriesListWrapper {
    margin-left: 160px;
}
.SeriesListImage {
    display:inline-block;
    float: left;
}
.SeriesListImage {
    width: 150px;
    float: left;
}
    .SeriesListImage img {
        max-width: 100%;
    }
.SeriesContentIntroductionWrapper {
    margin-top: 10px;
    margin-bottom: 30px;
}
.PopupPlayButton {
    margin: auto;
    font-weight:bold;
    background-color: #D8D8D8;
    border-radius: 50px 50px 50px 50px;
    cursor: pointer;
    display: block;
    font-size: 40px;
    height: 26px;
    padding: 18px;
    text-align: center;
    width: 26px;
    -moz-box-shadow:inset 0 7px 40px 0 #999999;
	-webkit-box-shadow:inset 0 7px 40px 0 #999999;
	box-shadow:inset 0 7px 40px 0 #999999;
    -moz-transition: all .3s;
	-o-transition: all .3s;
	-webkit-transition: all .3s;
	transition: all .3s;
}
    .PopupPlayButton:hover {
        background-color: #9b9b9b;
        color: #fff;
    }
.loginMessage {
    width:100%;
    display:inline-block;
    padding:200px 0;
    text-align:center;
    font-size:20px;
    font-weight:bold;
    background-color:#e8e8e8;
}
.marginBottom15 {
    margin-bottom:15px;
}

.HotSaleEventWrapper {
    display:inline-block;
    width:100%;
}
    .HotSaleEventWrapper .HotSaleEventContainer {
        float:left;
        width:23.4%;
        height:330px;
        margin:5px;
    }
        .HotSaleEventWrapper .HotSaleEventContainer a .HotSaleEventImageBoard {
            text-align:center;
            height:260px;
        }
            .HotSaleEventWrapper .HotSaleEventContainer a .HotSaleEventImageBoard img {
                max-width:100%;
                height:100%;
            }
        .HotSaleEventWrapper .HotSaleEventContainer a .HotSaleEventTitle {
            height:40px;
            overflow:hidden;
        }
.textboxform {
    font-size: 18px;
    padding: 3px 7px;
    width: 55px;
    text-align: center;
}


.KoreanNews .OuterColumn {
    display: block;
    float: left;
    width: 31%;
    padding-bottom:10px;
    border: 1px solid #333;
    margin: 5px;
}

    .KoreanNews .OuterColumn:hover {
        background-color:#f5f5f5;
    }

    .KoreanNews .OuterColumn .InnerColumn {
        padding: 10px;
    }

        .KoreanNews .OuterColumn .InnerColumn .ImgContainer {
            height: 180px;
            position: relative;
            overflow: hidden;
            /*border: 1px solid grey;*/
            display: none;
        }

            .KoreanNews .OuterColumn .InnerColumn .ImgContainer img {
                max-width: 100%;
                -moz-transition: all 0.4s ease;
                -webkit-transition: all 0.4s ease;
                transition: all 0.4s ease;
            }
                .KoreanNews .OuterColumn .InnerColumn .ImgContainer img:hover {
                    -moz-transform: scale(1.1);
                    -webkit-transform: scale(1.1);
                    transform: scale(1.1);
                }

        .KoreanNews .OuterColumn .InnerColumn .Content {
            overflow: hidden;
            height: 60px;
            /*font-weight: bold;*/
            margin-bottom: 10px;
            padding-top:8px;
        }

            .KoreanNews .OuterColumn .InnerColumn .Content .title {
                font-weight: bold;
                color: #246cc4;
            }
            .KoreanNews .OuterColumn .InnerColumn .from,
            .KoreanNews .OuterColumn .InnerColumn .date {
                color: #6b29ad;
            }


.ResumeList ul li img, .SolverList ul li img, .ImgContainer img, .ImgFrame img, .FiveThreeColumnContainer img, .FiveTwoColumnContainer img, .InnerImgContainer img {
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.FourColumnContainer {
    margin-bottom: 10px;
}

    .FourColumnContainer ul {
        list-style-type: none;
    }

        .FourColumnContainer ul li div {
            padding: 5px;
        }

        .FourColumnContainer ul li:first-child div {
            /*padding-left:0;*/
        }

        .FourColumnContainer ul li:last-child div {
            /*padding-right:0;*/
        }

        .FourColumnContainer ul li div img {
            width: 100%;
            /*height:100%;*/
        }

        .FourColumnContainer ul li {
            float: left;
            overflow: hidden;
            position: relative;
            width: 32.33%;
            margin-right: 1%;
        }

    .FourColumnContainer li:hover {
        background-color: #e0ddbf;
    }

.BlogFourColumnContainer {
    margin-bottom: 10px;
}

    .BlogFourColumnContainer ul {
        list-style-type: none;
    }

        .BlogFourColumnContainer ul li div {
            padding: 5px;
        }

        .BlogFourColumnContainer ul li:first-child div {
            /*padding-left:0;*/
        }

        .BlogFourColumnContainer ul li:last-child div {
            /*padding-right:0;*/
        }

        .BlogFourColumnContainer ul li div img {
            width: 100%;
        }

        .BlogFourColumnContainer ul li {
            float: left;
            overflow: hidden;
            position: relative;
            width: 22.65%;
            height: 163px;
            margin: 1%;
            border: 1px solid #c8c8c8;
        }

    .BlogFourColumnContainer li:hover {
        background-color: #e0ddbf;
    }


#StreamNewsContainer{
    margin-bottom:30px;
}
#StreamNewsViewContainer{
    display:flex;
    max-height: 330px;
}

#StreamNewsIframeContainer {
    flex-grow: 8;
}

#StreamNewsIframeContainer iframe{
    width:100%;
    height:100%;
}

#StreamNewsListContainer {
    flex-grow: 1;
    padding-left:4px;
    overflow-y: scroll;
}

#StreamNewsListContainer .item {
    padding:12px;
    pointer-events: none;
    border-bottom: 1px dotted gray;
    display: flex;
    align-items: center;
}

#StreamNewsListContainer .item img {
    width: 32px;
}

    #StreamNewsListContainer .item a {
        pointer-events: auto;
    }

#StreamNewsListContainer .item:hover {
    box-shadow: 0 0 0 2px #6b29ad inset;
}

#BoardListPager {
	text-align:center;
    height: auto;
    padding: 10px 0 0 0;
}

.VideoListContentsWrapper{
    position: relative;
}

.VideoPoster {
    display:none;
    position: absolute;
    right: -40px;
    z-index: 2;
}

.VideoPoster img{
    box-shadow: 5px 5px 5px #888888;
}


.day_ul {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    width : 100%;
}
.day_ul > li {
    display: inline-block;
    background-color : rgba(241, 239, 239, 0.59);
    cursor: pointer;
    width : 14%;
}
.day_ul > li > a > h4 {
    display: block;
    position: relative;
    height: 60px;
    text-align : center;
    color : #5c5b5b;
    font-weight : 500;
    border : solid 1px silver;
    -- -webkit-box-shadow: 1px 1px 2px silver;
    -- -moz-box-shadow: 1px 1px 2px silver;
    -- box-shadow: 1px 1px 2px silver;
}
.day_ul > li > a > h4:hover {
    color : #000;
}
.day_ul > li .active{
    background-color : #fff;
    color:#6b29ad;
    border-bottom : solid 1px #fff;
    -webkit-box-shadow: 1px 1px 2px #fff;
    -moz-box-shadow: 1px 1px 2px  #fff;
    box-shadow: 1px 1px 2px  #fff;

}