@charset "utf-8";

/* CSS Document */



@font-face{font-family: 'Montserrat'; src:url('fonts/Montserrat-Regular.ttf'); src:url('fonts/Montserrat-Regular.ttf') format('truetype'); font-weight:normal; font-style:normal;}

@font-face{font-family: 'Montserrat'; src:url('fonts/Montserrat-SemiBold.ttf'); src:url('fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight:500; font-style:normal;}

@font-face{font-family: 'Montserrat'; src:url('fonts/Montserrat-Bold.ttf'); src:url('fonts/Montserrat-Bold.ttf') format('truetype'); font-weight:900; font-style:normal;}

@font-face{font-family: 'NotoSansHK'; src:url('fonts/NotoSansHK-Light.otf'); src:url('fonts/NotoSansHK-Light.otf') format('opentype'); font-weight:normal; font-style:normal;}

@font-face{font-family: 'NotoSansHK'; src:url('fonts/NotoSansHK-Regular.otf'); src:url('fonts/NotoSansHK-Regular.otf') format('opentype'); font-weight:500; font-style:normal;}

@font-face{font-family: 'NotoSansHK'; src:url('fonts/NotoSansHK-Bold.otf'); src:url('fonts/NotoSansHK-Bold.otf') format('opentype'); font-weight:900; font-style:normal;}



hr{display:block; width:100%; height:1px; line-height:1px; font-size:0px; margin:100px 0px; padding:0px; border:none; border-top:2px ridge #9f977a;}

.HeaderImage{width:100%; text-align:center;}

.HeaderImage img{width:90%; max-width:400px; display:block; margin:0 auto;}

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

.HeaderImage img{width:50%;}

}



/* General *********************************************************************************************************************************************************************************************/

html, body{width:100%; min-width:320px; height:100%; margin:0%; padding:0%; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased !important; -moz-osx-font-smoothing:grayscale; font-family:Montserrat,NotoSansHK,Helvetica,Arial,'微軟正黑體','Microsoft JhengHei',sans-serif; font-weight:100; color:#333333; background-color:#FFFFFF; font-feature-settings:'kern'; -webkit-text-rendering:optimizeLegibility; text-rendering:optimizeLegibility;}

*{box-sizing:border-box;}

html, body, h4, p{font-size:19px;}

h1{font-size:36px; line-height:130%; font-weight:500; margin:0px;}

h2, SectionTitle{font-size:22px; margin:30px 0px 5px 0px; font-weight:500;}

h4{font-weight:500;}

.Grid-Aside h4{font-size:16px;}

.ExtraHeader{margin-bottom:0px;}

.ExtraHeader, .ExtraHeader a{word-break:normal;}

.SubTitle{font-size:22px; font-weight:500;}

a{color:inherit; text-decoration:none;}

a:hover{color:#666666;}

a img{border:0;}

p{font-size:19px; margin:25px 0px;}

a, p{word-break:break-all;}

.Remark, .Caption{font-size:13px !important; font-weight:normal !important; color:#808080 !important;}

.Time{font-size:11px !important; font-weight:normal !important; color:#808080 !important;}

.Breadcrumb + .Time{margin-top:-5px;}

.ProfileImg, .Thumbnail{font-size:0px; margin:0px; line-height:0px; overflow:hidden; position:relative;}

.ProfileImg img, .Thumbnail img{object-fit:cover; width:100%; height:auto;}

.ProfileImg{border-radius:50%; border:1px solid #E2E3E4;}

.Thumbnail a{border:2px solid #FFFFFF; position:relative; height:0px; padding-top:52.33333333%; display:block; overflow:hidden;}

.Thumbnail img{position:absolute; top:50%; left:0%; -webkit-transform:translateY(-50%); transform:translateY(-50%); transition:all ease-in 0.3s;}

.Thumbnail img:hover{width:104%; top:48%; left:-2%; -webkit-transform:translateY(-48%); transform:translateY(-48%); transition:all ease-out 0.2s;}

.Thumbnail, .ProfileImg{-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0); box-shadow: 0px 0px 0px 0px rgba(0,0,0,0); transition:all 0.2s;}

.Thumbnail:hover, .ProfileImg:hover{-webkit-box-shadow: 0px 12px 10px -4px rgba(0,0,0,0.15); box-shadow: 0px 12px 10px -4px rgba(0,0,0,0.15); transition:all 0.3s;}

.NewBadget{display:inline-block; margin:0px 3px; padding:0px; vertical-align:middle; background-color:#FF0000; font-size:0px; pointer-events:none;}

.NewBadget::after{content:"NEW"; display:block; padding:2px;color:#FFFFFF; font-size:9px; font-weight:bold; user-select:none; letter-spacing:0px; line-height:120%; text-align:center; width:27px;}

.CommentBubble, .NewCateBubble, .NewArticleBubble, .PopularBubble, .ViaMobile, .ViaApp{display:inline-block; vertical-align:top; font-size:11px; font-weight:500; line-height:16px; height:16px; margin:1px 5px 0px 5px; -webkit-user-select:none; user-select:none;}

.CommentBubble{background-image:url("../images/commentbubble.svg"); background-size:contain; background-position:left center; padding-left:18px; color:#333333;}

.PopularBubble{background-image:url("../images/rection_popular.svg"); background-size:contain; background-position:center center; font-size:0px; width:18px;}

.NewCateBubble, .Breadcrumb .NewBubble, .NewArticleBubble, .Breadcrumb .NewArticleBubble{font-family:Helvetica,Arial,'微軟正黑體','Microsoft JhengHei',sans-serif; padding:0px 3px; color:#FFFFFF !important; font-weight:bold;}

.NewCateBubble, .Breadcrumb .NewBubble{background-color:#FF0000;}

.NewArticleBubble, .Breadcrumb .NewArticleBubble{background-color:#99CC00;}

.ViaMobile::after{font-size:9px; color:#FF6700; content:"via mobile"; display:block; line-height:20px;}

.ViaApp::after{font-size:9px; color:#FF6700; content:"via app"; display:block; line-height:20px;}

.RemoveFavorite, .CloseTheBox{position:absolute; display:block; z-index:999; overflow:hidden; border-radius:50%; padding:0px; margin:0px; cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-box-shadow:0px 3px 3px 0px rgba(0,0,0,0.1); box-shadow:0px 3px 3px 0px rgba(0,0,0,0.1);}

.RemoveFavorite{background-color:rgba(255,255,255,0.95); border:1px solid #CCCCCC; right:0px; top:6px; width:26px; height:26px; transition:background-color ease-in 0.1s, border-color ease-in 0.1s;}

.CloseTheBox{background-color:rgba(0,0,0,0.85); left:-42px; top:calc(50% - 11px); width:20px; height:20px;}

.RemoveFavorite::after, .CloseTheBox::after{content:"\00d7"; position:absolute; text-align:center; color:#333333; line-height:15px; transition:color ease-in 0.1s;}

.RemoveFavorite::after{color:#333333; font-size:25px; left:5px; top:5px;}

.CloseTheBox::after{color:#FFFFFF; font-size:20px; left:4px; top:3px;}

.RemoveFavorite:hover{background-color:rgba(0,0,0,0.7); border-color:#FFFFFF; transition:background-color ease-out 0.2s, border-color ease-out 0.2s;}

.RemoveFavorite:hover::after{color:#FFFFFF; transition:color ease-out 0.2s;}

.ButtonWappper{width:100%; display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:center; margin:30px 0px; padding:0px;}

.ButtonWappper > div{flex:0 0 auto; display:inline-block; padding:8px 20px; margin:0px 2px; border-width:1px; border-style:solid; border-color:#FFFFFF; background-color:#333333; font-size:15px; font-weight:500; border-radius:8px; color:#FFFFFF; cursor:pointer; -webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0); transition:background-color ease-in 0.1s,color ease-in 0.1s,border-color ease-in 0.1s,-webkit-box-shadow ease-in 0.1s,box-shadow ease-in 0.1s; -webkit-user-select:none; user-select:none;}

.ButtonWappper > div:hover{background-color:#FFFFFF; color:#333333; border-color:#CCCCCC; -webkit-box-shadow:0px 3px 0px 0px rgba(0,0,0,0.1); box-shadow:0px 3px 0px 0px rgba(0,0,0,0.1); transition:all ease-out 0.2s;}

.ButtonWappper > div.Disabled, .ButtonWappper > div.Disabled:hover{background-color:#F2F2F2; color:#999999; border-color:#E2E3E4; -webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0);}

.ButtonWappper > div.VoteButton{background-color:#ef4d79; color:#FFFFFF; border-color:#FFFFFF;}

.ButtonWappper > div.CommentButton{background-color:#27bdbe; color:#FFFFFF; border-color:#FFFFFF;}

.ButtonWappper.Invert > div{ border-color:#CCCCCC; background-color:#FFFFFF; color:#333333;}

.ButtonWappper.Invert > div:hover{background-color:#333333; color:#FFFFFF; border-color:#FFFFFF;}





.AsideBox{border:1px solid #E2E3E4;}

.Grid-Aside .GridContainer{flex-wrap:wrap;}

.Grid-Aside .GridContainer:last-of-type{margin-bottom:30px;}

.AsideBox.Grid-Col-1{flex-basis:100%;}

.AsideBox .List, .AsideBox h2{width:90%; margin:15px auto;}

.GridContainer > h2{margin-top:0px;}

.AsideBox .Thumbnail{flex-basis:38% !important; margin-left:6px !important;}

.AsideBox h2, .AsideBox h2 a{font-size:16px; font-weight:500;}

.AsideContentWrapper, .AsideContentWrapper > div{display:none;}

.AsideContentWrapper.FixHeight{height:auto; max-height:50vh; min-height:400px; overflow:auto;}



/* Segment **********************************************************************************************************************************************************************************************/

.Segment{width:100%; display:flex; flex-wrap:nowrap; align-content:stretch; padding:0px; margin:0px 0px 10px 0px; overflow:hidden; -webkit-user-select:none; user-select:none;}

.Segment > div{flex:1 1; text-align:center; font-size:15px; font-weight:normal; padding:12px 2px; line-height:120%; border-left:1px solid #E2E3E4; cursor:pointer; position:relative; overflow:hidden; color:#999999; background-color:#F9F9F9; border-top-style:solid; border-top-width:3px; border-top-color:#CCCCCC; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#E2E3E4; transition:-webkit-box-shadow ease-in 0.1s, box-shadow ease-in 0.1s, color ease-in 0.1s; -webkit-box-shadow:inset 0px 0px 0px 0px rgba(0,0,0,0); box-shadow:inset 0px 0px 0px 0px rgba(0,0,0,0);}

.Segment > div:hover{transition:-webkit-box-shadow ease-out 0.2s, box-shadow ease-out 0.2s, color ease-out 0.2s; color:#000000; -webkit-box-shadow:inset 0px -12px 20px -6px rgba(0,0,0,0.15); box-shadow:inset 0px -12px 20px -6px rgba(0,0,0,0.15);}

.Segment > div:first-of-type{border-left:none;}

.Segment > div.Selected{color:#333333; font-weight:500; background-color:#FFFFFF; border-top-color:#666666; cursor:default; border-bottom-color:#FFFFFF;}

.AsideBox .Segment{flex-wrap:wrap; padding:0px;}

.Segment > div.SubType{height:42px; flex-basis:100%; margin:10px 4% 0px 4%; padding:2px; display:flex; flex-wrap:nowrap; background-color:#FFFFFF; overflow:hidden; border:none; border-radius:6px; -webkit-box-shadow:inset 0px 0px 0px 0px rgba(0,0,0,0); box-shadow:inset 0px 0px 0px 0px rgba(0,0,0,0);}

.Segment > div.SubType > div{flex:1 1 100%; height:36px; margin:0px 1px; align-self:center; border-radius:6px; position:relative; display:flex; border:1px solid #E2E3E4; transition:border ease-in 0.1s, -webkit-box-shadow ease-in 0.1s, box-shadow ease-in 0.1s; -webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0);}

.Segment > div.SubType > div:hover{transition:border ease-out 0.2s, -webkit-box-shadow ease-out 0.2s, -shadow ease-out 0.2s; background-color:#FFFFFF; border:1px solid #999999; -webkit-box-shadow:0px 0px 5px 0px rgba(0,0,0,0.1); box-shadow:0px 0px 5px 0px rgba(0,0,0,0.1);}

.Segment > div.SubType > div.Selected{-webkit-box-shadow:inset 0px 0px 0px 0px rgba(0,0,0,0); box-shadow:inset 0px 0px 0px 0px rgba(0,0,0,0); border:1px solid #FFFFFF;}

.Segment > div.SubType > div img, .Segment > div.SubType > div svg{width:auto; height:60%; display:block; margin:7px auto; pointer-events:none;}

.Segment > div.SubType > div svg{fill:#FFFFFF; stroke:#545454; stroke-width:5%; height:54%; margin-top:13%;}

.Segment > div.SubType > div.NewArticle span{display:block; color:#888888; font-size:10px; font-weight:900; line-height:110%; vertical-align:middle; margin:auto; align-self:center; pointer-events:none;}

.Segment > div.SubType > div.NewArticle.Selected span{color:#FFFFFF;}

.Segment > div.Selected:hover{-webkit-box-shadow:inset 0px 0px 0px 0px rgba(0,0,0,0); box-shadow:inset 0px 0px 0px 0px rgba(0,0,0,0);}

.Segment.TypeB > div{flex:1 1; text-align:center; font-size:14px; font-weight:normal; padding:8px 2px; line-height:120%; cursor:pointer; position:relative; overflow:hidden; color:#999999; background-color:#F9F9F9; border:1px solid #E2E3E4; border-right-width:0px; -webkit-box-shadow:inset 0px 0px 0px 0px rgba(0,0,0,0); box-shadow:inset 0px 0px 0px 0px rgba(0,0,0,0); transition:color ease-in 0.3s, background-color ease-in 0.3s;}

.Segment.TypeB > div:first-of-type{border-top-left-radius:6px; border-bottom-left-radius:6px;}

.Segment.TypeB > div:last-of-type{border-top-right-radius:6px; border-bottom-right-radius:6px; border-right-width:1px;}

.Segment.TypeB > div.Selected{background-color:#333333 !important; font-weight:500; color:#FFFFFF; cursor:default;}

.Segment.TypeB > div:hover{color:#FFFFFF; background-color:#545454; transition:color ease-out 0.2s, background-color ease-out 0.2s;}





/* Switcher **********************************************************************************************************************************************************************************************/

.Switcher{height:36px; display:inline-flex; flex-wrap:nowrap; align-content:stretch; padding:0px; margin:0px; overflow:hidden;}

.Switcher > div{flex:0 0 auto;}

.Switcher > div:first-of-type{background-color:#FFFFFF; line-height:34px; font-size:14px; font-weight:500; padding:0px 15px; height:36px;}

.Switcher > div:last-of-type{background-color:#FFFFFF; border:1px solid #E2E3E4; border-radius:18px; display:flex; flex-wrap:nowrap; font-size:0px; padding:0px; box-sizing:content-box; height:34px; cursor:pointer; overflow:hidden; transition:background-color ease-in 0.1s;}

.Switcher > div:last-of-type > div{flex:0 0 34px; height:34px; font-size:12px; width:34px; display:block; position:relative;}

.Switcher > div:last-of-type > div span{width:100%; height:100%; border-radius:50%; display:block; position:absolute; top:0px; left:0px;}

.Switcher > div:last-of-type > div.Selected span{background-color:#333333; -webkit-box-shadow:0px 0px 12px 0px rgba(0,0,0,0.6); box-shadow:0px 0px 12px 0px rgba(0,0,0,0.6); z-index:2; cursor:default;}



/* Tab **********************************************************************************************************************************************************************************************/

.Tab{width:90%; display:flex; flex-wrap:nowrap; align-content:stretch; border:1px solid #E2E3E4; border-radius:6px; padding:0px; margin:10px auto; -webkit-user-select:none; user-select:none;}

.Tab > div{flex:1 1; width:auto; text-align:center; font-size:14px; font-weight:normal; padding:8px 2px; line-height:120%; border-left:1px solid #E2E3E4; cursor:pointer; position:relative; color:#999999; background-color:#F9F9F9; transition:color ease-in 0.1s, background-color ease-in 0.1s;}

.Tab > div:hover{color:#FFFFFF; background-color:#545454; transition:color ease-out 0.2s, background-color ease-out 0.2s;}

.Tab > div:first-of-type{border-left:none; border-top-left-radius:6px;  border-bottom-left-radius:6px;}

.Tab > div:last-of-type{border-top-right-radius:6px;  border-bottom-right-radius:6px;}

.Tab > div.Selected{color:#FFFFFF; font-weight:500; background-color:#333333; cursor:default; transition:none;}

.Tab > div.Selected:after, .Tab > div.Selected:before{content:''; display:block; position:absolute; left:calc(50% - 10px); width:0%; height:0%; border-style:solid;}

.Tab > div.Selected:after{bottom:-18px; border-color:#333333 transparent transparent transparent; border-width:10px;}

.Tab > div.Selected:before{bottom:-20px; border-color:#E2E3E4 transparent transparent transparent; border-width:10px;}





/* Breadcrumb **********************************************************************************************************************************************************************************************/

.Breadcrumb{display:block; background-color:#FFFFFF; z-index:2; position:relative; padding:0px;}

.Breadcrumb > a, .Breadcrumb > span{display:inline-block; vertical-align:middle; z-index:10; font-size:14px !important; font-weight:500 !important; color:#666666 !important; word-break:normal;}

.Breadcrumb > a:hover{color:#000000 !important;}

.Breadcrumb > a::after, .Breadcrumb > a > span::after, .Breadcrumb > span::after{content:"\2044"; font-size:15px; margin:auto 6px; color:#CCCCCC !important; font-weight:normal !important;}

.BreadcrumbLocation > a, .BreadcrumbLocation > span{display:inline-block; vertical-align:middle; z-index:10; font-size:25px !important; font-weight:500 !important;}

.BreadcrumbLocation > a::after, .BreadcrumbLocation > span::after{content:"\2044"; font-size:20px; margin:auto 10px; color:#CCCCCC !important; font-weight:normal !important;}

.Breadcrumb > *:last-child::after, .BreadcrumbLocation > *:last-child::after, .Breadcrumb > a > span:last-child::after{content:none;}

.Breadcrumb > a > span{display:inline-block;}

#MainContainer .Breadcrumb:first-of-type{padding-top:0px;}

.CategoryList{width:100%; padding:10px 0px 30px 0px; display:none; list-style:none; overflow:hidden; font-size:0px; z-index:2; border-bottom:1px dotted #CCCCCC;}

.Breadcrumb.SubCategory .CategoryList{display:block;}

.Breadcrumb.SubCategory .BreadcrumbLocation{margin-bottom:20px;}

.CategoryList a{display:inline-block; margin:2px 20px 2px 0px; font-size:14px; font-weight:normal; color:#333333 !important;}

.CategoryList a:hover{color:#999999 !important;}





/* Tag **********************************************************************************************************************************************************************************************/

.Tag{display:block; margin:0px 0px 40px 0px; font-size:0px;}

.Tag > div{display:inline-flex; align-items:center; border:1px solid #E2E3E4; border-radius:6px; background-color:#FFFFFF; color:#333333; margin:0px 6px 6px 0px; transition:all 0.3s;}

.Tag > div:hover{background-color:#333333; -webkit-box-shadow: 0px 3px 1px -1px rgba(0,0,0,0.1); box-shadow: 0px 3px 1px -1px rgba(0,0,0,0.1); transition:all 0.2s;}

/*.Tag > div > a{color:#333333; margin-right:10px; font-size:14px; font-weight:normal; line-height:120%; padding:8px 0px 8px 12px; display:block;}*/

.Tag > div > a{color:#333333; font-size:14px; font-weight:normal; line-height:120%; padding:8px 12px 8px 12px; display:block;}

.Tag > div:hover > a{color:#FFFFFF;}

.Tag > div > .TagBtn{width:16px; height:16px; line-height:0px; margin:0px; display:inline-block; vertical-align:middle; position:relative; margin-right:5px; cursor:pointer;}

.Tag > div > .TagBtn::after{content:"\00d7"; font-size:20px; color:#666666; font-weight:normal; width:16px; height:16px; text-align:center; line-height:16px; overflow:hidden; padding:0px;}

.Tag > div:hover > .TagBtn::after{color:#FFFFFF;}

.Tag.Big > div > a{font-size:17px; font-weight:900;}

.Tag.Big > div{padding:1px 2px; border-radius:6px;}

.Tag.NoBottomMargin{margin-bottom:0px;}

@media only screen and (min-width: 375px) {

	.Tag.Big > div > a{font-size: 12px;}

}

@media only screen and (min-width: 414px) {

	.Tag.Big > div > a{font-size: 15px;}

}

@media only screen and (min-width:600px) {

    .Tag.Big > div > a{font-size:16px;}

    .Tag.Big > div{padding:3px 8px; border-radius:12px;}

}

@media only screen and (min-width:900px) {

    .Tag.Big > div > a{font-size:20px;}

    .Tag.Big > div{padding:4px 12px; border-radius:16px;}

}



/* Pagination **********************************************************************************************************************************************************************************************/

.Pagination{width:100%; display:flex; align-items:center; justify-content:center; margin:50px 0px;}

.Pagination a{width:40px; height:40px; display:block; overflow:hidden; margin:0px 3px; border:1px solid #E2E3E4; border-radius:50%; font-size:16px; font-weight:normal; color:#999999; position:relative; line-height:40px; -webkit-user-select:none; user-select:none;  text-align:center; transition:color ease-in 0.2s, border-color ease-in 0.3s;}

.Pagination a.Previous::before, .Pagination a.Next::before, .Pagination a.MostLeft::before, .Pagination a.MostLeft::after, .Pagination a.MostRight::before, .Pagination a.MostRight::after, .Pagination a.PrevTen::before, .Pagination a.PrevTen::after, .Pagination a.NextTen::before, .Pagination a.NextTen::after{display:block; position:absolute; font-size:17px; color:#CCCCCC;}

.Pagination a.MostLeft::before{content:"|"; left:12px; top:-2px;}

.Pagination a.MostLeft::after{content:"〈"; left:8px; top:-1px;}

.Pagination a.MostRight::before{content:"|"; right:12px; top:-2px;}

.Pagination a.MostRight::after{content:"〉"; right:8px; top:-1px;}

.Pagination a.PrevTen::before{content:"〈"; left:8px; top:-1px;}

.Pagination a.PrevTen::after{content:"〈"; left:4px; top:-1px;}

.Pagination a.NextTen::before{content:"〉"; right:7px; top:-1px;}

.Pagination a.NextTen::after{content:"〉"; right:3px; top:-1px;}.Pagination a.Previous::before{content:"〈"; left:5px; top:-1px;}

.Pagination a.Next::before{content:"〉"; right:5px; top:-1px;}

.Pagination a:hover, .Pagination a:hover::before, .Pagination a:hover::after{color:#333333; border-color:#666666; transition:all ease-out 0.2s;}

.Pagination a.Selected{background-color:#333333; color:#FFFFFF; border-color:#FFFFFF; cursor:default; -webkit-box-shadow:0px 6px 8px -4px rgba(0,0,0,0.5); box-shadow:0px 6px 8px -4px rgba(0,0,0,0.5);}

.Pagination a.Disabled{background-color:#F2F2F2; color:#D9D9D9; border-color:#F2F2F2; cursor:default;}

.Pagination a.Disabled::before, .Pagination a.Disabled::after{color:#D9D9D9;}

/*.Pagination a.PageNum{display:none;}*/

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

    .Pagination a.PageNum{display:block;}

}









/* Columnist Profile  **********************************************************************************************************************************************************************************************/

.ColumnistProfileWrapper{width:100%; display:flex; flex-wrap:wrap; align-items:flex-start;}

.ColumnistContainer{flex:0 1 250px; display:flex; flex-wrap:nowrap; align-items:center; padding:15px 15px 15px 0px;}

.ColumnistContainer > div.ProfileImg{flex:0 0 56px; margin-right:10px;}

.ColumnistContainer > div.ColumnistInfo{flex:1 1 100px;}

.ColumnistContainer > div.ColumnistInfo a{display:block; width:100%;}

.ColumnistContainer > div.ColumnistInfo a.ColumnistName{font-size:15px; font-weight:500; color:#333333;}

.ColumnistContainer > div.ColumnistInfo a.CategoryName{font-size:13px; font-weight:normal; color:#666666;}

.ColumnistContainer > div.ColumnistInfo span.ColumnistMore{width:20px; height:20px; display:inline-block; vertical-align:top; margin:3px 0px 0px 5px; background-color:#FFFFFF; border:1px solid #CCCCCC; cursor:pointer; overflow:hidden; border-radius:50%; position:relative; transition:background-color ease-in 0.2s, border-color ease-in 0.2s;}

.ColumnistContainer > div.ColumnistInfo span.ColumnistMore::before{content:"…"; font-size:15px; font-weight:normal; position:absolute; color:#666666; display:block; width:15px; line-height:10px; left:4px;}

.ColumnistContainer > div.ColumnistInfo span.ColumnistMore:hover{background-color:#333333; border-color:#333333; transition:all ease-out 0.3s; transition:color ease-in 0.2s;}

.ColumnistContainer > div.ColumnistInfo span.ColumnistMore:hover::before{color:#FFFFFF; transition:all ease-out 0.3s;}

.ColumnistContainer .PopInfoBox{width:300px; padding:10px 20px; background-color:#FFFFFF; border-radius:10px; position:absolute; right:0px; border:3px solid #EFEFEF; -webkit-box-shadow:0px 0px 8px 3px rgba(0,0,0,0.2); box-shadow:0px 0px 8px 3px rgba(0,0,0,0.2); z-index:10000; display:none;}

.ColumnistContainer .PopInfoBox p{color:#000000; font-size:13px; font-weight:normal; letter-spacing:1px; text-align:start; margin:10px 0px; word-break:normal;}

.ColumnistContainer .PopInfoBox p:first-of-type{font-weight:500; font-size:15px;}

.ColumnistContainer .PopInfoBox:after, .ColumnistContainer .PopInfoBox:before{content:""; display:block; position:absolute; width:0%; height:0%; border-style:solid;}

.ColumnistContainer .PopInfoBox:after{top:calc(50% - 15px); left:-30px; border-color:transparent #FFFFFF transparent transparent; border-width:15px;}

.ColumnistContainer .PopInfoBox:before{top:calc(50% - 17px); left:-34px; border-color:transparent #FFFFFF transparent transparent; border-width:17px;}



/* SNS **********************************************************************************************************************************************************************************************/

.FuncWrapper{width:100%; display:block; font-size:0px; list-style:none; margin:30px 0px; padding:0px;}

.FuncWrapper > li{display:inline-block; vertical-align:middle; font-size:13px; font-weight:normal; cursor:pointer;}

.FuncWrapper .FuncIcon{width:28px; height:28px; background-size:100%; transition:all ease-in 0.1s; margin-right:8px; display:inline-block; vertical-align:middle;}

.FuncWrapper .FuncIcon:hover{transition:all ease-out 0.2s;}

.FuncWrapper .fb-like{width:auto; padding-right:10px; cursor:default;}

.FuncWrapper .FB{background-image: url("../images/sns_fb.svg");}

.FuncWrapper .FB:hover{background-image: url("../images/sns_fb_hover.svg");}

.FuncWrapper .Wtap{background-image: url("../images/sns_wtap.svg");}

.FuncWrapper .Wtap:hover{background-image: url("../images/sns_wtap_hover.svg");}

.FuncWrapper .Line{background-image: url("../images/sns_line.svg");}

.FuncWrapper .Line:hover{background-image: url("../images/sns_line_hover.svg");}

.FuncWrapper .Email{background-image: url("../images/sns_email.svg"); margin-right:20px;}

.FuncWrapper .Email:hover{background-image: url("../images/sns_email_hover.svg");}

.FuncWrapper .App{background-image: url("../images/android_share.png");}

.FuncWrapper .RectionComment, .FuncWrapper .RectionFavorite, .FuncWrapper .RectionBookmark{width:auto; padding:0px 20px; border-left:1px solid #E2E3E4;}

.FuncWrapper .RectionComment svg, .FuncWrapper .RectionFavorite div, .FuncWrapper .RectionBookmark div{margin-right:5px;}

.FuncWrapper .RectionCommentSymbol{fill:#333333;}

.FuncWrapper .RectionFavorite div{background-image:url("../images/rection_favorite.svg"); background-size:100%; display:inline-block; vertical-align:middle;}

.FuncWrapper .RectionFavorite.added div{background-image:url("../images/rection_favorite_added.svg");}

.FuncWrapper .RectionBookmark div{background-image:url("../images/rection_bookmark.svg"); background-size:100%; display:inline-block; vertical-align:middle;}

.FuncWrapper .RectionBookmark.added div{background-image:url("../images/rection_bookmark_added.svg");}

.FuncWrapper span{font-size:13px; font-weight:500; color:#333333; display:inline-block; vertical-align:middle;}



figure {text-align:center; width:100%; margin:0px;}

figure img{max-width:100%; width:auto;}



.adv .advContainer{margin:0px auto;}



.shareBtn.whatsappLogo, .shareBtn.lineLogo{display: none;}

.FuncWrapper .App{width:50px; height:50px; margin:0px 0px 20px auto; cursor:pointer; user-select:none; box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3); position:fixed; top:10px; right:20px; border-radius: 50%; z-index: 999;}



/* Layout *********************************************************************************************************************************************************************************************/

.ADWrapper{margin:30px 0px;}

#MainWrapper{width:100%; margin:0px auto; padding:0px; display:flex; flex-wrap:wrap; align-items:stretch; align-content:flex-start;}

.SkinnerRow{width:100%; display:block; min-height:100px;}

.SkinnerColumn.SkinnerLeft{text-align:right;}

#MainWrapper.SkinnerOn .SkinnerColumn{display:none;}

#MainContainer{flex:1 1 100%; max-width:100%; margin:0px auto; padding:0px; background-color:#FFFFFF; position:relative;}

@media only screen and (min-width:1280px) {

	#MainWrapper.SkinnerOn .SkinnerColumn{display:block; flex:0 0 130px; min-height:600px;}

}

@media only screen and (min-width:1540px) {

	#MainWrapper.SkinnerOn .SkinnerColumn{flex:1 1 130px;}

	#MainWrapper.SkinnerOn #MainContainer{flex:0 0 1280px;}

}

@media only screen and (min-width:990px) {

	#MainContainer{max-width: 1500px;}

}

.GridWrapper{flex:1 1; max-width:100%; padding:10px; margin:0px auto; display:flex; flex-wrap:wrap; align-items:flex-start;}

.GridWrapper.SectionBorder{border-top:none;}

.GridWrapper.SectionBorder h2:first-of-type{margin-top:10px;}

.Grid-Aside{flex:0 0 100%;}

.Grid-Aside .GridContainer{border-top:none; padding:20px 0px;}

.Grid-Main{flex:1 0 100%; max-width:100%; padding-bottom:30px;}

.Grid-Article{width:100%; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; position:relative; margin:0%; padding:0%;}

.Grid-Article-Content{flex:1 1 100%; order:1; position:relative;}

.Grid-Article-Extra{flex:1 1 100%; order:2; position:relative;}

.Article-Cover{display:block; position:relative; width:100%; padding:52.3333333% 0% 0% 0%; overflow:hidden;}

.Article-Cover img{display:block; position:absolute; top:0%; left:0%; width:100%; height:auto; transition:all ease-in 0.1s;}

.Article-Cover img:hover{width:104%; top:-2%; left:-2%; transition:all ease-out 0.3s;}

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

    .GridWrapper{padding:20px;}

}

@media only screen and (min-width:1024px) {

    .GridWrapper{padding:10px 30px 20px 30px;}

}

@media only screen and (min-width:1440px) {

	.Grid-Article{flex-wrap:nowrap;}

	.Grid-Article-Content{flex:1 1 100%; order:2; position:-webkit-sticky; position:sticky; top:70px; align-self:flex-start;}

	.Grid-Article-Extra{flex:0 0 220px; order:1; margin-right:40px; position:-webkit-sticky; position:sticky; top:70px; align-self:flex-start;}

}

.Grid-Article-Extra .List h4, .Grid-Article-Extra .Grid h4{font-size:19px;}

.Grid-Article-Extra .List li{padding:12px 0px;}

.Grid-Article-Extra .ExtraHeader{font-size:22px; font-weight:500; margin:12px 0px;}

.Grid-Article-Extra .ProfileImg{flex:0 0 50px;}

.Grid-Article-Extra .GridContainer{flex-wrap:wrap; padding:0px; border:none; justify-content:space-around;}

.Grid-Article-Extra .GridContainer > div{flex:1 1 50%; max-width:380px; padding:15px 30px;}

.Grid-Article-Extra .GridContainer > div:nth-child(odd){padding-left:10px;}

.Grid-Article-Extra .GridContainer > div:nth-child(even){padding-right:10px;}

@media only screen and (min-width:1440px) {

	.Grid-Article-Extra .List h4, .Grid-Article-Extra .Grid h4{font-size:15px;}

	.Grid-Article-Extra .ExtraHeader{font-size:16px; margin:0px 0px 10px 0px;}

	.Grid-Article-Extra .GridContainer > div{flex:0 0 100%; padding:30px 0px; border-top:5px solid #F6F6F6;}

	.Grid-Article-Extra .GridContainer:first-of-type > div:first-of-type{border-top:none;}

	.Grid-Article-Extra .List p, .Grid-Article-Extra .List h4{display:block; width:100%; padding:3px 0px;}

	.Grid-Article-Extra .ADWrapper{margin-top:0px;}

}

.GridContainer{display:flex; flex-wrap:wrap; align-items:stretch; flex:1 1 1540px; overflow:hidden; padding:30px 0px; margin:0px auto; border-top:1px solid #E2E3E4;}

.GridWrapper .GridContainer:first-of-type{border-top:none;}

.GridContainer:first-of-type{padding-top:0px;}

.GridContainer:last-of-type{padding-bottom:0px;}

.GridContainer.Line{border-bottom:1px solid #E2E3E4;}

.GridContainer > div{max-width:100%; overflow:hidden;}

.Grid-Gutter{flex:0 0 30px !important;}

.Grid-Gutter.Line{flex:0 0 61px !important; position:relative;}

.Grid-Gutter.Line::before{content:""; display:block; position:absolute; left:30px; top:0px; width:1px; height:100%; background-color:#E2E3E4;}

.Grid-Col-1, .Grid-Col-2{flex:1 0 100%;}

.GridContainer.Fluid{flex-wrap:wrap;}

.GridContainer.Fluid > div{flex-basis:100%;}

.GridContainer.Fluid .Grid-Gutter, .GridContainer.Fluid .Grid-Gutter.Line{flex:0 0 0px !important}

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

    .GridContainer{flex-wrap:nowrap;}

    .Grid-Col-1{flex:1 1;}

    .Grid-Col-2{flex:2 1;}

}

@media (max-width: 990px) {

	.shareBtn.whatsappLogo, .shareBtn.lineLogo{display: inline-block;}

	article > p > video, article video, article iframe{width:100%;}

	.ArticleDetail .PopImg{position: relative; display: block;}

	.ArticleDetail .PopImg::before{position:absolute;display:block;top:20px;right:10px;content:"";width:40px;height:40px;cursor:pointer;background-image:url(../images/icon_scale.png);background-size:contain;background-repeat:no-repeat;opacity:.5;z-index:10;transition:opacity .2s linear;-o-transition:opacity .2s linear;-moz-transition:opacity .2s linear;-webkit-transition:opacity .2s linear}

}

@media only screen and (min-width:990px) {

    .GridWrapper{flex-wrap:nowrap;}

    .Grid-Main{flex:1 1 auto; padding-right:30px; border-right:1px solid #E2E3E4; position:-webkit-sticky; position:sticky; top:70px; align-self:flex-start;}

    .Grid-Aside{flex:0 0 301px; padding-left:30px; border-left:1px solid #E2E3E4; transform:translateX(-1px); position:-webkit-sticky; position:sticky; top:30px; align-self:flex-start;}

	.ArticleDetail .PopImg{display:inline-block; width:auto; position:relative; margin:0px auto; zoom:1; outline:0;}

	.ArticleDetail .PopImg::before{width:50px; height:50px; display:block; content:"";  zoom:1; position:absolute; top:10px; right:10px; z-index:2; background-image:url(../images/global.png); background-image:url(../images/global_ie8.png) \9; background-position:-140px -93px; background-size:300px; cursor:pointer; opacity:0.5; -webkit-transition:opacity 0.2s ease-in-out; -o-transition:opacity 0.2s ease-in-out; -moz-transition:opacity 0.2s ease-in-out; -ms-transition:opacity 0.2s ease-in-out; transition:opacity 0.2s ease-in-out; }

	.detaileasylogo img{ width:250px; padding:10px 30px;}

	.backbtn{ padding:30px 30px 0px 30px;}

	#PageTop{width:50px; height:50px; margin:0px 0px 20px auto;background-size:300px; background-repeat:no-repeat; background-image:url(../images/global.png); background-position:-4px -470px; cursor:pointer; user-select:none; opacity:0.5; -webkit-transition:opacity 0.2s ease-in-out,background-position 0.2s ease-out; -o-transition:opacity 0.2s ease-in-out,background-position 0.2s ease-out; -moz-transition:opacity 0.2s ease-in-out,background-position 0.2s ease-out; -ms-transition:opacity 0.2s ease-in-out,background-position 0.2s ease-out; transition:opacity 0.2s ease-in-out,background-position 0.2s ease-out;}

	#PageTop:hover{opacity:1;}

	.PageTop{flex:0 0 301px; padding-left:30px; border-left:1px solid #E2E3E4; transform:translateX(-1px); position:-webkit-sticky; position:fixed; bottom:50px; right:100px; z-index:999; align-self:flex-start;}

}

@media only screen and (min-width:1280px) {

	.GridContainer.Fluid{flex-wrap:nowrap;}

	.GridContainer.Fluid .Grid-Col-1{flex:1 1;}

	.GridContainer.Fluid .Grid-Col-2{flex:2 1;}

	.GridContainer.Fluid .Grid-Gutter{flex:0 0 30px !important;}

	.GridContainer.Fluid .Grid-Gutter.Line{flex:0 0 61px !important;}

}

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

	.Grid-Article-Content{width:inherit;}

	article > p > img, article img{width:100%; height:100%;}

	.ADWrapper{text-align:center;}

	.detaileasylogo img{ width:200px; padding:10px 15px;}

	/*.backbtn{ padding:0 15px;}*/

	#PageTop{width:50px; height:50px; background-size:300px; background-repeat:no-repeat; background-image:url(../images/globalradius.png); background-position:-237px -87px; position:fixed; right:30px; bottom:30px; z-index:2000; border-radius:5px; -webkit-box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3); box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3); display:none;}

	#topbanner.GridWrapper{padding: 0px 10px;}

}