@charset "UTF-8"; /* CSS Document */ /* General *********************************************************************************************************************************************************************************************/ @font-face { font-family: '新微軟正黑體'; unicode-range: U+7db0, U+78A7, U+7B75; font-style: normal; font-weight: bold; src: local(MS Gothic), local(Yu Gothic); } @font-face { font-family: '新微軟正黑體'; unicode-range: U+7db0, U+78A7, U+7B75; font-style: normal; font-weight: normal; src: local(微軟正黑體), local(Microsoft JhengHei); } html, body{width:100%; min-width:320px; margin:0; padding:0; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased !important; -moz-osx-font-smoothing:grayscale; font-family:Montserrat,NotoSans,Helvetica,'新微軟正黑體',Arial,'微軟正黑體','Microsoft JhengHei',sans-serif; font-weight:normal; font-size:calc(21px + (56 - 21) * ((100vw - 320px) / (1600 - 320))); letter-spacing:1px; background-color:#FFFFFF; color:#333333; font-feature-settings:'kern'; text-rendering:optimizeLegibility; -webkit-overflow-scrolling:touch;} html.Fixed, body.Fixed{overflow:hidden;} body.CommentPage{background-image:linear-gradient( 89.4deg, rgba(74,77,103,1) -4.3%, rgba(119,125,165,1) 102.1%);} @media screen and (max-width:320px){ html, body{font-size:20px;} } @media only screen and (min-width:813px), only screen and (-webkit-min-device-pixel-ratio:2) and (min-width:813px), only screen and (min-device-pixel-ratio: 2) and (min-width:813px), only screen and (min-resolution:192dpi) and (min-width:813px), only screen and (min-resolution:2dppx) and (min-width:813px){ html, body{font-size:calc(22px + 2vw);} } @media screen and (min-width:1600px){ html, body{font-size:56px;} } /* Disable Hover Effect on Mobile Device */ @media only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:1024px) and (orientation: portrait), only screen and (min-device-pixel-ratio: 2) and (max-device-width:1024px) and (orientation: portrait), only screen and (min-resolution:192dpi) and (max-device-width:1024px) and (orientation: portrait), only screen and (min-resolution:2dppx) and (max-device-width:1024px) and (orientation: portrait), only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:1366px) and (orientation: landscape), only screen and (min-device-pixel-ratio: 2) and (max-device-width:1366px) and (orientation: landscape), only screen and (min-resolution:192dpi) and (max-device-width:1366px) and (orientation: landscape), only screen and (min-resolution:2dppx) and (max-device-width:1366px) and (orientation: landscape){ .Thumbnail, img{-webkit-transition:none !important; -moz-transition:none !important; -o-transition:none !important; transition:none !important;} .Story:hover .Thumbnail img{width:102% !important; height:auto !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; transition:none;} .Story:hover .Thumbnail img{width:100% !important; height:100% !important; transform:translate(0,0) !important; top:0% !important; left:0% !important;} .GridWrapper article:hover .Thumbnail{transform:scale(1) !important; transition:none !important;} .GridWrapper article:hover .Breadcrums{opacity:0 !important; transition:none !important;} .Header a:hover::after{padding-left:0.4rem !important; transition:none !important;} .Video:hover::after{background-color:#fbba00 !important; transition:none !important;} /*.Video:hover::before{border-left-color:rgba(255,255,255,0.5) !important; transition:none !important;}*/ #HeaderMenu nav > div > a:hover{background-color:transparent !important; transition:none !important;} footer .SNSWrapper > div svg:hover, footer .Subscription .SubscriptionButton:hover{transition:none !important;} .PaginationWrapper > a:hover{background-color:#FFFFFF; transition:none !important;} .TagWrapper > a:hover{background-color:#FFFFFF; color:#FFFFFF; transition:none !important;} #ChannelHighlightPreview .Story:hover .Thumbnail img{width:102% !important; height:102% !important; transition:none !important;} #BackToTop, #BackToTop:hover{background-color:rgba(255,255,255,0.5) !important; transition:none !important;} #BackToTop::before, #BackToTop:hover::before{border-bottom-color:rgba(0,0,0,0.5) !important; transition:none !important;} .swiper-button-prev:hover::after, .swiper-button-next:hover::after{background-color:rgba(255,255,255,0.3) !important; transition:none !important;} .swiper-button-prev:hover::before, .swiper-button-next:hover::before{color:rgba(255,255,255,0.5) !important; transition:none !important;} .puzzleSquare:hover{-webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0) !important; box-shadow:0px 0px 0px 0px rgba(0,0,0,0) !important; transform:translateZ(0px) !important; transition:none !important;} .OverlayWrapper{position:sticky; width:100% !important; height:100vh; max-height:100vh; top:0% !important; left:0% !important; transform:translate(0%, 0%) !important; border-radius:0px !important; overflow:hidden;} .OverlayWrapper .CloseOverlay{top:2px !important; right:2px !important; left:auto !important; position:sticky !important; position:-webkit-sticky !important;} .OverlayContainer{overflow-y:auto; overflow-x:hidden; max-height:calc(100vh - 30px) !important;} } *{box-sizing:border-box;} section{display:block; width:100%; max-width:1600px; margin:auto; overflow:hidden; position:relative;} section.Full{max-width:none;} section.wMargin{margin-bottom:calc(2vw + 25px);} section.Expandable{overflow:hidden; height:150vh; max-height:1000px; position:relative; margin-bottom:150px; padding-bottom:100px;} section.Expandable > .Container{overflow:hidden; height:150vh; max-height:1000px;} section.Expandable.Show, section.Expandable.Show > .Container{overflow:inherit; max-height:none; height:auto; padding-bottom:calc(8px + 0.8vw);} section.wMargin.Weekly{margin-bottom:calc(15px + 1vw);} section.wMargin.Weekly:last-of-type{margin-bottom:calc(2vw + 25px);} article{position:relative;} .Sticky{overflow:inherit!important;} h1{font-size:1.3rem; margin:0px; line-height:130%;} h2{font-size:1.1rem; margin:0px; line-height:130%;} h3{font-size:calc(18px + 0.08rem); margin:0px; line-height:130%;} h4{font-size:calc(14px + 0.06rem); margin:0px; line-height:130%;} h5{font-size:0.45rem; margin:0px; line-height:130%; font-weight:500;} h6{font-size:calc(12px + 0.1rem); margin:0px; line-height:130%; font-weight:500; text-align:right;padding-top: 10px;} a{text-decoration:none; color:#333333; word-break:break-all;} a:hover{color:#666666;} p{width:100%; font-size:calc(0.1rem + 16px); text-align:justify;} ol,ul{margin:0.7vw 0px; text-align:justify;} li{font-size:calc(0.1rem + 16px);} .Breadcrums{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start;} .Breadcrums > a, .Breadcrums > span{display:block; flex:0 0 auto; padding-right:5px; font-size:14px; font-weight:500; line-height:110%; position:relative;} .Breadcrums > a::after, .Breadcrums > span::after{content:"｜"; font-size:12px; line-height:110%; padding-left:5px;} .Breadcrums > *:last-child::after{display:none;} .ColumnistsSmall{display:inline-block; margin-bottom:0.6vw; position:relative;} .ColumnistsSmall .ProfileImage{width:calc(40px + 1.5vw); height:calc(40px + 1.5vw); border-radius:50%; overflow:hidden; padding:0px;} .ColumnistsSmall .ProfileImage img{width:100%;} .ColumnistsSmall div{display:block; font-size:15px; line-height:120%; font-weight:500; color:#FFFFFF; padding:6px 0px; pointer-events:none; text-align:center;} .ColumnistsSmall a{width:100%; height:100%; z-index:0; position:absolute; top:0px; left:0px; bottom:0px; right:0px; pointer-events:all;} .SectionNameWrapper{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; font-size:0px;} .SectionNameWrapper > div{flex:0 0 auto; position:relative; padding: 0 0.6rem 0.3rem 0; overflow:hidden; } .SectionNameWrapper > div::after{content:"";display:block; position:absolute; right: 0.22rem; top:34%; width:4px; height:4px; background-color:#999999; border-radius:50%;} .SectionNameWrapper > div:last-of-type{padding:0 0 0.3rem 0;} .SectionNameWrapper > div:last-of-type::after{display:none;} .SectionNameWrapper > div > a{font-size:0.65rem; line-height:110%; font-weight:900;} .SectionNameWrapper.Section > div > a{color:#999999; transition:color ease-in 0.2s;} .SectionNameWrapper.Section > div > a:hover{color:#333333; transition:color ease-out 0.2s;} .SectionNameWrapper.Section > div::after{color:#999999;} .SectionNameWrapper.Section > div.Selected > a{color:#333333;} .SectionIntro{font-size:calc(13px + 0.1rem); line-height:normal;} .BoldText{font-weight:900;} .SectionHeader{display:flex; flex-wrap:wrap; flex-flow:column; align-items:flex-start; padding:calc(4px + 1.2vw) 0px; pointer-events:all !important;} .SectionHeader > div{flex:0 0 auto; font-weight:900;} .SectionHeader.Vertical{display:flex !important; flex-flow:row; align-items:stretch; padding:0px 0px calc(22px + 1vw) 0px;} .SectionHeader.Vertical > div{line-height:100%; align-self:flex-end;} .SectionHeader.Vertical > div.Header-Medium{flex-basis:1.5rem; border-right:2px solid #333333; align-self:stretch; z-index:1; pointer-events:all;} .SectionHeader.Vertical > div.Header-Medium a:hover{color:#333333 !important;} .White-Text .SectionHeader.Vertical > div.Header-Medium{border-right-color:#FFFFFF;} .White-Text .SectionHeader.Vertical > div.Header-Medium a:hover{color:#FFFFFF !important;} .SectionHeader.Vertical > div.Header-Large{flex:1 1 auto; padding-left:0.7rem; font-size:1.6rem; line-height:130%; margin:0px;} .SectionHeader.wMargin{margin-bottom:calc(1vw + 12px);} .SectionHeader span.GameCount{display:inline-block; font-size:calc(15px + 0.1rem); font-weight:100; color:#FFFFFF; margin-left:10px;} .SectionHeader span.GameCount.Block{display:block; margin-left:0px;} .Header{font-size:0.9rem;} .Header a::after{content:"〉"; font-weight:100; color:#fbba00; padding-left:0.4rem; transition:padding-left ease-in 0.3s;} .Header a:hover::after{padding-left:0.6rem; transition:padding-left ease-out 0.2s;} .Header-Large{font-size:1.3rem;} .Header-Medium{font-size:0.9rem;} .Header-Medium.HasPointer a::after{content:"〉"; font-weight:100; color:#fbba00; padding-left:0.4rem; transition:padding-left ease-in 0.3s;} .Header-Medium.HasPointer a:hover::after{padding-left:0.6rem; transition:padding-left ease-out 0.2s;} .White-Text, .White-Text a{color:#FFFFFF !important;} .White-Text a:hover{color:#CCCCCC !important;} .Black-Text, .Black-Text a{color:#333333 !important;} .Black-Text a:hover{color:#666666 !important;} .BrownText{color:#683b2b !important;} .VideoDuration{position:absolute; top:10px; left:10px; display:inline-block; padding:0.05rem 0.1rem; z-index:1000; background-color:rgba(66,86,100,0.7); color:#FFFFFF; border-radius:8px;} .VideoDuration h6{position:relative; padding-left:calc(15px + 0.1rem); padding-top: 1px;} .VideoDuration h6::before{content:""; font-size:0; line-height:0; position:absolute; top:50%; left:0.05rem; transform:translateY(-50%); width:0; height:0; border-top:calc(5px + 0.05rem) solid transparent; border-bottom:calc(5px + 0.05rem) solid transparent; border-left:calc(8px + 0.05rem) solid #FFFFFF;} .Video::after{content:""; position:absolute; top:4px; right:5px; width:50px; height:50px; z-index:1000; display:block; background-color:#fbba00; border-radius:50%; transition:background-color ease-in-out 0.3s;} .Video:hover::after{background-color:rgb(188,207,0); transition:background-color ease-out 0.2s; pointer-events:none;} .Video::before{content:""; position:absolute; top:15px; right:14px; border-top:14px solid transparent; border-bottom:14px solid transparent; border-left-width:20px; border-left-style:solid; border-left-color:#FFFFFF; width:0px; height:0px; display:inline-block; *display:inline; padding:0px; margin:0px 3px 0px 0px; float:left; vertical-align:bottom; z-index:10000; transition:border-left-color ease-in-out 0.3s; pointer-events:none;} /*.Video:hover::before{border-left-color:#FFFFFF; transition:border-left-color ease-out 0.2s;}*/ input, textarea, input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; appearance:none; outline:none; border-radius:6px; border:1px solid #c2c2c2; display:inline-block; background-color:#FFFFFF; font-size:17px; font-family:Montserrat,NotoSansHK,Helvetica,Arial,'微軟正黑體','Microsoft JhengHei',sans-serif;} ::-webkit-input-placeholder{color:#999999; font-size:calc(13px + 0.2vw); text-indent:5px;} :-moz-placeholder{color:#999999; font-size:calc(13px + 0.2vw); text-indent:5px;} ::-moz-placeholder{color:#999999; font-size:calc(13px + 0.2vw); text-indent:5px;} :-ms-input-placeholder{color:#999999; font-size:13px; text-indent:5px;} .Thumbnail{background-color:#FFFFFF;} .Thumbnail img.lazy{width:10vw !important; max-width:40px; height:10vw !important; max-height:40px;} .ThatsDayDate{font-size:calc(18px + 0.08rem);} .Rhythm{font-size:calc(24px + 0.08rem); width:100%;} #Feature .ThatsDayDate{font-size:1.4rem; display:block;} .SectionHeader.Vertical > div.ThatsDayDate.Header-Large{font-size:1.2rem;} .ScrollEffect {opacity: 0; transform: translate(0px, 100px) scale(0.8);} span.AlertMessage{display:none; width:100%; flex:0 0 100%; font-size:calc(10px + 0.2vw) !important; font-weight:normal !important; color:#FF0000; line-height:normal; margin:0px; padding:0.1rem; letter-spacing:0px;} .Alert .AlertMessage{display:block;} .Remark{font-size:calc(10px + 0.2vw) !important; font-weight:normal !important; color:#666666; line-height:normal; margin:0px; letter-spacing:0px;} @media only screen and (max-width:480px){ h6{font-size:calc(10px); margin:0px; line-height:130%; font-weight:500; text-align:right;padding-top: 5px;} #SearchSort{display: flex;flex-wrap: wrap;} .VideoDuration{border-radius:5px;padding: 0.07rem 0.15rem;} .VideoDuration h6{position:relative; padding-left:calc(10px + 0.1rem); padding-top: 1px;} .VideoDuration h6::before{content:""; font-size:0; line-height:0; position:absolute; top:50%; left:0.05rem; transform:translateY(-50%); width:0; height:0; border-top:calc(4px + 0.05rem) solid transparent; border-bottom:calc(4px + 0.05rem) solid transparent; border-left:calc(6px + 0.05rem) solid #FFFFFF;} } @media only screen and (min-width:480px){ .Video::after{top:20px; right:20px;} .Video::before{top:31px; right:29px;} } @media only screen and (min-width:660px){ h1{font-size:1.2rem;} h2{font-size:0.9rem;} h3{font-size:0.5rem;} h4{font-size:0.45rem;} h5{font-size:calc(12px + 0.1rem);} .Layout-Global_TemplateA .GridWrapper h2, .GridStyleC h2{font-size:0.7rem;} .Layout-Global_TemplateA .GridWrapper h3, .GridStyleC h3{font-size:calc(16px + 0.11rem);} .Layout-Global_TemplateA .GridWrapper h4, .GridStyleC h4{font-size:0.35rem;} .Layout-Global_TemplateA .GridWrapper.Columnist h2{font-size:calc(20px + 0.11rem);} .Header{font-size:0.6rem;} .Header-Large{font-size:1.1rem;} .Header-Medium{font-size:0.6rem;} .SectionHeader{padding:0px;} .SectionHeader.Vertical > div.Header-Medium{flex-basis:1.1rem;} .SectionHeader.Vertical > div.Header-Large{padding-left:0.5rem; font-size:1.6rem; line-height:110%; margin:5px 0px 0px 0px;} .Breadcrums > a, .Breadcrums > span{padding-right:10px; font-size:14px;} .Breadcrums > a::after, .Breadcrums > span::after{font-size:13px; padding-left:10px;} .SectionNameWrapper > div > a{font-size:0.45rem;} .SectionHeader.Vertical > div.ThatsDayDate.Header-Large{font-size:0.7rem;} } @media only screen and (min-width:800px){ .SectionHeader.Vertical > div.ThatsDayDate.Header-Large{font-size:0.6rem;} .Layout-Global_TemplateA .SectionHeader.Vertical > div.Header-Large.ThatsDayDate{font-size:0.8rem;} } @media only screen and (min-width:1200px){ .Layout-Global_TemplateA .SectionHeader{padding:0px;} .Layout-Global_TemplateA .SectionHeader.Vertical > div.Header-Medium{flex-basis:0.85rem; font-size:0.5rem;} .Layout-Global_TemplateA .SectionHeader.Vertical > div.Header-Large{padding-left:0.4rem; font-size:1rem; margin:0px;} .Layout-Global_TemplateA section .GridWrapper:last-of-type{margin-bottom:0px;} .SectionHeader.Vertical > div.ThatsDayDate.Header-Large{font-size:0.9rem;} .Layout-Global_TemplateA .SectionHeader.Vertical > div.Header-Large.ThatsDayDate{font-size:0.6rem;} .SectionNameWrapper > div::after{right: 0.28rem; width:6px; height:6px;} } @media only screen and (min-width:1400px){ section.Expandable, section.Expandable > .Container{height:200vh; max-height:1500px; position:relative;} } /* Dark Mode *********************************************************************************************************************************************************************************************/ body.Dark a, body.Dark .Breadcrums > span, body.Dark .SectionNameWrapper > div::after{color:#FFFFFF;} body.Dark a:hover{color:#999999;} body.Dark .PageTitle h2, body.Dark .PageTitle h2 a, body.Dark .SectionNameWrapper.Section > div.Selected > a{color:#FFFFFF; transition:color ease-in 0.2s;} body.Dark .PageTitle h2 a:hover, body.Dark .SectionNameWrapper.Section > div.Selected > a:hover, body.Dark .SectionNameWrapper > div > a:hover{color:#fbba00; transition:color ease-out 0.2s;} body.Dark .SectionNameWrapper > div.Selected > a:hover{color:#FFFFFF;} body.Dark .SectionNameWrapper.Section > div.Selected > a{color:#FFFFFF !important;} body.Dark .ArticleFontAdjuster > div.Disabled{color:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.2);} body.Dark .ArticleFontAdjuster > div{border:1px solid #FFFFFF; color:#FFFFFF;} body.Dark .ArticleSNSWrapper > div svg{fill:#FFFFFF; transition:fill ease-in 0.3s;} body.Dark .ArticleSNSWrapper > div svg:hover{fill:#FBBA00; transition:fill ease-out 0.2s;} body.Dark .ArticleWrapper .TagWrapper > a{border:1px solid #FFFFFF;} body.Dark .ArticleWrapper .TagWrapper > a:hover{background-color:rgba(255,255,255,0.1); color:#FFFFFF; transition:background-color ease-in 0.2s, color ease-in 0.2s;} body.Dark .ArticleCredit > div, body.Dark article, body.Dark .SectionHeader, body.Dark .SectionHeader a:hover{color:#FFFFFF;} body.Dark .ArticleDate{color:#FFFFFF;} body.Dark .CarouselInner h3{color:#333333;} body.Blanchedalmond .ArticleCover .Headline{color:#683b2b;} body.Blanchedalmond .ExpandableFade{background:rgb(255,255,255); background:-moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background:-webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);} body.Blanchedalmond section.Expandable.Show .ExpandableFade{background-color:transparent;} body.Blanchedalmond .ExpandableCaption::before{color:#333333;} body.Blanchedalmond .ArticleRHS .GridAside .Grid-Col{border-bottom:1px dotted rgba(0,0,0,0.2);} body.Blanchedalmond .ArticleRHS .GridAside .Grid-Col:last-of-type{border-bottom:none;} body.Blanchedalmond .ArticleRHS .GridAside .GridContent{padding-top:0px; line-height:120%;} body.Blanchedalmond .ArticleRHS .GridAside .GridContent article, body.Blanchedalmond .ArticleRHS .GridAside .GridContent article .Headline{position:relative;} @media only screen and (min-width:660px){ body.Blanchedalmond .ArticleRHS .GridAside .Grid-Col:nth-last-of-type(2){border-bottom:none;} } @media only screen and (min-width:1200px){ body.Blanchedalmond .ArticleRHS .GridAside .Grid-Col:nth-last-of-type(2){border-bottom:1px dotted rgba(0,0,0,0.2);} } /* Gradient *********************************************************************************************************************************************************************************************/ .Yellow{background:rgb(247,166,0); background:-moz-linear-gradient(125deg, rgba(247,166,0,1) 0%, rgba(255,223,67,1) 100%); background:-webkit-linear-gradient(125deg, rgba(247,166,0,1) 0%, rgba(255,223,67,1) 100%); background:linear-gradient(125deg, rgba(247,166,0,1) 0%, rgba(255,223,67,1) 100%);} .Yellow p{font-weight:500;} .Blanchedalmond{background:rgb(226,209,195); background:-moz-linear-gradient(125deg, rgba(255,255,255,1) 0%, rgba(226,209,195,1) 100%); background:-webkit-linear-gradient(125deg, rgba(255,255,255,1) 0%, rgba(226,209,195,1) 100%); background:linear-gradient(125deg, rgba(255,255,255,1) 0%, rgba(226,209,195,1) 100%);} .Green{background:rgb(188,207,0); background:-moz-linear-gradient(125deg, rgba(188,207,0,1) 0%, rgba(29,137,58,1) 100%); background:-webkit-linear-gradient(125deg, rgba(188,207,0,1) 0%, rgba(29,137,58,1) 100%); background:linear-gradient(125deg, rgba(188,207,0,1) 0%, rgba(29,137,58,1) 100%);} .Dark{background: rgb(66,86,100); background:-moz-linear-gradient(180deg, rgba(33,43,50,1) 0%, rgba(66,86,100,1) 300px, rgba(66,86,100,1) 100%); background:-webkit-linear-gradient(180deg, rgba(33,43,50,1) 0%, rgba(66,86,100,1) 300px, rgba(66,86,100,1) 100%); background:linear-gradient(180deg, rgba(33,43,50,1) 0%, rgba(66,86,100,1) 300px, rgba(66,86,100,1) 100%);} /* Button *********************************************************************************************************************************************************************************************/ .Button{padding:0px; border-radius:5px; -webkit-box-shadow:0px 25px 20px -10px rgba(0,0,0,0.3); box-shadow:0px 25px 20px -10px rgba(0,0,0,0.3); user-select:none; cursor:pointer; position:relative; transition:-webkit-box-shadow ease-out 0.2s, box-shadow ease-out 0.2s;} .Button a{width:100%; display:block; padding:0.3rem 0.5rem; font-size:calc(16px + 0.25rem); color:#FFFFFF; line-height:calc(16px + 0.5rem); font-weight:900; text-shadow:0px 0px 20px rgba(0,0,0,0.4);} .Button:hover{-webkit-box-shadow:0px 5px 10px -5px rgba(0,0,0,0.5); box-shadow:0px 5px 10px -5px rgba(0,0,0,0.5); transition:all ease-in 0.1s;} .Button:hover a{color:#FFFFFF !important;} .Button.Disabled{background-color:#CCCCCC; background:#CCCCCC; -webkit-box-shadow:0px 0px 0px -0px rgba(0,0,0,0.0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0);} .Button.Transparent{background:none; -webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0); border:1px solid rgba(255,255,255,0.5);} @media only screen and (min-width:660px){ .Button a{font-size:calc(16px + 0.12rem); line-height:calc(16px + 0.13rem);} } /* No Content *********************************************************************************************************************************************************************************************/ .NoContent{width:100%; height:auto; min-height:30vh; background:#f8f8f8; background:-moz-linear-gradient(-45deg, #f5f5f5 0%, #ffffff 100%); background:-webkit-linear-gradient(-45deg, #f5f5f5 0%,#ffffff 100%); background:linear-gradient(135deg, #f5f5f5 0%,#ffffff 100%); padding:0px; line-height:0px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; align-content:center;} .NoContent p{font-size:1rem; color:#999999; line-height:130%; font-weight:100; display:inline; width:auto; margin:0px;} body.Dark .NoContent{background:rgba(45,45,45,0.2); background:-moz-linear-gradient(-45deg, rgba(45,45,45,0.4) 0%, rgba(67,67,67,0.0) 100%); background:-webkit-linear-gradient(-45deg, rgba(45,45,45,0.4) 0%,rgba(67,67,67,0.0) 100%); background:linear-gradient(135deg, rgba(45,45,45,0.4) 0%,rgba(67,67,67,0.0) 100%);} body.Dark .NoContent p{color:rgba(255,255,255,0.5);} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .NoContent{display:table;} .NoContent p{display:table-cell; vertical-align:middle; text-align:center;} } /* Member *********************************************************************************************************************************************************************************************/ #MainWrapper.Login{background-image:url("../images/COVER-943691498.jpg"); background-repeat:no-repeat; background-size:cover; background-position:center center;} .MemberLoginWrapper{width:100%; /*max-width:800px;*/ max-width:600px; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start;} .MemberLoginWrapper > div{flex:0 0 100%; margin-bottom:20px;} .MemberLoginBox{display:flex; flex-wrap:wrap; align-items:stretch; justify-content:space-between; width:100%; background-color:rgba(255,255,255,0.7); border-radius:6px; -webkit-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.1); box-shadow:0px 0px 20px 0px rgba(0,0,0,0.2); padding:calc(12px + 1vw); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);} .MemberLoginBox > h3, .MemberLoginBox > div{flex:0 0 100%;} .MemberLoginBox h5{margin-top:20px; font-size:calc(12px + 0.1rem);} .MemberLoginBox > div > div{position:relative; margin:calc(10px + 0.2vw) 0px; display:flex; flex-wrap:wrap; flex:0 0 50%;} .MemberLoginBox > div > div, .MemberLoginBox > div a{font-size:calc(12px + 0.2vw);} .MemberLoginBox > div > div a{border-bottom:1px dotted #999999;;} input.MemberInput{width:100%; height:50px; border:1px solid rgba(0,0,0,0.2); background-color:rgba(255,255,255,1); font-size:calc(18px + 0.2vw); line-height:50px; padding:0px 12px; vertical-align:middle;} input.MemberInput:focus{border:1px solid rgba(0,0,0,0.4);} input.MemberInput::-webkit-input-placeholder{font-size:calc(14px + 0.1vw); text-indent:3px; color:#999999;} input.MemberInput:-moz-placeholder{font-size:calc(14px + 0.1vw); text-indent:3px; color:#666666;} input.MemberInput::-moz-placeholder{font-size:calc(14px + 0.1vw); text-indent:3px; color:#666666;} input.MemberInput:-ms-input-placeholder{font-size:calc(14px + 0.1vw); text-indent:3px; color:#999999;} input:disabled.MemberInput{background-color:#F2F2F2; color:#999999;} input::-ms-reveal, input::-ms-clear {display: none;} .MemPassword{display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start; flex:0 0 100%; width:100%; border:1px solid rgba(0,0,0,0.2); border-radius:6px;} .MemPassword.Focus{border:1px solid rgba(0,0,0,0.4);} .MemPassword input{border:none; width:calc(100% - 60px); flex:0 0 calc(100% - 60px);} .MemPassword input.MemberInput:focus{border:none;} .MemPasswordTrigger{width:50px; height:34px; flex:0 0 50px; cursor:pointer; background-size:contain; background-position:center center; background-repeat:no-repeat; background-image:url("../images/password_hide.png");} .MemPasswordTrigger.Show{background-image:url("../images/password_show.png");} #reg_favourite .AutoLogin{height:25px;} .AutoLogin{display:block; position:relative; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; margin-bottom:0.5vw; padding-left:30px; font-size:calc(12px + 0.2vw); line-height:normal;} .AutoLogin > a{border-bottom: 1px dotted #999999;} .AutoLogin input{position:absolute; opacity:0; cursor:pointer; height:0; width:0;} .AutoLoginCheckmark{position:absolute; top:0; left:0; height:25px; width:25px; border:1px solid rgba(0,0,0,0.1); background-color:rgba(255,255,255,0.7); transition:background-color 0.2s ease-in-out; border-radius:3px;} .AutoLogin:hover input ~ .AutoLoginCheckmark{background-color:#fbba00; transition:background-color 0.2s ease-in-out;} .AutoLogin input:checked ~ .AutoLoginCheckmark{background-color:#fbba00;} .AutoLogin input:disabled ~ .AutoLoginCheckmark{background-color:#E2E3E4;} .AutoLoginCheckmark:after{content:""; position:absolute; display:none;} .AutoLogin input:checked ~ .AutoLoginCheckmark:after{display:block;} .AutoLogin .AutoLoginCheckmark:after{left:7px; top:4px; width:5px; height:10px; border:solid white; border-width:0 3px 3px 0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);} .AutoLogin.RegistrationInput{margin-right:20px;} .MemberLoginBox > div > .MemberLoginBtn{margin:30px 0px;} .MemberLoginBox > div > .MemberLoginBtn > .Button{margin-right:10px; font-size:calc(16px + 0.2vw);} .MemberLoginBox > div > .MemberLoginBtn > .Button:last-of-type{margin-right:0px;} .MemberLoginBox > div > .MemberLoginBtn > .Button a{font-size:calc(16px + 0.2vw); font-weight:500; border-bottom:none; padding:0.3rem 0.8rem} .Member3PartyWrapper > a{flex:0 0 calc(50px + 0.2rem); height:auto; margin-right:calc(5px + 0.2vw); display:block; background-color:#FFFFFF; border-bottom:none !important; border-radius:8%; -webkit-box-shadow:0px 20px 20px -10px rgba(0,0,0,0.2); box-shadow:0px 20px 20px -10px rgba(0,0,0,0.2); overflow:hidden; line-height:0px; transition:-webkit-box-shadow 0.2s ease-in, box-shadow 0.2s ease-in;} @media screen and (-ms-high-contrast: active) and (orientation:portrait), (-ms-high-contrast: none) and (orientation:portrait){ .Member3PartyWrapper > a{width:50px;} } .Member3PartyWrapper > a img{width:100%;} .Member3PartyWrapper > a:hover{-webkit-box-shadow:0px 8px 8px -5px rgba(0,0,0,0.4); box-shadow:0px 8px 8px -5px rgba(0,0,0,0.4); transition:all 0.2s ease-out;} .MemberNewUserBox{width:auto; padding:0px; flex:0 0 auto; display:inline-block;} .MemberNewUserBox > div{flex:0 0 100%; margin-bottom:40px;} .MemberNewUserBox a{margin:10px 0px; text-align:center; padding:calc(25px + 0.1vw) calc(20px + 0.1vw);} .MemberNewUserBox a span{display:inline-block; font-size:calc(22px + 0.2vw); font-weight:900;} #MemberForgetWrapper{display:flex; flex-wrap:wrap; height:auto; padding:30px 0px; align-items:flex-start; justify-content:flex-start; width:100%; max-width:1000px;} #MemberForgetWrapper p{flex:0 1 100%; align-self:center; font-size:calc(16px + 0.2vw);} .MemberForgetBtn{margin:30px 0px; width:auto; display:flex;} .MemberForgetBtn > .Button{font-size:calc(16px + 0.2vw);} .MemberForgetBtn > .Button a{font-size:calc(16px + 0.2vw); font-weight:500; border-bottom:none; padding:0.3rem 0.8rem} .MemberForgetContact{margin-bottom:40px;} .MemberForgetContact a{border-bottom: 1px dotted #999999;} #MemberRegWrapper{display:flex; flex-wrap:wrap; padding:0px 0px 30px 0px; align-items:flex-start; justify-content:flex-start; width:100%; max-width:1000px;} #MemberRegWrapper > div{flex:0 0 100%; line-height:100%; margin-bottom:20px; display:flex; flex-wrap:wrap;} #MemberRegWrapper > div > p{font-size:calc(16px + 0.2vw); font-weight:500; flex:0 0 100%;} #MemberRegWrapper > div > div{font-size:calc(16px + 0.2vw); font-weight:500; flex:0 0 auto; align-self:center; overflow:hidden;} form{width:100%;} .radioContainer{position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .radioContainer input {position: absolute; opacity: 0; cursor: pointer;} .checkmark {position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%;} .radioContainer:hover input ~ .checkmark { background-color: #ccc;} .radioContainer input:checked ~ .checkmark { background-color: #fbba00;} .checkmark:after { content: ""; position: absolute; display: none;} .radioContainer input:checked ~ .checkmark:after { display: block;} .radioContainer .checkmark:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white;} #SearchWrapper{display:flex; flex-wrap:nowrap; height:auto; padding:15px 0px 30px 0px; align-items:flex-start; justify-content:flex-start; width:100%; max-width:1000px;} #SearchWrapper > div{flex:1 1 auto; margin-right:0.3rem; align-self:flex-start;} #SearchWrapper > div:last-of-type{flex:0 0 auto; margin-right:0px;} .SearchBtn{margin:0px; width:auto; display:flex;} .SearchBtn > .Button{font-size:calc(16px + 0.2vw);} .SearchBtn > .Button a{height:50px; font-size:calc(16px + 0.2vw); font-weight:500; line-height:50px; border-bottom:none; padding:0rem 0.8rem} input.SearchBtn{width:100%; height:50px; border:1px solid rgba(0,0,0,0.2); background-color:rgba(255,255,255,1); font-size:calc(18px + 0.2vw); line-height:50px; padding:0px 12px; vertical-align:top;} input.SearchBtn:focus{border:1px solid rgba(0,0,0,0.4);} input.SearchBtn::-webkit-input-placeholder{font-size:calc(14px + 0.1vw); text-indent:3px; color:#999999;} input.SearchBtn:-moz-placeholder{font-size:calc(14px + 0.1vw); text-indent:3px; color:#666666;} input.MemberInput::-moz-placeholder{font-size:calc(14px + 0.1vw); text-indent:3px; color:#666666;} input.SearchBtn:-ms-input-placeholder{font-size:calc(14px + 0.1vw); text-indent:3px; color:#999999;} input:disabled.SearchBtn{background-color:#F2F2F2; color:#999999;} #MainWrapper .gsc-control-cse{padding:0px;} .Gender{display:block; position:relative; margin-left:15px; padding-left:30px; cursor:pointer; font-size:calc(16px + 0.2vw); font-weight:100; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;} .Gender input{position:absolute; opacity:0; cursor:pointer;} .GenderCheckmark{position:absolute; top:calc(50% - 11px); left:0%; translate:transformY(-50%); height:22px; width:22px; background-color:#FFFFFF; border:1px solid rgba(0,0,0,0.1); border-radius:50%;} .Gender:hover input ~ .GenderCheckmark{background-color:#fbba00;} .Gender input:checked ~ .GenderCheckmark{background-color:#fbba00;} .GenderCheckmark:after{content:""; position:absolute; display:none;} .Gender input:checked ~ .GenderCheckmark:after{display:block;} .Gender .GenderCheckmark:after{top:5px; left:5px; width:10px; height:10px; border-radius:50%; background:white;} .DateSelectorDiv{position:relative; margin-left:10px;} .DateSelector{display:block; font-size:calc(16px + 0.2vw); font-weight:100; font-family:Montserrat,NotoSans,Helvetica,Arial,'微軟正黑體','Microsoft JhengHei',sans-serif; padding:0px 10px; width:100%; max-width:100%; padding-right:50px; height:50px; box-sizing:border-box; margin:0; border:1px solid rgba(0,0,0,0.2); -moz-appearance:none; -webkit-appearance:none; appearance:none; background-color:#FFFFFF; position:relative; border-radius:6px;} .DateSelectorDiv::before, .DateSelectorDiv::after{content:""; width:18px; height:18px; position:absolute; top:14px; right:20px; border-bottom:1px solid #999999; background-color:transparent; transform-origin:center bottom; z-index:2; pointer-events:none;} .DateSelectorDiv::before{transform:rotate(-45deg) translate(9px, 0px);} .DateSelectorDiv::after{transform:rotate(45deg) translate(-9px, 0px);} .DateSelector::-ms-expand{display:none;} .DateSelector:focus{border:1px solid rgba(0,0,0,0.4); outline:none;} .DateSelector:disabled, .DateSelector[aria-disabled=true]{color:#999999; background-color:#E2E3E4;} #MemberRegWrapper > div.FullWidth{flex:0 0 100%;} #MemberRegWrapper > div.FullWidth .SmallLetter, #MemberRegWrapper > div.FullWidth .SmallLetter li{font-size:calc(10px + 0.2vw); font-weight:normal; margin:10px 0px; line-height:normal;} #MemberRegWrapper > div.FullWidth .SmallLetter a{display:inline-block; border-bottom:1px dotted #999999;} #MemberRegWrapper .MemberLoginBtn{flex:0 0 100%; margin-bottom:30px;} #MemberRegWrapper .MemberLoginBtn > .Button{margin-right:10px; font-size:calc(16px + 0.2vw);} #MemberRegWrapper .MemberLoginBtn > .Button:last-of-type{margin-right:0px;} #MemberRegWrapper .MemberLoginBtn > .Button a{font-size:calc(16px + 0.2vw); font-weight:500; border-bottom:none; padding:0.3rem 0.8rem} #MemberRegWrapper > div span{word-break:break-all; display:inline-block; font-size:calc(16px + 0.2vw); font-weight:500;} #MemberRegWrapper > div span.SmallLetter{font-size:calc(10px + 0.2vw); margin:0px !important;} #MemberRegWrapper ol.SmallLetter{padding:0px;} #MemberRegWrapper li {list-style-type: none;} #SubscribtionForm .SmallLetter a{color:#0084d8;} #MemberverificationWrapper{display:flex; flex-wrap:wrap; height:auto; padding:0px 0px 30px 0px; align-items:flex-start; justify-content:flex-start; width:100%; max-width:1000px;} .RegStepWrapper.SectionNameWrapper.Section > div{padding:0 1rem 0 0 !important;} .RegStepWrapper.SectionNameWrapper.Section > div > a{color:#CCCCCC; transition:none;} .RegStepWrapper.SectionNameWrapper.Section > div > a:hover{color:#CCCCCC; transition:none;} .RegStepWrapper.SectionNameWrapper.Section > div::after{color:#CCCCCC;} .RegStepWrapper.SectionNameWrapper.Section > div.Selected > a{color:#fbba00;} .RegStepWrapper.SectionNameWrapper > div::after{content:"〉"; display:block; position:absolute; right:0.22rem; top:50%; transform:translate(0%, -50%); height:0.7rem; width:0.4rem; text-align:center; background-color:transparent; border-radius:none; color:#CCCCCC; font-size:13px;} .RegStepWrapper.SectionNameWrapper > div:last-of-type::after{content:"";} #SubscriptionSubmit a{color:#FFFFFF;} @media only screen and (min-width:800px){ /*.MemberLoginBox > div:first-of-type{flex:0 0 47%;}*/ /*.MemberLoginBox > div:last-of-type{flex:0 0 46%; padding-left:6%; border-left:1px solid rgba(0,0,0,0.1);}*/ .MemberLoginBox h5{margin-top:0px;} #MemberRegWrapper{margin:30px 0px;} #MemberRegWrapper > div.FullWidth{flex:0 0 98%;} #MemberRegWrapper > div{flex:0 0 48%; margin-bottom:35px; margin-right:2%;} #MemberRegWrapper > div > p{margin:5px 0px; line-height:normal;} #MemberRegWrapper > div.FullWidth .SmallLetter{margin:20px 0px;} .RegStepWrapper.SectionNameWrapper.Section > div{height:0.8rem;} } /* WeChat *********************************************************************************************************************************************************************************************/ #WeChatWrapper{width:100%; height:100vh; display:none; flex-wrap:wrap; align-items:center; justify-content:center; background-color:rgba(0,0,0,0.7); transition:opacity ease-out 0.2s; position:fixed; z-index:99999999999; top:0px; left:0px; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);} #WeChatWrapper .WeChatMobile{flex:0 1 80%; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:space-around; align-content:flex-start; position:relative;} #WeChatWrapper .WeChatMobile .WeChatShareLink{flex:0 0 100%; background-color:transparent; color:#FFFFFF; border:none; font-size:calc(14px + 0.1rem); word-break:break-all; margin-bottom:3vh;} #WeChatWrapper .WeChatMobile .WeChatButton{flex:0 0 48%;} #WeChatWrapper .WeChatMobile .WeChatButton .Button{height:100%; display:flex; align-items:center; align-content:center;} #WeChatWrapper .WeChatMobile .WeChatButton .Button a{font-size:calc(14px + 0.1rem); text-align:center; word-break:normal; height:auto;} #WeChatWrapper .WeChatMobile #WeChatCloseButton{position:fixed; top:3vh; right:3vh; width:32px; height:32px; cursor:pointer; -ms-user-select:none; user-select:none; border:none;} #WeChatWrapper .WeChatMobile #WeChatCloseButton::before, #WeChatWrapper .WeChatMobile #WeChatCloseButton::after{position:absolute; display:block; pointer-events:none; width:32px; height:3px; background-color:#FFFFFF;} #WeChatWrapper .WeChatMobile #WeChatCloseButton::before{content:""; transform:translate(0px, 14px) rotate(45deg);} #WeChatWrapper .WeChatMobile #WeChatCloseButton::after{content:""; transform:translate(0px, 14px) rotate(-45deg);} #WeChatWrapper.WeChatPop{width:200px; height:200px; position:absolute; background-color:#FFFFFF; border-radius:15px; -webkit-box-shadow:0px 25px 20px -10px rgba(0,0,0,0.3); box-shadow:0px 25px 20px -10px rgba(0,0,0,0.3); user-select:none;} #WeChatWrapper.WeChatPop .WeChatMobile{display:none;} #WeChatWrapper.WeChatPop::before{content:""; position:absolute; bottom:-20px; left:90px; border-left:14px solid transparent; border-right:14px solid transparent; border-top-width:20px; border-top-style:solid; border-top-color:#FFFFFF; width:0px; height:0px; display:inline-block; *display:inline; padding:0px; margin:0px 3px 0px 0px; float:left; vertical-align:bottom; z-index:99999999999; pointer-events:none;} #WeChatWrapper .WeChatQRCode{display:none;} #WeChatWrapper.WeChatPop .WeChatQRCode{display:block; width:160px; overflow:hidden;} #WeChatWrapper.WeChatPop .WeChatQRCode img{width:100%;} /* Tag *********************************************************************************************************************************************************************************************/ .TagWrapper{display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start;} .TagWrapper > a{flex:0 0 auto; font-size:calc(14px + 0.05rem); font-weight:500; line-height:100%; padding:calc(8px + 0.4vw); margin:0px calc(2px + 0.2vw) calc(2px + 0.2vw) 0px; border-radius:5px; border:1px solid #666666; transition:background-color ease-out 0.2s, color ease-out 0.2s;} .TagWrapper > a::before{content:"#"; font-weight:100;} /*.TagWrapper > a:hover{background-color:#333333; color:#FFFFFF; transition:background-color ease-in 0.2s, color ease-in 0.2s;} */ .Container.SearchRHS .SectionHeader{margin-bottom:calc(1vw + 12px);} .Container.SearchRHS .TagWrapper > a{background-color:#F3F3F3; border:none;} .Container.SearchRHS .TagWrapper > a:hover{background-color:#333333; color:#FFFFFF; transition:background-color ease-in 0.2s, color ease-in 0.2s;} /* Back to Top *********************************************************************************************************************************************************************************************/ #BackToTop{display:block; width:60px; height:60px; border-radius:50%; overflow:hidden; position:fixed; bottom:2vw; right:2vw; -webkit-box-shadow:0px 25px 20px -10px rgba(0,0,0,0.3); box-shadow:0px 25px 20px -10px rgba(0,0,0,0.3); user-select:none; cursor:pointer; z-index:999999999;} #BackToTop::before{content:""; position:absolute; top:24px; left:21px; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom-width:12px; border-bottom-style:solid; border-bottom-color:rgba(0,0,0,0.4); width:0px; height:0px; display:inline-block; *display:inline; padding:0px; margin:0px 3px 0px 0px; float:left; vertical-align:bottom; z-index:10000; pointer-events:none; transition:border-bottom-color ease-in 0.2s;} #BackToTop:hover::before{border-bottom-color:rgba(0,0,0,0.9); transition:border-bottom-color ease-out 0.2s;} #BackToTop::after{content:""; position:absolute; top:0px; left:0px; width:60px; height:60px; z-index:1; background-color:rgba(255,255,255,0.3); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); transition:background-color ease-in 0.2s;} #BackToTop:hover::after{background-color:rgba(255,255,255,0.8); transition:background-color ease-out 0.2s;} /* Header *********************************************************************************************************************************************************************************************/ header{width:100%; height:9vh; max-height:100px; min-height:70px; position:-webkit-sticky; position:sticky; top:0px; left:0px; background-color:#FFFFFF; border-bottom:3px solid #fbba00; z-index:99999999; -webkit-box-shadow:0px 5px 10px 0px rgba(0,0,0,0.2); box-shadow:0px 5px 10px 0px rgba(0,0,0,0.2);} header.Fixed{position:fixed;} .HeaderWrapper{display:flex; flex-wrap:nowrap; align-items:center; overflow:hidden; height:100%;} #HeaderLogo{flex:0 0 calc(100% - 100px); height:100%; overflow:hidden; position:relative; padding:0.8vh 0px;} #HeaderLogo > *{display:block; height:100%;} #HeaderLogo a{position:absolute; top:0px; left:0px; right:0px; bottom:0px; z-index:2;} #HeaderLogo .HeaderLogoFallback{background-image:url("../images/logo.png"); background-size:contain; background-repeat:no-repeat; background-position:left center; width:100%; height:100%;} #HeaderMenu{flex:0 0 100px; height:auto; display:flex; flex-wrap:nowrap; justify-content:flex-end; align-items:center; margin-right:0px; margin-left:0px; position:relative; order:2;} #HeaderMenu nav{width:100%; height:100%; display:none; opacity:0; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; overflow:auto; margin:0px; padding:calc(12px + 1vw); position:fixed; left:0px; background-color:#fbba00; transition:opacity ease-in 0.2s;} #HeaderMenu nav > div{flex:0 0 100%; width:100%; height:auto; display:flex; flex-wrap:wrap; align-items:center; padding:calc(14px + 0.4vw); border-bottom:1px dotted rgba(255,255,255,0.5); order:2;} #HeaderMenu nav.Expand{display:flex; opacity:1; transition:opacity ease-out 0.2s; padding-bottom:50px;} #HeaderMenu nav.Expand::after{content:""; width:100%; height:3vh; background-color:transparent; display:block; order:2;} #HeaderMenu nav > div > a{color:#FFFFFF; font-size:calc(14px + 0.1rem); display:inline-block; font-weight:500; line-height:110%; padding:0px; padding:calc(3px + 0.2vw) calc(5px + 0.4vw); letter-spacing:0px; background-color:transparent; transition:background-color ease-in 0.2s;} #HeaderMenu nav > div > a:first-of-type{font-size:calc(18px + 0.4rem); font-weight:900;} #HeaderMenu nav > div > a:hover{background-color:#f7941d; transition:background-color ease-out 0.2s;} #MenuIcon{flex:0 0; position:relative; box-sizing:content-box; cursor:pointer; display:block; margin-right:calc(-10px - 0.8vw); background-color:#FFFFFF; transition:background-color ease-in 0.2s; -ms-user-select:none; user-select:none; border:none;} #MenuIcon > div, #MenuIcon > div > div{position:absolute; display:block; pointer-events:none;} #MenuIcon > div{width:32px; height:24px; top:50%; left:50%; transform:translate(-50%,-50%);} #MenuIcon .Default{height:4px; top:0px; left:0px; width:32px; opacity:1; background-color:#333333;} #MenuIcon > div > div:nth-of-type(1){transform:translate(0px, 0px); transition:width ease-in 0.1s, opacity ease-in 0.1s; transition-delay:0.05s;} #MenuIcon > div > div:nth-of-type(2){transform:translate(0px, 10px); transition:width ease-in 0.2s, opacity ease-in 0.2s; transition-delay:0.15s;} #MenuIcon > div > div:nth-of-type(3){transform:translate(0px, 20px); transition:width ease-in 0.3s, opacity ease-in 0.3s; transition-delay:0.25s;} #MenuIcon > div > div.Extend{height:4px; top:0px; left:0px; width:0px; transform-origin:center center; opacity:0; background-color:#FFFFFF;} #MenuIcon > div > div:nth-of-type(4){transform:translate(-3px, -2px) rotate(0deg); transition:width ease-in 0.1s, opacity ease-in 0.1s, transform ease-in 0.1s;} #MenuIcon > div > div:nth-of-type(5){transform:translate(-3px, 22px) rotate(0deg); transition:width ease-in 0.3s, opacity ease-in 0.3s, transform ease-in 0.3s;} #MenuIcon.Expand{background-color:#fbba00; transition:background-color ease-out 0.2s;} #MenuIcon.Expand .Default{width:0px; opacity:0;} #MenuIcon.Expand > div > div:nth-of-type(1){transition:width ease-out 0.1s, opacity ease-out 0.1s;} #MenuIcon.Expand > div > div:nth-of-type(2){transition:width ease-out 0.2s, opacity ease-out 0.2s;} #MenuIcon.Expand > div > div:nth-of-type(3){transition:width ease-out 0.3s, opacity ease-out 0.3s;} #MenuIcon.Expand .Extend{width:34px; opacity:1;} #MenuIcon.Expand > div > div:nth-of-type(4){transform:translate(0px, 10px) rotate(45deg); transition:width ease-out 0.1s, opacity ease-out 0.1s, transform ease-out 0.1s; transition-delay:0.05s;} #MenuIcon.Expand > div > div:nth-of-type(5){transform:translate(0px, 10px) rotate(-45deg); transition:width ease-out 0.25s, opacity ease-out 0.25s, transform ease-out 0.25s; transition-delay:0.1s;} #HeaderMenu nav > #MenuLang{flex:0 0 150px; display:flex; flex-wrap:nowrap; overflow:hidden; height:46px; position:relative; margin:calc(20px + 0.3vw) calc(15px + 0.4vw); padding:0px; order:1; border:1px solid rgba(255,255,255,1); border-radius:16px;} #HeaderMenu nav > #MenuLang > div{flex:0 0 50%; height:44px; line-height:44px; font-size:18px; letter-spacing:0px; text-align:center; user-select:none;} #HeaderMenu nav > #MenuLang > div:first-child{border-right:1px solid rgba(255,255,255,1)} #HeaderMenu nav > #MenuLang > div a{width:100%; height:100%; top:0px; left:0px; bottom:0px; right:0px; display:block;} #HeaderMenu nav > #MenuLang > div.Big5{font-weight:500; border-right:1px solid rgba(255,255,255,1);} #HeaderMenu nav > #MenuLang > div.GB{font-weight:900;} #HeaderMenu nav > #MenuLang > div, #HeaderMenu nav > #MenuLang > div a{color:rgba(255,255,255,1); background-color:transparent;} #HeaderMenu nav > #MenuLang > div.Selected, #HeaderMenu nav > #MenuLang > div.Selected a{color:rgba(255,255,255,1); background-color:#f7941d;} #HeaderMenu .Video::before, #HeaderMenu .Video::after{display:none;} #HeaderMenu nav > #SearchIco{flex:0 0 70px; order:1; border:none; margin-top:calc(7px + 0.3vw);} #HeaderMenu nav > #SearchIco a:hover{background-color:transparent;} #HeaderMenu nav > #SearchIco a{padding:0px; width:34px; height:34px;} #HeaderMenu nav > #SearchIco svg{width:100%; height:100%; fill:#FFFFFF;} #HeaderMenu nav > #MemberIco{flex:0 0 150px; display:flex; flex-wrap:nowrap; height:46px; position:relative; margin:calc(20px + 0.3vw) calc(15px + 0.4vw); padding:0px; order:1; border:1px solid rgba(255,255,255,0.6); border-radius:16px;} #HeaderMenu.Lang-en nav > #MemberIco{flex:0 0 160px;} #HeaderMenu nav > #MemberIco > div{flex:0 0 100%; height:44px; line-height:44px; font-size:18px; letter-spacing:0px; text-align:center; user-select:none; border-radius:16px; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start;} #HeaderMenu nav > #MemberIco > div a{width:100%; height:100%; top:0px; left:0px; bottom:0px; right:0px; display:block; font-weight:500;} #HeaderMenu nav > #MemberIco > div a:nth-of-type(2){background-color:rgba(0,0,0,0.2) !important; border-top-right-radius:16px !important; border-bottom-right-radius:16px !important;} #HeaderMenu nav > #MemberIco > div, #HeaderMenu nav > #MemberIco > div a{color:rgba(255,255,255,0.6); background-color:transparent;} #HeaderMenu nav > #MemberIco > div.Selected, #HeaderMenu nav > #MemberIco > div.Selected a{color:rgba(255,255,255,1);} #HeaderMenu nav > #MemberIco > div{display:none;} #HeaderMenu nav > #MemberIco > div.Selected{display:flex; background-color:#f7941d;} @media only screen and (min-width:660px){ #MenuIcon{margin-right:calc(-15px - 1vw);} } @media only screen and (min-width:1480px){ .HeaderWrapper{overflow:visible;} #HeaderMenu{flex:0 1 100%; height:100%; order:1;} #HeaderMenu nav{height:100%; display:flex; opacity:1; flex-wrap:nowrap; justify-content:flex-end; align-items:flex-start; align-content:flex-end; overflow:visible; padding:0px; position:relative; top:0px; background-color:#FFFFFF;} #HeaderMenu nav > div{flex:0 1 1.8rem; width:1.8rem; height:auto; padding:0px; border-bottom:none; display:flex; flex-flow:column; margin-top:0.5rem; transition:0.2s ease-in; border-radius:6px; overflow:hidden; box-shadow:0px 20px 20px -8px rgba(0,0,0,0);} #HeaderMenu nav > div { flex:0 1 auto; width:auto; } #HeaderMenu nav > div.Selected > a:first-of-type{color:#fbba00; font-weight:bold;} #HeaderMenu nav > div.Selected:hover, #HeaderMenu nav > div.Selected a:hover{color:#000000;} #HeaderMenu nav > div > a:first-of-type, #HeaderMenu nav > div > a{font-size:calc(12px + 0.1rem); font-weight:500; padding:calc(5px + 0.5vw) 0; color:#000000; transition:none; width:100%; text-align:center;} #HeaderMenu nav > div > a{display:none; opacity:0; border-top:1px solid rgba(255,255,255,0.5); transition:0.2s ease-in; word-break:normal; font-weight:bold !important; letter-spacing:-1px;} #HeaderMenu nav > div > a:first-of-type, #HeaderMenu nav > div > a{padding:calc(5px + 0.5vw) 10px;} #HeaderMenu nav > div > a{display:none; opacity:0; border-top:1px solid rgba(255,255,255,0.5); transition:0.2s ease-in; word-break:normal; font-weight:bold !important; letter-spacing:-1px;} #HeaderMenu nav > div > a:first-of-type{display:block; opacity:1; border-top:0;} #HeaderMenu nav > div:not(#MenuLang):not(#SearchIco):hover{background-color:#fbba00; box-shadow:0px 20px 20px -8px rgba(0,0,0,0.3); transition:0.1s ease-out;} #HeaderMenu nav > div:not(#MenuLang):not(#SearchIco):hover{ padding-left:0px; padding-right:0px; } #HeaderMenu nav > div:not(#MenuLang):not(#SearchIco):hover a{ padding-left:10px; padding-right:10px; } #HeaderMenu nav > div:not(#MenuLang):not(#SearchIco):hover a:first-of-type, #HeaderMenu nav > div:not(#MenuLang):hover a{font-weight:500; color:#FFFFFF; display:block; opacity:1; transition:0.2s opacity ease-out;} #MenuIcon{display:none;} #HeaderMenu nav > #MenuLang{flex:0 0 70px; height:30px; margin:0px 0px 0px 1vw; order:2; border:1px solid #333333; border-radius:6px; align-self:center;} #HeaderMenu nav > #MenuLang:hover{box-shadow: none;} #HeaderMenu nav > #MenuLang{background-color:transparent;} #HeaderMenu nav > #MenuLang > div:first-child{position:absolute; top:0%; left:0px; width:50%; height:28px; line-height:28px; font-size:16px; border-right:#000000 1px solid;} #HeaderMenu nav > #MenuLang > div:last-child{position:absolute; top:0%; right:0px; width:50%; height:28px; line-height:28px; font-size:16px;} #HeaderMenu nav > #MenuLang > div, #HeaderMenu nav > #MenuLang > div a{color:#000000;} #HeaderMenu nav > #MenuLang > div.Selected{display:none;} #HeaderMenu nav > #MemberIco{flex:0 0 120px; height:36px; align-self:center; margin:0px 0px 0px 1vw; order:2; background:rgb(247,166,0); background:-moz-linear-gradient(125deg, rgba(247,166,0,1) 0%, rgba(255,223,67,1) 100%); background:-webkit-linear-gradient(125deg, rgba(247,166,0,1) 0%, rgba(255,223,67,1) 100%); background:linear-gradient(125deg, rgba(247,166,0,1) 0%, rgba(255,223,67,1) 100%); -webkit-box-shadow:0px 10px 10px -5px rgb(0,0,0,0.3); box-shadow:0px 10px 10px -5px rgb(0,0,0,0.3); border-radius:6px; border:none; transition:-webkit-box-shadow ease-out 0.2s, box-shadow ease-out 0.2s} #HeaderMenu nav > #MemberIco > div{position:absolute; top:0%; left:0px; width:100%; height:36px; line-height:36px; font-size:16px; text-shadow:0px 0px 6px rgb(0,0,0,0.3);} #HeaderMenu nav > #MemberIco > div, #HeaderMenu nav > #MemberIco > div a{border-radius:0px !important; background-color:transparent !important;} #HeaderMenu nav > #MemberIco:hover{-webkit-box-shadow:0px 5px 10px -5px rgba(0,0,0,0.5); box-shadow:0px 5px 10px -5px rgba(0,0,0,0.5); transition:all ease-in 0.1s;} #HeaderMenu nav > #MemberIco > div a:nth-of-type(2){border-top-right-radius:6px !important; border-bottom-right-radius:6px !important;} #HeaderMenu nav .WeeklyTopic, #HeaderMenu nav .Game, #HeaderMenu nav .Popular, #HeaderMenu nav .Event{display:none;} #HeaderLogo{flex:1 0 auto;} #HeaderMenu nav > #SearchIco{flex:0 0 30px; margin:0px 0px 0px 1vw; order:3; align-self:center;} #HeaderMenu nav > #SearchIco:hover{background-color:transparent;} #HeaderMenu nav > #SearchIco a{width:26px; height:26px;} #HeaderMenu nav > #SearchIco svg{fill:#333333;} } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { header{position:fixed; height:100px;} #HeaderLogo{flex:1 0 300px;} #HeaderMenu nav > div{padding-right:0px; padding-left:0px;} } /* Footer *********************************************************************************************************************************************************************************************/ footer{width:100%; background-color:#FFFFFF; border-top:1px solid #E2E3E4;} footer a, body.Dark footer a{color:#333333;} footer a:hover, .body.Dark footer a:hover{color:#666666;} footer .ADVWrapper{margin:0px auto; padding:calc(3vw + 25px) 0px;} footer .ADVWrapper a > *{width:100%; max-width:100%; margin:auto;} footer .Subscription{padding-top:calc(1vw + 25px); padding-bottom:calc(1vw + 25px); display:block; border-top:1px solid #E2E3E4;} body.DisableSubscription footer .Subscription{display:block;} footer .Subscription > div{width:auto; margin:calc(0.8vw + 8px) 0px; font-size:calc(28px + 1vw); font-weight:900;} footer .Subscription .SubscriptionBox{display:flex; flex-wrap:wrap; width:100%; max-width:1000px; align-items:center; justify-content:space-between; margin:0px; padding:2px;} footer .Subscription .SubscriptionButton{flex:0 0 auto; background-color:#333333; height:42px; font-size:calc(15px + 0.3vw); font-weight:500; color:#FFFFFF; cursor:pointer; line-height:42px; text-align:center; padding:0vw calc(10px + 1vw); transition:background-color ease-in 0.3s; border-radius:6px;} footer .Subscription .SubscriptionButton:hover{background-color:#FBBA00; transition:background-color ease-out 0.2s;} footer .Subscription .SubscriptionInput{flex:1 1 auto; font-size:0px; border:1px solid rgba(0,0,0,0.2); border-radius:6px; margin-right:10px;} footer .Subscription .SubscriptionInput input{width:calc(100% - 10px); height:30px; margin:5px; border:none; font-size:calc(15px + 0.3vw);} footer .MapWrapper{width:100%; background-color:#EDEDED; padding:calc(1vw + 25px) 0px; border-top:1px solid #cccccc; border-bottom:1px solid #cccccc;} footer .MapContainer{display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start; align-content:flex-start;} footer .MapContainer > div{flex:0 0 auto; padding-left:calc(0.8vw + 8px);} footer .MapContainer > div a{font-size:calc(13px + 0.1vw); font-weight:500; display:none; line-height:110%; margin:10px 0px; letter-spacing:0px;} footer .MapContainer > div a:first-of-type, footer .MapContainer > div.StaticTopic a{font-size:calc(14px + 0.2vw); font-weight:900; display:block;} footer .MapContainer > div.StaticTopic{display:flex; flex-wrap:nowrap; align-items:center;} footer .MapContainer > div.StaticTopic a{padding-left: calc(0.8vw + 8px);} footer .MapContainer > div.StaticTopic a:first-of-type{padding-left:0px;} footer .FooterWrapper{display:flex; flex-wrap:wrap; flex-flow:column; align-items:flex-start; justify-content:flex-start; padding-top:calc(1vw + 25px); padding-bottom:calc(1vw + 25px);} footer .FooterWrapper > div{flex:0 0 100%;} footer .CorpInfoWrapper, footer .SNSWrapper{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start;} footer .CorpInfoWrapper{order:3; margin-top:calc(1vw + 25px);} footer .CorpInfoWrapper > a{flex:0 0 auto; padding:5px 0.18rem; font-size:15px; font-weight:500; line-height:110%;} footer .CorpInfoWrapper > a::after{content:"|"; font-size:16px; line-height:100%; font-weight:100; padding-left:0.3rem;} footer .CorpInfoWrapper > a:last-of-type::after{content:""; padding-left:0px;} footer .CorpInfoWrapper .CopyrightStatement{font-size:14px; font-weight:500; margin-top:20px; flex:0 0 100%;} #FooterLogo{flex:0 0 auto; height:100px; overflow:hidden; position:relative; padding:0.8vh 0px;} #FooterLogo > *{display:block; height:100%;} #FooterLogo a{position:absolute; top:0px; left:0px; right:0px; bottom:0px; z-index:2;} #FooterLogo .HeaderLogoFallback{background-image:url("../images/logo.png"); background-size:contain; background-repeat:no-repeat; background-position:left center; width:100%; height:100%;} footer .SNSWrapper{padding:calc(1vw + 25px) 0px; order:2;} footer .SNSWrapper > div{flex:0 0 auto; align-self:center; padding:0 0.1rem;} footer .SNSWrapper > div > a{display:block; font-size:0px;} footer .SNSWrapper > div svg{width:40px; height:40px; fill:#333333; transition:fill ease-in 0.3s;} footer .SNSWrapper > div svg:hover{fill:#FBBA00; transition:fill ease-out 0.2s;} #FooterLang{flex:0 0 auto; width:36px; display:block; height:36px; position:relative; margin:0 0 0 0.3rem; padding:0px; border:1px solid #333333; border-radius:6px; align-self:flex-start;} #FooterLang > div{width:100%; height:34px; user-select:none; position:absolute; top:0px; left:0px; text-align:center;} #FooterLang > div a{position:absolute; top:0%; left:0px; width:34px; height:34px; line-height:34px; font-size:15px; display:block; text-align:center;} #FooterLang > div, #FooterLang > div a{color:#000000;} #FooterLang > div.Big5{font-weight:500; border-right:1px solid rgba(255,255,255,0.6);} #FooterLang > div.GB{font-weight:900;} #FooterLang > div.Selected{display:none;} @media only screen and (min-width:660px){ footer .MapContainer > div{flex: 0 0 20%; padding: calc(0.8vw + 8px);} footer .MapContainer > div a:first-of-type{padding:0px;} footer .MapWrapper > div a{display:block;} footer .Subscription > div{text-align:center;} footer .Subscription .SubscriptionBox{margin:0 auto; flex-wrap:nowrap;} footer .FooterWrapper{align-items:center; justify-content:center;} footer .CorpInfoWrapper, footer .SNSWrapper{justify-content:center;} footer .CorpInfoWrapper .CopyrightStatement{text-align:center;} #FooterLogo{height:120px;} footer .MapContainer > div.StaticTopic{flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start;} footer .MapContainer > div.StaticTopic a{flex:0 0 100%; padding-left:0px;} } @media only screen and (min-width:900px){ footer .MapContainer > div a:first-of-type{padding:calc(0.2vw + 4px) 0px;} footer .MapContainer > div{flex:0 0 16%;} } @media only screen and (min-width:1200px){ footer .FooterWrapper{flex-wrap:nowrap; flex-flow:row; align-items:center;} footer .FooterWrapper > div{flex:1 0 auto;} footer .MapContainer > div{flex:1 0 11.1%;} footer .FooterWrapper > .CorpInfoWrapper{order:2; margin-top:0px; flex:1 1 700px;} footer .SNSWrapper{order:3; margin-left:1rem; flex:0 0;} footer .CorpInfoWrapper, footer .SNSWrapper{justify-content:flex-end;} footer .CorpInfoWrapper .CopyrightStatement{text-align:right; margin-top:5px; margin-bottom:0px;} footer .SNSWrapper{padding:0;} footer .CorpInfoWrapper > a:last-of-type{padding-right:0px;} } @media screen and (-ms-high-contrast: active) and (min-width:1200px), (-ms-high-contrast: none) and (min-width:1200px){ footer .MapContainer > div{flex:1 1; padding:calc(0.4vw + 8px);} #FooterLogo{text-align:left;} #FooterLogo > *{display:block; margin-left:0px !important;} } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){ #FooterLogo{width:372px; text-align:center;} #FooterLogo > *{margin-left:auto; margin-right:auto;} } @media screen and (-ms-high-contrast: active) and (max-width: 660px), (-ms-high-contrast: none) and (max-width: 660px){ #FooterLogo{text-align:left !important;} #FooterLogo > *{margin-left:0px !important; margin-right:auto;} } /* Layout *********************************************************************************************************************************************************************************************/ #MainWrapper{width:100%; min-height:100%; position:relative;} .Container{width:100%; padding:0px calc(10px + 0.8vw);} .Container.NoPadding{padding:0px !important;} .Container.Flex{display:flex; flex-wrap:nowrap;} .Container.Flex .Story{flex:1 1 auto;} .Container.Full, .LayoutWrapper.Full{max-width:none;} .LayoutWrapper{width:100%; padding:0px; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-end;} .LayoutContainer{flex:0 0 100%; display:flex; flex-wrap:wrap; align-content:flex-start;} .LayoutContainer.Col-1, .LayoutContainer.Col-2{flex-basis:100%; width:100%; overflow:hidden; justify-content:flex-start;} .LayoutContainer > div, .LayoutContainer > section{padding:0px calc(4px + 1.2vw); width:100%; overflow:hidden;} .Layout-Weekly .LayoutContainer > div, .Layout-Weekly .LayoutContainer > section{padding:0px;} .LayoutContainer > div, .LayoutContainer > section.wPadding{padding:calc(25px + 2vw) calc(4px + 1.2vw);} .LayoutContainer.Full{flex-basis:100%;} .LayoutContainer.Full .Container{margin:auto;} .Layout-Global_TemplateA .LayoutContainer > div, .LayoutContainer > section{padding:0px;} .Layout-Global_TemplateA .LayoutContainer.Col-2 .Container{padding:calc(25px + 2vw) calc(15px + 1vw); height:100%;} .Weekly .GridWrapper h3{font-size:1.2rem; margin:0px; line-height:130%;} .specialweekly > .Container > .Static > .CarouselInner{height:auto;} @media only screen and (min-width:660px){ .Container{max-width:1600px; margin:0px auto; padding:0px calc(15px + 1vw);} .LayoutContainer > div, .LayoutContainer > section{padding:0px calc(15px + 1vw);} .LayoutContainer > section.wPadding{padding:calc(25px + 2vw) calc(15px + 1vw);} .Layout-1-2 .LayoutContainer > div, .Layout-1-2 .LayoutContainer > section{width:calc(100% - (50vw - 800px)); margin:0px;} .Layout-1-2 .LayoutContainer.Col-1, .Layout-1-2 .LayoutContainer.Col-2{flex-basis:50%;} .Layout-1-2 .LayoutContainer:first-of-type{justify-content:flex-end;} .Layout-1-2 .LayoutContainer:last-of-type{justify-content:flex-start;} .Layout-1-2 .LayoutContainer:first-of-type > div{padding-right:calc(15px + 1vw); justify-content:flex-end;} .Layout-1-2 .LayoutContainer:last-of-type > div{padding-left:calc(15px + 1vw); justify-content:flex-start;} .LayoutWrapper{max-width:1600px; margin:auto; flex-wrap:nowrap; align-items:stretch;} .Layout-Global_TemplateA.LayoutWrapper{flex-wrap:wrap; justify-content:flex-start; align-items:stretch;;} .Layout-Global_TemplateA .LayoutContainer > div, .LayoutContainer > section{padding:0px;} .Layout-Global_TemplateA .CarouselWrapper{padding-left:calc(15px + 1vw); padding-right:calc(15px + 1vw);} .Layout-Global_TemplateA .CarouselWrapper .Container{padding:0px;} .Layout-Global_TemplateA .LayoutContainer.Col-2 section.Half{flex:0 0 50%; margin:0px;} .Layout-Global_TemplateA .LayoutContainer.Col-2 section:nth-of-type(odd).Half{padding-right:0px;} .Layout-Global_TemplateA .LayoutContainer.Col-2 section:nth-of-type(even).Half{padding-left:0px;} .Layout-Weekly{flex-wrap:wrap;} .Layout-Weekly .LayoutContainer.Col-1, .Layout-Weekly .LayoutContainer.Col-2{flex-basis:100%;} .Layout-Weekly .CarouselWrapper .Container, .Layout-Weekly .CarouselInner{height:auto;} .Weekly .GridWrapper h3{font-size:0.5rem;} } @media only screen and (min-width:900px){ .Layout-1-2 .LayoutContainer.Col-1{flex-basis:40%;} .Layout-1-2 .LayoutContainer.Col-2{flex-basis:60%;} .Layout-Weekly .LayoutContainer.Col-1{flex-basis:calc(34.5% - 0.5vw - 8px); margin-right:calc(0.5vw + 8px); margin-bottom:0px;} .Layout-Weekly .LayoutContainer.Col-2{flex-basis:calc(65.5% - 0.5vw - 8px); margin-left:calc(0.5vw + 8px);} .Layout-Weekly .Header-Large{font-size:0.6rem;} .Layout-Weekly .CarouselWrapper{padding-bottom:calc(3vw + 50px);} .Layout-Weekly .CarouselWrapper.Static .ButtonWrapper{position:absolute; width:100%; bottom:calc(1.5vw + 12px); left:0px;} .Layout-Weekly .CarouselWrapper .CarouseIndicatorWrapper{position:absolute; bottom:calc(1vw + 20px); left:0px;} .Layout-Weekly section, .Layout-Weekly .Container.NoPadding, .Layout-Weekly .CarouselWrapper{height:100%;} } @media only screen and (min-width:1200px){ .LayoutContainer > section .Container{padding:0px;} .Layout-Global_TemplateA .LayoutContainer{position:-webkit-sticky; position:sticky; bottom:0px; align-self:flex-end; overflow:inherit;} .Layout-Global_TemplateA p, .Layout-Global_TemplateA li{font-size:calc(0.13rem + 11px);} .Layout-Global_TemplateA h3{font-size:calc(0.13rem + 14px);} .Layout-Global_TemplateA.LayoutWrapper{flex-wrap:nowrap;} .Layout-Global_TemplateA .LayoutContainer > div, .LayoutContainer > section{padding:0px calc(15px + 1vw);} .Layout-Global_TemplateA .LayoutContainer.Col-1{flex:1 1; overflow:hidden; border-right:1px solid #E2E3E4;} .Layout-Global_TemplateA .LayoutContainer.Col-2{flex-basis:calc(360px + 2vw);} .Layout-Global_TemplateA .LayoutContainer.Col-2 .Container{padding:calc(10px + 0.8vw);} .Layout-Global_TemplateA .LayoutContainer.Col-2 .SectionHeader{padding-bottom:calc(4px + 1.2vw);} .Layout-Global_TemplateA .LayoutContainer.Col-2 section:nth-of-type(odd).Half, .Layout-Global_TemplateA .LayoutContainer.Col-2 section:nth-of-type(even).Half{padding:0px calc(15px + 1vw);} .Layout-Global_TemplateA .LayoutContainer.Col-2 section.Half{margin-bottom:calc(15px + 1vw);} .Layout-Global_TemplateA .LayoutContainer.Col-2 section.Half{flex:0 1 100%;} .Layout-Global_TemplateA .SectionHeader.Vertical{flex-wrap:wrap;} .Layout-Global_TemplateA .LayoutContainer.Col-2 .SectionHeader > div.Header-Medium{font-size:0.45rem;} .Layout-Global_TemplateA .SectionHeader.Vertical > div.Header-Medium{font-size:0.45rem; flex-basis:0.8rem; margin:0.2rem 0px;} .Layout-Global_TemplateA .SectionHeader.Vertical > div.Header-Large{flex:0 0 100%; padding-left:0px;} .Layout-Global_TemplateA .Story .Story-Wrapper{flex-wrap:wrap;} .Layout-Global_TemplateA .Story .Story-Wrapper .Story-Col, .Layout-Global_TemplateA .Story .Story-Wrapper .Story-Col.FloatThumb{flex:0 0 100%;} .Layout-Global_TemplateA .Story .Story-Wrapper .Story-Col.FloatThumb .Thumbnail{min-width:0; width:100%; margin-left:0px;} .Layout-Global_TemplateA .Story .Story-Wrapper .Headline p:first-of-type{margin-top:0px;} .Layout-Global_TemplateA .Story .Story-Wrapper .Headline p:last-of-type{margin-bottom:0.4rem;} .Layout-Global_TemplateA .LayoutContainer .HomeEventBlock{margin:0.8vw 0px;} .Layout-Global_TemplateA .LayoutContainer .HomeEventBlock .Container{padding:calc(10px + 0.8vw) 0px;} .Layout-Global_TemplateA .LayoutContainer .HomeEventBlock .Story .Story-Wrapper div:first-of-type.Story-Col.FloatThumb .Thumbnail{margin:0px 0px calc(15px + 1vw) 0px;} .Layout-Global_TemplateA .Story .Headline h3{margin:0px 0px 0.8vw 0px;} } @media only screen and (min-width:1600px){ .Layout-1-2 .LayoutContainer:first-of-type > div{padding-right:calc(15px + 2vw);} .Layout-1-2 .LayoutContainer:last-of-type > div{padding-left:calc(15px + 2vw);} .Layout-Weekly .LayoutContainer.Col-1{flex-basis:calc(35% - 0.5vw - 8px);} .Layout-Weekly .LayoutContainer.Col-2{flex-basis:calc(65% - 0.5vw - 8px);} } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #MainWrapper{margin-top:100px;} .Layout-Global_TemplateA .LayoutContainer{top:0px; bottom:auto; align-self:flex-start; position:relative;} } /* Page Title *********************************************************************************************************************************************************************************************/ .PageTitle{margin-top:calc(10px + 0.8vw); margin-bottom:calc(16px + 0.8vw);} .PageTitle > div{padding:calc(0.5vw + 5px) 0px;} .PageTitle > div.SectionNameWrapper{padding-top:5px;} .PageTitle h2 span{display:inline-block; padding-right:1vw;} .PageTitle h3{margin:calc(4px + 0.4rem) 0px;} /* Columnist Bio *********************************************************************************************************************************************************************************************/ .BioWrapper{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; margin-bottom:calc(0.8vw + 8px);} .BioWrapper > div{margin-right:10px;} .BioWrapper > div:last-of-type{margin-right:0px;} .BioImg{flex:0 0 80px; height:80px; overflow:hidden; border-radius:50%;} .BioImg img{width:100%;} .BioText{flex:1 0 calc(100% - 80px - 20px);} .BioText p{font-weight:500; font-size:17px; margin:0px; color:#FFFFFF;} .BioText p:first-child{font-weight:900; font-size:22px;} .BioButton{flex:0 0 auto; margin:calc(8px + 0.8vw) 0px;} @media only screen and (min-width:660px){ .BioText{flex:1 1 auto;} .BioButton{margin:0px;} } /* Story *********************************************************************************************************************************************************************************************/ .Story{width:100%; position:relative;} .Story .Thumbnail{position:relative; overflow:hidden; width:100%; height:0px; padding-top:52.333333%; display:block;} .Story .Headline{position:relative; margin:0px; width:100%;} .Story .Headline > div{display:inline-block; margin:20px 0px;} .Story .Headline h3{margin:0px 0px 1.5vw 0px;} .Story .Headline ul{list-style:none; padding:0px; font-size: calc(0.1rem + 16px);} .Story article > a{display:block; position:absolute; top:0px; left:0px; bottom:0px; right:0px; z-index:0; pointer-events:all;} .Story article{pointer-events:none;} .Story .Thumbnail img{width:102%; height:102%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); object-fit:cover; transition:width ease-out 0.3s, height ease-out 0.3s;} .Story article:hover .Thumbnail img{width:106%; height:106%; transition:width ease-in 0.2s, height ease-in 0.2s;} .Story .Thumbnail.Shadow{-webkit-box-shadow:0px 15px 30px -8px rgba(0,0,0,0.6); box-shadow:0px 15px 30px -8px rgba(0,0,0,0.6);} .Story .Story-Wrapper{width:100%; display:flex; flex-wrap:wrap; align-items:flex-start;} .Story .Story-Wrapper .Story-Col, .Story .Story-Wrapper .Story-Col.FloatThumb{flex:0 0 100%;} .Story .Story-Wrapper .Story-Col.FloatThumb .Thumbnail{width:100%; margin:calc(15px + 0.8vw) auto;} .Story .Header-Medium a{pointer-events:all;} .Story .Story-Wrapper .Story-Col{z-index:1;} .LayoutContainer.White-Text a:hover, .LayoutContainer .Container.White-Text a:hover{color:#FFFFFF !important;} .HomeEventBlock .Story article{pointer-events:auto;} .HomeEventBlock .Story article:hover .Thumbnail img{width:102%; height:102%; transition:none;} .HomeEventBlock .Story article .Thumbnail img{transition:width ease-out 0.3s, height ease-out 0.3s !important;} .HomeEventBlock .Story article .Thumbnail:hover img{width:106%; height:106%; transition:width ease-in 0.2s, height ease-in 0.2s;} .HomeEventBlock .Button{display:inline-block;} .HomeEventBlock .CallForAction{padding-bottom:30px;} .HomeEventBlock .SectionHeader{padding:0px 0px calc(1vw + 12px) 0px;} @media only screen and (min-width:660px), only screen and (-webkit-min-device-pixel-ratio:2) and (min-width:660px), only screen and (min-device-pixel-ratio: 2) and (min-width:660px), only screen and (min-resolution:192dpi) and (min-width:660px), only screen and (min-resolution:2dppx) and (min-width:660px){ .Story .Story-Wrapper{flex-wrap:nowrap;} .Story .Story-Wrapper .Story-Col{flex:1 1 auto;} .Story .Story-Wrapper .Story-Col.FloatThumb{flex:0 1 auto;} .Story .Story-Wrapper .Story-Col.FloatThumb .Thumbnail{width:calc(100% - 15px - 1vw); max-width:520px; min-width:330px; margin:0px 0px 0px calc(15px + 1vw);} .Story .Story-Wrapper div:first-of-type.Story-Col.FloatThumb .Thumbnail{margin:0px calc(15px + 1vw) 0px 0px;} } @media only screen and (min-width:900px){ .Story .Story-Wrapper .Story-Col.FloatThumb .Thumbnail{min-width:450px;} } @media only screen and (min-width:1200px){ .Story .Story-Wrapper .Story-Col.FloatThumb .Thumbnail{min-width:600px;} } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){ .Story .Thumbnail img{width:104%; height:auto;} .Story article:hover .Thumbnail img{width:108%; height:auto;} } /* Carousel *********************************************************************************************************************************************************************************************/ .CarouselWrapper{width:100%; height:auto; margin-bottom:calc(1.6vw + 20px); background-size:cover; background-position:center; padding:3vw; margin:0%; font-size:0px; position:relative; overflow:hidden;} .CarouselWrapper > .Container{padding:0px;} .CarouselInner{width:auto; height:100%; position:relative; top:0%; left:0%; display:flex; flex-wrap:nowrap; align-items:stretch; padding-top:2vw;} .CarouselWrapper.Static .CarouselInner{width:100%; flex-wrap:wrap; justify-content:space-around;} .CarouselWrapper.Static .CarouselInner .Story{flex:0 0 100%; margin:calc(0.8vw + 8px) 0px;} .CarouselWrapper.Static .CarouselInner .Story:first-of-type{margin-top:0px;} .CarouselWrapper.Static .CarouselInner .Story:last-of-type{margin-bottom:0px;} .CarouselWrapper.Static .ButtonWrapper{width:auto; margin-top:calc(1.6vw + 16px); text-align:center;} .CarouselWrapper.Static .ButtonWrapper .Button{display:inline-block; background-color:#000000;} .CarouselInner > *{flex-shrink:0; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;} .specialweekly > .Container > .Static > .CarouselInner{height:auto;} .CarouseIndicatorWrapper{position:relative; width:100%; text-align:center; margin-top:calc(1vw + 20px);} .CarouseIndicator{position:relative; display:inline-block; z-index:10000000000; padding:10px 15px; background-color:rgba(0,0,0,0.5); border-radius:16px; font-size:0px;} .CarouseIndicator > span.swiper-pagination-bullet{width:10px; height:10px; background-color:transparent; border:1px solid #FFFFFF; opacity:1; overflow:hidden; list-style:none; margin:0px 3px; display:inline-block; border-radius:100%; outline:none;} .CarouseIndicator > span.swiper-pagination-bullet-active{border-color:#FFFFFF; background-color:#FFFFFF; cursor:default; color:#FFFFFF;} .CarouseIndicator.Inv{background-color:rgba(255,255,255,0.5);} .CarouseIndicator.Inv > span.swiper-pagination-bullet{border:1px solid #333333;} .CarouseIndicator.Inv > span.swiper-pagination-bullet-active{border-color:#333333; background-color:#333333;} .CarouseIndicator.Numbering, .CarouseIndicator.Numbering{text-align:center; background-color:transparent;} .CarouseIndicator.Numbering > span{width:calc(36px + 0.8vw); height:calc(36px + 0.8vw); color:#999999; border-radius:50%; padding:0px; text-align:center; margin:2px; border-color:#E2E3E4; font-size:calc(14px + 0.5vw); line-height:calc(36px + 0.8vw); font-weight:500; letter-spacing:0px;} .CarouseIndicator.Numbering > span.swiper-pagination-bullet-active{border-color:#333333; color:#FFFFFF; background-color:#333333;} .CarouseIndicator.Numbering.Inv > span{color:#FFFFFF; border-color:rgba(255,255,255,0.7) !important;} .CarouseIndicator.Numbering.Inv > span.swiper-pagination-bullet-active{border-color:#FFFFFF !important; color:#333333; background-color:#FFFFFF;} .CarouseIndicator.Numbering.Brown > span{color:#683b2b; border-color:#683b2b !important;} .CarouseIndicator.Numbering.Brown > span.swiper-pagination-bullet-active{border-color:#683b2b !important; color:#FFFFFF; background-color:#683b2b;} .swiper-pagination{text-align:center; -webkit-transition:300ms opacity; o-transition:300ms opacity; transition:300ms opacity; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); z-index:10;} .swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer;} .CarouselInner article{display:flex; flex-flow:column; flex-wrap:wrap; flex:0 0 100%;} .CarouselInner .Story{-webkit-box-shadow:0px 20px 40px -10px rgba(0,0,0,0.8); box-shadow:0px 20px 40px -10px rgba(0,0,0,0.8); background-color:#FFFFFF; display:flex; flex-wrap:wrap; align-items:stretch;} .CarouselInner .Story .Headline{background-color:#FFFFFF; flex:1 1 auto;} .CarouselInner .Story .Headline > div{padding:0% 4%; position:relative; display:flex; flex-flow:column; justify-content:space-between; width:100%; height:calc(100% - 40px);} .CarouselInner.Inline .Story .Headline{position:absolute; left:0px; bottom:-1px; color:#FFFFFF; background:rgb(0,0,0); background:-moz-linear-gradient(0deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 100%); background:-webkit-linear-gradient(0deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 100%); background:linear-gradient(0deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 100%); pointer-events:none;} .CarouselWrapper > .Container{padding:0px calc(10px + 0.8vw);} .swiper-button-prev, .swiper-button-next{position:absolute; display:block; width:80px; height:80px; border-radius:50%; overflow:hidden; top:50%; transform:translateY(-50%); -webkit-box-shadow:0px 10px 20px 0px rgba(0,0,0,0.8); box-shadow:0px 10px 20px 0px rgba(0,0,0,0.8); user-select:none; cursor:pointer; z-index:9999999; outline:none;} .swiper-button-prev{left:-40px} .swiper-button-next{right:-40px;} .swiper-button-prev::after, .swiper-button-next::after{content:""; position:absolute; top:0px; left:0px; width:80px; height:80px; z-index:1; background-color:rgba(255,255,255,0.3); -webkit-backdrop-filter:blur(7px); backdrop-filter: blur(7px); transition:background-color ease-in 0.2s;} .swiper-button-next::before, .swiper-button-prev::before{position:absolute; top:25px; font-size:30px; line-height:30px; color:rgba(0,0,0,0.6); display:block; z-index:2;} .swiper-button-next::before{content:"〉"; left:20px;} .swiper-button-prev::before{content:"〈"; left:30px;} .swiper-button-prev:hover::after, .swiper-button-next:hover::after{background-color:rgba(0,0,0,0.8); transition:background-color ease-out 0.2s;} .swiper-button-prev:hover::before, .swiper-button-next:hover::before{color:rgba(255,255,255,1); transition:background-color ease-out 0.2s;} @media only screen and (min-width:660px){ .CarouselWrapper{padding:3vw calc(15px + 0.8vw);} .CarouselWrapper > .Container{padding:0px;} .CarouselWrapper.Static .CarouselInner .Story{flex:1 1; margin:0px calc(0.4vw + 4px);} .CarouselWrapper.Static .CarouselInner .Story:first-of-type{margin-left:0px;} .CarouselWrapper.Static .CarouselInner .Story:last-of-type{margin-right:0px;} } @media only screen and (min-width:1640px){ .CarouselWrapper > .Container{padding:0px calc(15px + 1vw);} } @media only screen and (min-width:1700px){ .CarouselWrapper{padding:3vw 2vw;} } #HomePopular{position:absolute; top:0px; left:0px; height:100%; padding:0px 0.8vw;} #HomePopular .CarouselInner{padding:0.8vw 0px; height:100%;} #HomePopular .CarouselInner .Story{height:100%; overflow:hidden;} #HomePopular .Container{position:absolute; top:0px; left:0vw; height:50px; z-index:2; display:block;} #HomePopular .Container .SectionHeader .Header{background-color:#fbba00; height:auto; padding:0.7vw; line-height:100%; -webkit-box-shadow:0px 10px 20px 0px rgba(0,0,0,0.8); box-shadow:0px 10px 20px 0px rgba(0,0,0,0.8); user-select:none;} #HomePopular .Container .SectionHeader .Header a::after {content:""; padding-left:0px; transition:none;} #HomePopular .Container .SectionHeader .Header a:hover{color:#FFFFFF !important;} /* Weather *********************************************************************************************************************************************************************************************/ #Weather{width:102%; height:102%; margin-bottom:0px; padding:0px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background-color:#CCC; overflow:hidden;} #Weather .CarouselInner{padding-top:0px;} #Weather .City{position:relative; width:100%; height:100%;} #Weather .Skyline{width:100%; height:100%; position:absolute; top:0px; left:0px; bottom:0px; right:0px; background-size:cover; background-position:center center; background-repeat:no-repeat; z-index:1; pointer-events:none;} #Weather .WeatherInfo{display:flex; flex-wrap:wrap; position:absolute; top:0%; left:0%; width:100%; height:100%; overflow:hidden; z-index:2; pointer-events:none; user-select:none; color:#FFFFFF; font-weight:900; text-shadow:0px 0px 6px rgba(0,0,0,0.2); padding:5%;} #Weather .WeatherInfo > div{display:flex; flex-wrap:nowrap; flex:0 0 100%; align-items:center;} #Weather .WeatherInfo > div:last-of-type{align-self:flex-end;} #Weather .WeatherInfo > div:first-child{font-size:calc(20px + 0.3rem); text-align:right; line-height:120%; display:block;} #Weather .WeatherInfo div.WeatherIcon{flex:0 0 calc(36px + 2vw); width:calc(36px + 2vw); height:calc(40px + 2.5vw); background-size:contain; background-repeat:no-repeat; background-position: center center;} #Weather .WeatherInfo div.Temperature{flex:1 1 auto; padding-left:1vw;} #Weather .WeatherInfo div.Temperature p{font-size:calc(11px + 0.2rem); line-height:120%; margin:0px;} #Weather .WeatherInfo div.Temperature p:first-of-type{font-size:calc(18px + 0.2rem);} #Weather .CarouseIndicatorWrapper{position:absolute; bottom:2%; z-index:100; width:100%; overflow:hidden;} #Weather .CarouseIndicator{background-color:transparent;} #Weather .CarouseIndicator > span.swiper-pagination-bullet{width:7px; height:7px;} .CityAnimation{webkit-animation:CityScale 16s forwards; -moz-animation:CityScale 16s forwards; -o-animation:CityScale 16s forwards; animation:CityScale 16s forwards;} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){ .CityAnimation{animation:none;} } @-webkit-keyframes CityScale{ 0% {transform:scale(1,1);} 100% {transform:scale(1.15,1.15);} } @-moz-keyframes CityScale { 0% {transform:scale(1,1);} 100% {transform:scale(1.15,1.15);} } @-o-keyframes CityScale { 0% {transform:scale(1,1);} 100% {transform:scale(1.15,1.15);} } @keyframes CityScale { 0% {transform:scale(1,1); } 100% {transform:scale(1.15,1.15); } } .City.Clear div.WeatherIcon{background-image:url("../images/weather/clear.png?v=2");} .City.Cloudy div.WeatherIcon{background-image:url("../images/weather/cloudy.png?v=2");} .City.Rain div.WeatherIcon{background-image:url("../images/weather/rain.png?v=2");} .City.Snow div.WeatherIcon{background-image:url("../images/weather/snow.png?v=2");} .City.Thunderstorm div.WeatherIcon{background-image:url("../images/weather/thunderstorm.png?v=2");} .City.HongKong.Clear .Skyline{background-image:url("../images/weather/hong_kong/clear.jpg?v=2");} .City.HongKong.Cloudy .Skyline{background-image:url("../images/weather/hong_kong/cloudy.jpg?v=2");} .City.HongKong.Rain .Skyline{background-image:url("../images/weather/hong_kong/rain.jpg?v=2");} .City.HongKong.Snow .Skyline{background-image:url("../images/weather/hong_kong/snow.jpg?v=2");} .City.HongKong.Thunderstorm .Skyline{background-image:url("../images/weather/hong_kong/thunderstorm.jpg?v=2");} .City.Bangkok.Clear .Skyline{background-image:url("../images/weather/bangkok/clear.jpg?v=2");} .City.Bangkok.Cloudy .Skyline{background-image:url("../images/weather/bangkok/cloudy.jpg?v=2");} .City.Bangkok.Rain .Skyline{background-image:url("../images/weather/bangkok/rain.jpg?v=2");} .City.Bangkok.Snow .Skyline{background-image:url("../images/weather/bangkok/snow.jpg?v=2");} .City.Bangkok.Thunderstorm .Skyline{background-image:url("../images/weather/bangkok/thunderstorm.jpg?v=2");} .City.Beijing.Clear .Skyline{background-image:url("../images/weather/beijing/clear.jpg?v=2");} .City.Beijing.Cloudy .Skyline{background-image:url("../images/weather/beijing/cloudy.jpg?v=2");} .City.Beijing.Rain .Skyline{background-image:url("../images/weather/beijing/rain.jpg?v=2");} .City.Beijing.Snow .Skyline{background-image:url("../images/weather/beijing/snow.jpg?v=2");} .City.Beijing.Thunderstorm .Skyline{background-image:url("../images/weather/beijing/thunderstorm.jpg?v=2");} .City.Berlin.Clear .Skyline{background-image:url("../images/weather/berlin/clear.jpg?v=2");} .City.Berlin.Cloudy .Skyline{background-image:url("../images/weather/berlin/cloudy.jpg?v=2");} .City.Berlin.Rain .Skyline{background-image:url("../images/weather/berlin/rain.jpg?v=2");} .City.Berlin.Snow .Skyline{background-image:url("../images/weather/berlin/snow.jpg?v=2");} .City.Berlin.Thunderstorm .Skyline{background-image:url("../images/weather/berlin/thunderstorm.jpg?v=2");} .City.Guangzhou.Clear .Skyline{background-image:url("../images/weather/guangzhou/clear.jpg?v=2");} .City.Guangzhou.Cloudy .Skyline{background-image:url("../images/weather/guangzhou/cloudy.jpg?v=2");} .City.Guangzhou.Rain .Skyline{background-image:url("../images/weather/guangzhou/rain.jpg?v=2");} .City.Guangzhou.Snow .Skyline{background-image:url("../images/weather/guangzhou/snow.jpg?v=2");} .City.Guangzhou.Thunderstorm .Skyline{background-image:url("../images/weather/guangzhou/thunderstorm.jpg?v=2");} .City.KualaLumpur.Clear .Skyline{background-image:url("../images/weather/kuala_lumpur/clear.jpg?v=2");} .City.KualaLumpur.Cloudy .Skyline{background-image:url("../images/weather/kuala_lumpur/cloudy.jpg?v=2");} .City.KualaLumpur.Rain .Skyline{background-image:url("../images/weather/kuala_lumpur/rain.jpg?v=2");} .City.KualaLumpur.Snow .Skyline{background-image:url("../images/weather/kuala_lumpur/snow.jpg?v=2");} .City.KualaLumpur.Thunderstorm .Skyline{background-image:url("../images/weather/kuala_lumpur/thunderstorm.jpg?v=2");} .City.London.Clear .Skyline{background-image:url("../images/weather/london/clear.jpg?v=2");} .City.London.Cloudy .Skyline{background-image:url("../images/weather/london/cloudy.jpg?v=2");} .City.London.Rain .Skyline{background-image:url("../images/weather/london/rain.jpg?v=2");} .City.London.Snow .Skyline{background-image:url("../images/weather/london/snow.jpg?v=2");} .City.London.Thunderstorm .Skyline{background-image:url("../images/weather/london/thunderstorm.jpg?v=2");} .City.Macau.Clear .Skyline{background-image:url("../images/weather/macau/clear.jpg?v=2");} .City.Macau.Cloudy .Skyline{background-image:url("../images/weather/macau/cloudy.jpg?v=2");} .City.Macau.Rain .Skyline{background-image:url("../images/weather/macau/rain.jpg?v=2");} .City.Macau.Snow .Skyline{background-image:url("../images/weather/macau/snow.jpg?v=2");} .City.Macau.Thunderstorm .Skyline{background-image:url("../images/weather/macau/thunderstorm.jpg?v=2");} .City.NewYork.Clear .Skyline{background-image:url("../images/weather/new_york/clear.jpg?v=2");} .City.NewYork.Cloudy .Skyline{background-image:url("../images/weather/new_york/cloudy.jpg?v=2");} .City.NewYork.Rain .Skyline{background-image:url("../images/weather/new_york/rain.jpg?v=2");} .City.NewYork.Snow .Skyline{background-image:url("../images/weather/new_york/snow.jpg?v=2");} .City.NewYork.Thunderstorm .Skyline{background-image:url("../images/weather/new_york/thunderstorm.jpg?v=2");} .City.Osaka.Clear .Skyline{background-image:url("../images/weather/osaka/clear.jpg?v=2");} .City.Osaka.Cloudy .Skyline{background-image:url("../images/weather/osaka/cloudy.jpg?v=2");} .City.Osaka.Rain .Skyline{background-image:url("../images/weather/osaka/rain.jpg?v=2");} .City.Osaka.Snow .Skyline{background-image:url("../images/weather/osaka/snow.jpg?v=2");} .City.Osaka.Thunderstorm .Skyline{background-image:url("../images/weather/osaka/thunderstorm.jpg?v=2");} .City.Paris.Clear .Skyline{background-image:url("../images/weather/paris/clear.jpg?v=2");} .City.Paris.Cloudy .Skyline{background-image:url("../images/weather/paris/cloudy.jpg?v=2");} .City.Paris.Rain .Skyline{background-image:url("../images/weather/paris/rain.jpg?v=2");} .City.Paris.Snow .Skyline{background-image:url("../images/weather/paris/snow.jpg?v=2");} .City.Paris.Thunderstorm .Skyline{background-image:url("../images/weather/paris/thunderstorm.jpg?v=2");} .City.SanFrancisco.Clear .Skyline{background-image:url("../images/weather/sanfrancisco/clear.jpg?v=2");} .City.SanFrancisco.Cloudy .Skyline{background-image:url("../images/weather/sanfrancisco/cloudy.jpg?v=2");} .City.SanFrancisco.Rain .Skyline{background-image:url("../images/weather/sanfrancisco/rain.jpg?v=2");} .City.SanFrancisco.Snow .Skyline{background-image:url("../images/weather/sanfrancisco/snow.jpg?v=2");} .City.SanFrancisco.Thunderstorm .Skyline{background-image:url("../images/weather/sanfrancisco/thunderstorm.jpg?v=2");} .City.Seoul.Clear .Skyline{background-image:url("../images/weather/seoul/clear.jpg?v=2");} .City.Seoul.Cloudy .Skyline{background-image:url("../images/weather/seoul/cloudy.jpg?v=2");} .City.Seoul.Rain .Skyline{background-image:url("../images/weather/seoul/rain.jpg?v=2");} .City.Seoul.Snow .Skyline{background-image:url("../images/weather/seoul/snow.jpg?v=2");} .City.Seoul.Thunderstorm .Skyline{background-image:url("../images/weather/seoul/thunderstorm.jpg?v=2");} .City.Shanghai.Clear .Skyline{background-image:url("../images/weather/shanghai/clear.jpg?v=2");} .City.Shanghai.Cloudy .Skyline{background-image:url("../images/weather/shanghai/cloudy.jpg?v=2");} .City.Shanghai.Rain .Skyline{background-image:url("../images/weather/shanghai/rain.jpg?v=2");} .City.Shanghai.Snow .Skyline{background-image:url("../images/weather/shanghai/snow.jpg?v=2");} .City.Shanghai.Thunderstorm .Skyline{background-image:url("../images/weather/shanghai/thunderstorm.jpg?v=2");} .City.Singapore.Clear .Skyline{background-image:url("../images/weather/singapore/clear.jpg?v=2");} .City.Singapore.Cloudy .Skyline{background-image:url("../images/weather/singapore/cloudy.jpg?v=2");} .City.Singapore.Rain .Skyline{background-image:url("../images/weather/singapore/rain.jpg?v=2");} .City.Singapore.Snow .Skyline{background-image:url("../images/weather/singapore/snow.jpg?v=2");} .City.Singapore.Thunderstorm .Skyline{background-image:url("../images/weather/singapore/thunderstorm.jpg?v=2");} .City.Sydney.Clear .Skyline{background-image:url("../images/weather/sydney/clear.jpg?v=2");} .City.Sydney.Cloudy .Skyline{background-image:url("../images/weather/sydney/cloudy.jpg?v=2");} .City.Sydney.Rain .Skyline{background-image:url("../images/weather/sydney/rain.jpg?v=2");} .City.Sydney.Snow .Skyline{background-image:url("../images/weather/sydney/snow.jpg?v=2");} .City.Sydney.Thunderstorm .Skyline{background-image:url("../images/weather/sydney/thunderstorm.jpg?v=2");} .City.Taipei.Clear .Skyline{background-image:url("../images/weather/taipei/clear.jpg?v=2");} .City.Taipei.Cloudy .Skyline{background-image:url("../images/weather/taipei/cloudy.jpg?v=2");} .City.Taipei.Rain .Skyline{background-image:url("../images/weather/taipei/rain.jpg?v=2");} .City.Taipei.Snow .Skyline{background-image:url("../images/weather/taipei/snow.jpg?v=2");} .City.Taipei.Thunderstorm .Skyline{background-image:url("../images/weather/taipei/thunderstorm.jpg?v=2");} .City.Tokyo.Clear .Skyline{background-image:url("../images/weather/tokyo/clear.jpg?v=2");} .City.Tokyo.Cloudy .Skyline{background-image:url("../images/weather/tokyo/cloudy.jpg?v=2");} .City.Tokyo.Rain .Skyline{background-image:url("../images/weather/tokyo/rain.jpg?v=2");} .City.Tokyo.Snow .Skyline{background-image:url("../images/weather/tokyo/snow.jpg?v=2");} .City.Tokyo.Thunderstorm .Skyline{background-image:url("../images/weather/tokyo/thunderstorm.jpg?v=2");} .City.Toronto.Clear .Skyline{background-image:url("../images/weather/toronto/clear.jpg?v=2");} .City.Toronto.Cloudy .Skyline{background-image:url("../images/weather/toronto/cloudy.jpg?v=2");} .City.Toronto.Rain .Skyline{background-image:url("../images/weather/toronto/rain.jpg?v=2");} .City.Toronto.Snow .Skyline{background-image:url("../images/weather/toronto/snow.jpg?v=2");} .City.Toronto.Thunderstorm .Skyline{background-image:url("../images/weather/toronto/thunderstorm.jpg?v=2");} .City.Vancouver.Clear .Skyline{background-image:url("../images/weather/vancouver/clear.jpg?v=2");} .City.Vancouver.Cloudy .Skyline{background-image:url("../images/weather/vancouver/cloudy.jpg?v=2");} .City.Vancouver.Rain .Skyline{background-image:url("../images/weather/vancouver/rain.jpg?v=2");} .City.Vancouver.Snow .Skyline{background-image:url("../images/weather/vancouver/snow.jpg?v=2");} .City.Vancouver.Thunderstorm .Skyline{background-image:url("../images/weather/vancouver/thunderstorm.jpg?v=2");} /* Pagination *********************************************************************************************************************************************************************************************/ .PaginationWrapper{width:100%; display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:center; margin:calc(2vw + 25px) 0px;} .PaginationWrapper > a{flex:0 0 48px; padding:0px; width:48px; height:48px; margin:0px 0.3vw; font-size:calc(14px + 0.5vw); line-height:48px; text-align:center; font-weight:100; border-radius:50%; background-color:#FFFFFF; user-select:none; letter-spacing:0px; position:relative; display:none; transition:background-color ease-in 0.2s; white-space: nowrap;} .PaginationWrapper > a:hover{background-color:#F2F2F2; transition:background-color ease-out 0.2s;} .PaginationWrapper > a.Selected{flex:0 0 auto; width:auto; padding:0px 5vw; display:flex; align-items:center; transition:none;} .PaginationWrapper > a.Selected::before, .PaginationWrapper > a.Selected::after{display:inline-block; vertical-align:middle; font-size:calc(13px + 0.5vw); line-height:100%;} .PaginationWrapper > a.Selected::before{content:"第"; padding-right:1vw;} .PaginationWrapper > a.Selected::after{content:"頁"; padding-left:1vw;} .PaginationWrapper > a.Selected:hover{color:#333333; background-color:#FFFFFF;} .PaginationWrapper > a.Navigation{border:1px solid #666666; display:flex; align-items:center; justify-content:center; background-color:#FFFFFF; line-height:120%;} .PaginationWrapper > a.Navigation::before{font-size:calc(14px + 0.5vw); height:calc(12px + 0.8vw); line-height:calc(14px + 0.8vw); width:auto;; display:block; color:#333333;} .PaginationWrapper > a.Navigation:hover::before{color:#333333;} .PaginationWrapper > a.Navigation.FirstPage::before{content:"〈"; border-left:1px solid #333333; text-indent:calc(-5px - 0.2vw);} .PaginationWrapper > a.Navigation.LastPage::before{content:"〉"; border-right:1px solid #333333; letter-spacing:calc(-5px - 0.2vw);} .PaginationWrapper > a.Navigation.PrevPage::before{content:"〈"; text-indent:calc(-10px - 0.4vw);} .PaginationWrapper > a.Navigation.NextPage::before{content:"〉"; letter-spacing:calc(-10px - 0.4vw);} .PaginationWrapper > a.Navigation.Disabled{border-color:#BCBCBC;} .PaginationWrapper > a.Navigation.Disabled::before{color:#BCBEBC; border-color:#BCBCBC;} .PaginationWrapper.Inv > a{background-color:transparent; color:#CCCCCC; transition:background-color ease-in 0.2s, color ease-in 0.2s;} .PaginationWrapper.Inv > a:hover{background-color:rgba(0,0,0,0.3); color:#FFFFFF; transition:background-color ease-out 0.2s, color ease-out 0.2s;} .PaginationWrapper.Inv > a.Selected{color:#FFFFFF;} .PaginationWrapper.Inv > a.Selected:hover{color:#FFFFFF; background-color:transparent;} .PaginationWrapper.Inv > a.Navigation{background-color:transparent; border-color:rgba(255,255,255,0.5);} .PaginationWrapper.Inv > a.Navigation::before{color:rgba(255,255,255,0.7);} .PaginationWrapper.Inv > a.Navigation.FirstPage::before{border-left-color:rgba(255,255,255,0.7);} .PaginationWrapper.Inv > a.Navigation.LastPage::before{border-right-color:rgba(255,255,255,0.7);} .PaginationWrapper.Inv > a.Navigation.Disabled{border-color:rgba(255,255,255,0.2);} .PaginationWrapper.Inv > a.Navigation.Disabled::before{color:rgba(255,255,255,0.3); border-color:rgba(255,255,255,0.2);} .Blanchedalmond .PaginationWrapper > a, .Blanchedalmond .PaginationWrapper.Inv > a{color:#333333; background-color:transparent;} .Blanchedalmond .PaginationWrapper.Inv > a.Selected:hover{color:#333333;} .Blanchedalmond .PaginationWrapper.Inv > a.Navigation.FirstPage::before{content:"〈"; border-left:1px solid #333333; text-indent:calc(-5px - 0.2vw);} .Blanchedalmond .PaginationWrapper.Inv > a.Navigation.LastPage::before{content:"〉"; border-right:1px solid #333333; letter-spacing:calc(-5px - 0.2vw);} .Blanchedalmond .PaginationWrapper.Inv > a.Navigation.PrevPage::before{content:"〈"; text-indent:calc(-10px - 0.4vw);} .Blanchedalmond .PaginationWrapper.Inv > a.Navigation.NextPage::before{content:"〉"; letter-spacing:calc(-10px - 0.4vw);} .Blanchedalmond .PaginationWrapper.Inv > a.Navigation.Disabled{border-color:#BCBCBC;} .Blanchedalmond .PaginationWrapper.Inv > a.Navigation.Disabled::before{color:#BCBEBC; border-color:#BCBCBC;} @media only screen and (min-width:813px){ .PaginationWrapper > a{display:block;} .PaginationWrapper > a.Selected{flex:0 0 48px; width:48px; background-color:#fbba00; padding:0px; display:block;} .PaginationWrapper > a.Selected::before, .PaginationWrapper > a.Selected::after{display:none;} .PaginationWrapper > a.Selected:hover{color:#333333; background-color:#fbba00;} .PaginationWrapper.Inv > a.Selected:hover{color:#FFFFFF; background-color:#fbba00;} } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){ .PaginationWrapper > a.Navigation::before{padding:0px; line-height:100%;} } /* ` *********************************************************************************************************************************************************************************************/ #Feature{height:100vh; padding:0px;} #Feature .CarouselInner{padding-top:0px;} #Feature article, #Feature article > a{display:block; position:absolute; top:0px; left:0px; bottom:0px; right:0px;} #Feature article{pointer-events:none;} #Feature article > a{z-index:0; pointer-events:all; display:inline-block;} #Feature .Story{width:100%; -webkit-box-shadow:none; box-shadow:none;} #Feature .Story .Thumbnail{overflow:hidden; position:absolute; top:0px; left:0px; width:100%; height:100%; padding:0px; display:block;} #Feature .Story .Thumbnail.Square{display:none;} #Feature .Story .Thumbnail img{width:100%; height:100%; object-fit:cover; object-position:top; position:relative; transform:translate(-50%,-50%); top:50%; left:50%; transition:all ease-in 0.2s;} #Feature .Story:hover .Thumbnail img{width:102%; height:102%; transition:all ease-out 0.2s;} #Feature .Story .Headline{position:absolute; left:50%; bottom:5%; transform:translate(-50%, 0%); z-index:2; width:92%; max-width:calc(1600px - 4vw); text-align:center; pointer-events:none; background-color:transparent;} #Feature .Story .Headline > div{display:inline-block; padding:1% 4%; border-left:3px solid #FFFFFF; border-right:3px solid #FFFFFF;} #Feature .Story .Headline > div::before, #Feature .Story .Headline > div::after{width:calc(1vw + 8px); display:block; height:calc(100% - 3px); position:absolute; top:0px; border-top:3px solid #FFFFFF; border-bottom:3px solid #FFFFFF; content:""; z-index:2;} #Feature .Story .Headline > div::before{left:-3px;} #Feature .Story .Headline > div::after{right:-3px;} #Feature .Story .Headline p{font-size:1.2rem; font-weight:900; text-align:center; color:#FFFFFF; line-height:110%; text-shadow:5px 5px 4px rgba(0,0,0,1);} #Feature .CarouseIndicatorWrapper{position:absolute; left:0%; bottom:5%; width:100%; text-align:center;} @media only screen and (min-width:1024px){ #Feature{height:100vw; max-height:40vw !important;} } @media only screen and (max-width:320px), only screen and (min-width:813px), only screen and (min-width:320px) and (orientation:portrait), only screen and (-webkit-min-device-pixel-ratio:2) and (min-width:320px) and (orientation:portrait), only screen and (min-device-pixel-ratio: 2) and (min-width:320px) and (orientation:portrait), only screen and (min-resolution:192dpi) and (min-width:320px) and (orientation:portrait), only screen and (min-resolution:2dppx) and (min-width:320px) and (orientation:portrait){ #Feature{height:100vw; max-height:660px;} } @media only screen and (min-width:768px) and (orientation:portrait), only screen and (-webkit-min-device-pixel-ratio:2) and (min-width:768px) and (orientation:portrait), only screen and (min-device-pixel-ratio: 2) and (min-width:768px) and (orientation:portrait), only screen and (min-resolution:192dpi) and (min-width:768px) and (orientation:portrait), only screen and (min-resolution:2dppx) and (min-width:768px) and (orientation:portrait){ #Feature .Story .Headline p{font-size:1.15rem;} #Feature{height:50vh; max-height:520px;} } @media only screen and (max-width:1024px) and (orientation:landscape), only screen and (-webkit-min-device-pixel-ratio:2) and (max-width:1024px) and (orientation:landscape), only screen and (min-device-pixel-ratio: 2) and (max-width:1024px) and (orientation:landscape), only screen and (min-resolution:192dpi) and (max-width:1024px) and (orientation:landscape), only screen and (min-resolution:2dppx) and (max-width:1024px) and (orientation:landscape){ #Feature .Story .Headline p{font-size:1.15rem;} } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){ #Feature{height:0px; padding-top:40%;} #Feature article > a{margin-top:-40%;} #Feature .Story{transform:translateY(-45%); width:100%; padding-top:45%;} #Feature .Story .Thumbnail{padding-top:45%; transform:translateY(-45%);} #Feature .Story .Headline{bottom:65%;} } @media screen and (-ms-high-contrast: active) and (orientation:landscape), (-ms-high-contrast: none) and (orientation:landscape){ #Feature .Story .Thumbnail img{width:100%; height:auto; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);} #Feature .Story:hover .Thumbnail img{width:100%; height:auto; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);} } @media screen and (-ms-high-contrast: active) and (orientation:portrait), (-ms-high-contrast: none) and (orientation:portrait){ #Feature{width:100%; height:80vh; padding-top:0px;} #Feature .Story, #Feature .Story .Thumbnail{width:100%; height:80vh; transform:translateY(0%); padding-top:0px;} #Feature .Story .Thumbnail img{width:auto; height:80vh; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);} #Feature .Story:hover .Thumbnail img{width:auto; height:80vh; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);} #Feature .Story .Headline{bottom:30%;} #Feature .Story .Headline p{font-size:1.15rem;} } @media only screen and (max-width:760px) and (orientation: portrait), only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:414px) and (orientation: portrait), only screen and (min-device-pixel-ratio: 2) and (max-device-width:414px) and (orientation: portrait), only screen and (min-resolution:192dpi) and (max-device-width:414px) and (orientation: portrait), only screen and (min-resolution:2dppx) and (max-device-width:414px) and (orientation: portrait){ #Feature .Story .Thumbnail{display:none;} #Feature .Story .Thumbnail.Square{display:block;} .GridStyleD .Vocabuary h4{font-size:1rem!important;} } /* Grid *********************************************************************************************************************************************************************************************/ .GridWrapper, .Grid-Row, .Grid-Col{flex-basis:100%; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; margin:0px; padding:0px; position:relative;} .GridWrapper{margin-bottom:calc(0.8vw + 8px);} .GridWrapper article, .GridWrapper article > a{display:block; position:absolute; top:0px; left:0px; bottom:0px; right:0px;} .GridWrapper article{pointer-events:none;} .GridWrapper article > a{z-index:0; pointer-events:all;} .GridWrapper .Grid-Row{margin-top:calc(0.8vw + 8px);} .GridWrapper .Grid-Row:first-child{margin-top:0px;} .GridWrapper .Grid-Col:first-of-type, .GridStyleA .Grid-Row .Grid-Col:first-of-type{margin-left:0px;} .GridWrapper .Grid-Col:last-of-type, .GridStyleA .Grid-Row .Grid-Col:last-of-type{margin-right:0px;} .GridStyleA .Grid-Col{margin-top:calc(0.8vw + 8px);} .GridStyleA .Grid-Col:first-of-type{margin-top:0px;} .GridStyleA .Grid-Row{flex-wrap:nowrap;} .GridStyleA .Grid-Row .Grid-Col{flex:1 1; margin:0px calc(0.4vw + 4px);} .GridStyleB, .GridStyleB .Grid-Col{align-items:stretch;} .GridStyleB .Grid-Col{flex-basis:calc(50% - 0.4vw - 4px); order:1;} .GridStyleB .Grid-Col.Col-Flow{flex-flow:column;} .GridStyleB .Grid-Col.Col-Flow > *{flex-grow:1;} .GridStyleB .Grid-Col.Col-Flow > div:last-of-type{margin-top:calc(0.8vw + 8px);} .GridStyleB .Grid-Col.Col-Flow > div:last-of-type.Vert-Rect{margin-top:0px;} .GridStyleB > .Grid-Col:nth-of-type(2){flex-basis:100%; order:2; margin-top:calc(0.8vw + 8px);} .GridStyleC, .GridStyleC .Grid-Col, .GridStyleD, .GridStyleD .Grid-Col{align-items:stretch;} .GridStyleC .Grid-Col, .GridStyleD .Grid-Col{flex-basis:calc(50% - 0.4vw - 4px);} .GridStyleC .Grid-Col > div, .GridStyleD .Grid-Col > div{margin:calc(0.4vw + 4px) 0px;} .GridStyleC .Grid-Col > div:first-of-type, .GridStyleD .Grid-Col > div:first-of-type{margin-top:0px;} .GridStyleC .Grid-Col > div:last-of-type, .GridStyleD .Grid-Col > div:last-of-type{margin-bottom:0px;} .GridStyleC > .Grid-Col, .GridStyleD > .Grid-Col{flex-basis:100%; margin-top:calc(0.8vw + 8px); flex-grow:2;} .GridStyleC > .Grid-Col:nth-last-of-type(2),.GridStyleC > .Grid-Col:nth-last-of-type(3){flex-basis:calc(50% - 0.4vw - 4px); flex-grow:0;} .GridStyleC > .Grid-Col:last-of-type .Grid-Row{margin:calc(0.4vw + 4px) 0px;} .GridStyleC > .Grid-Col:last-of-type .Grid-Row:first-of-type{order:1; margin-top:0px;} .GridStyleC > .Grid-Col:last-of-type .Grid-Row:last-of-type{order:2; margin-top:calc(0.4vw + 4px);} .GridAside .Grid-Col{margin-top:calc(0.8vw + 8px);} .GridAside .Grid-Col:first-of-type{margin-top:0px;} .GridAside .Grid-Row{flex-wrap:nowrap;} .GridAside .Grid-Row .Grid-Col{flex:1 1; margin:0px calc(0.4vw + 4px);} .Square{padding-top:100%;} .Horz-Rect{padding-top:50%;} .Vert-Rect{padding-top:200%;} .GridContent{width:100%; position:relative; overflow:hidden; line-height:0px;} .GridWrapper .Thumbnail{width:100%; height:100%; position:absolute; top:0px; left:0px; bottom:0px; right:0px; overflow:hidden; transform:scale(1); transition:transform ease-in-out 0.3s; z-index:1;} .GridWrapper article:hover .Thumbnail{transform:scale(1.05); transition:transform ease-out 0.3s;} .GridWrapper .Thumbnail img{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:102%; height:102%; object-fit:cover;} .GridWrapper .Vote{position:absolute; top:2%; left:2%; bottom:auto; right:auto; z-index:10; padding:12px; background-color:#fbba00; color:#FFFFFF; display:block; width:auto; height:auto; -webkit-box-shadow:0px 10px 20px 0px rgba(0,0,0,0.8); box-shadow:0px 10px 20px 0px rgba(0,0,0,0.8);} .GridWrapper .Headline{color:#FFFFFF; position:absolute; left:0px; bottom:0px; width:100%; height:auto; padding:12px; z-index:2; background:rgb(0,0,0); background:-moz-linear-gradient(0deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 100%); background:-webkit-linear-gradient(0deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 100%); background:linear-gradient(0deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 100%); pointer-events:none;} .GridWrapper .Breadcrums{opacity:0; transition:opacity ease-in-out 0.3s; margin-bottom:10px;} .GridWrapper .Breadcrums a{color:#FFFFFF; pointer-events:all;} .GridWrapper article:hover .Breadcrums{opacity:1; transition:opacity ease-in-out 0.2s;} .GridWrapper .ADVWrapper{display:flex; flex-wrap:nowrap; align-items:center; overflow:hidden; align-self:center;} .GridWrapper .ADVWrapper > *{width:100%; height:auto; display:block; position:absolute; top:0px; left:0px; overflow:hidden;} .GridWrapper .ADVWrapper img{width:100%;} .ArticleRHS .GridWrapper .ADVWrapper{margin-top:calc(0.8vw + 8px); max-width:400px; padding-top:0px;} .ArticleRHS .GridWrapper .ADVWrapper > *{position:relative;} .ArticleRHS .Grid-Col.AD{align-items:center; justify-content:center; margin:0px;} .GridStyleD.Row-1 > .Grid-Col:nth-of-type(2), .GridStyleD.Row-1 > .Grid-Col:nth-of-type(3){flex-basis:calc(50% - 0.4vw - 4px); flex-grow:0;} .GridStyleD.Row-1 > .Grid-Col:last-of-type .Grid-Row{margin:calc(0.4vw + 4px) 0px;} .GridStyleD.Row-1 > .Grid-Col:last-of-type .Grid-Row:first-of-type{order:1; margin-top:0px;} .GridStyleD.Row-1 > .Grid-Col:last-of-type .Grid-Row:last-of-type{order:2; margin-top:calc(0.4vw + 4px); margin-bottom:0px;} .GridStyleD.Row-2 > .Grid-Col:first-of-type, .GridStyleD.Row-2 > .Grid-Col:nth-of-type(2){flex-basis:calc(50% - 0.4vw - 4px); flex-grow:0;} .GridStyleD.Row-2 > .Grid-Col:nth-of-type(3) .Grid-Row{margin:calc(0.4vw + 4px) 0px;} .GridStyleD.Row-2 > .Grid-Col:nth-of-type(3) .Grid-Row:first-of-type{order:1; margin-top:0px;} .GridStyleD.Row-2 > .Grid-Col:nth-of-type(3) .Grid-Row:last-of-type{order:2; margin-top:calc(0.4vw + 4px); margin-bottom:0px;} .GridStyleD.Row-3 > .Grid-Col:first-of-type, .GridStyleD.Row-3 > .Grid-Col:nth-of-type(2){flex:0 0 100%;} .GridStyleD.Row-3 > .Grid-Col:nth-of-type(3),.GridStyleD.Row-3 > .Grid-Col:last-of-type{flex-basis:calc(50% - 0.4vw - 4px); flex-grow:0;} .GridStyleD.Row-3 > .Grid-Col:nth-of-type(3) .Grid-Row{margin:calc(0.4vw + 4px) 0px;} .GridStyleD.Row-3 > .Grid-Col:nth-of-type(3) .Grid-Row:first-of-type{order:1; margin-top:0px;} .GridStyleD.Row-3 > .Grid-Col:nth-of-type(3) .Grid-Row:last-of-type{order:2; margin-top:calc(0.4vw + 4px);} .GridStyleD.Row-1, .GridStyleD.Row-2, .GridStyleD.Row-3{margin-bottom:0px;} .GridStyleD .Vocabuary .Headline, .GridAside .Vocabuary .Headline{background:none; top:0px;} .GridStyleD .Vocabuary p{color:#333333; line-height:100%; margin-top:calc(5px + 0.5vw); font-size:calc(0.06rem + 13px);} .GridStyleD .Vocabuary h3 + p{font-size:calc(0.07rem + 16px);} .GridStyleD .Vocabuary h2{font-size:2.2rem;} .GridStyleD .Vocabuary h3{font-size:calc(16px + 1rem);} .GridStyleD .Vocabuary h4{font-size:1.3rem;} .GridAside .Vocabuary .Headline h3{margin-bottom:0.3rem;} .GridAside .Vocabuary .Headline p{color:#333333; line-height:120%; font-size:calc(0.06rem + 13px);} .GridStyleD.One-or-two .Grid-Col {flex-basis:100%; margin-right: 0; margin-left: 0;} .GridStyleD.Row-1.One-or-two > .Grid-Col:last-of-type .Grid-Row:first-of-type {margin-top:0} .GridStyleD.One-or-two h4 {flex-basis:100%; margin-right: 0; margin-left: 0;} .GridStyleD.One-or-two .Grid-Col:nth-of-type(2) {margin-top:calc(0.8vw + 8px)} .GridAside .One-or-two .Grid-Row {flex-wrap: wrap;} @media only screen and (min-width: 660px) { .GridStyleD.One-or-two h4 { font-size: 0.45rem; } } @media only screen and (min-width:660px){ .GridWrapper, .Grid-Row, .Grid-Col, .Col-Flow{align-items:stretch;} .GridWrapper .Grid-Col{flex:1 1 auto; margin:0px calc(0.4vw + 4px);} .GridStyleB .Grid-Col:nth-of-type(2){flex:2 1 auto; order:1; margin-top:0;} .GridWrapper .Headline{padding:1.4vw;} .GridWrapper .Grid-Col:first-of-type, .GridStyleA .Grid-Row .Grid-Col:first-of-type{margin-left:0px;} .GridWrapper .Grid-Col:last-of-type, .GridStyleA .Grid-Row .Grid-Col:last-of-type{margin-right:0px;} .Grid-Col:nth-of-type(3){margin-right:0px;} .GridStyleC > .Grid-Col:first-of-type{margin-left:0px; flex:2 1 auto;} .GridStyleC > .Grid-Col:nth-of-type(2), .GridStyleC > .Grid-Col:nth-of-type(3){flex:1 1 auto;} .GridStyleC > .Grid-Col:last-of-type{flex:0 0 100%; margin-left:0px; margin-right:0px; margin-top:calc(0.8vw + 8px) !important;} .GridStyleC > .Grid-Col:last-of-type .Grid-Row{flex:1 1 auto ; height:auto !important; margin:0px calc(0.4vw + 4px) !important;} .GridStyleC > .Grid-Col:last-of-type .Grid-Row:first-of-type{margin-left:0px !important;} .GridStyleC > .Grid-Col:last-of-type .Grid-Row:last-of-type{margin-right:0px !important;} .GridStyleC > .Grid-Col:last-of-type .Grid-Row{order:1;} .GridStyleC > .Grid-Col:last-of-type .Grid-Row:last-of-type{order:2;} .GridAside.StyleA > .Grid-Col:first-of-type{margin-left:0px; margin-right:calc(0.4vw + 4px); flex:0 0 calc(67% - 0.4vw - 4px);} .GridAside.StyleA > .Grid-Col:nth-of-type(2){margin-right:0px; margin-left:calc(0.4vw + 4px); flex:0 0 calc(33% - 0.4vw - 4px);} .GridAside.StyleA > .Grid-Col:nth-of-type(2) h3{font-size:0.35rem;} .GridAside.StyleA > .Grid-Col:nth-of-type(3){margin-left:0px; margin-right:calc(0.4vw + 4px); margin-top:calc(0.8vw + 8px); flex:0 0 calc(50% - 0.4vw - 4px);} .GridAside.StyleA > .Grid-Col:nth-of-type(4){margin-right:0px; margin-left:calc(0.4vw + 4px); margin-top:calc(0.8vw + 8px); flex:0 0 calc(50% - 0.4vw - 4px);} .GridAside.StyleB > .Grid-Col:first-of-type{margin-left:0px; margin-right:calc(0.4vw + 4px); flex:0 0 calc(50% - 0.4vw - 4px);} .GridAside.StyleB > .Grid-Col:nth-of-type(2){margin-right:0px; margin-left:calc(0.4vw + 4px); flex:0 0 calc(50% - 0.4vw - 4px);} .GridAside.StyleB > .Grid-Col:nth-of-type(3){margin-left:0px; margin-right:calc(0.4vw + 4px); margin-top:calc(0.8vw + 8px); flex:0 0 calc(50% - 0.4vw - 4px);} .GridAside.StyleB > .Grid-Col:nth-of-type(4){margin-right:0px; margin-left:calc(0.4vw + 4px); margin-top:calc(0.8vw + 8px); flex:0 0 calc(50% - 0.4vw - 4px);} .GridStyleD.Row-1 > .Grid-Col:first-of-type{margin-left:0px; flex:2 1 auto;} .GridStyleD.Row-1.One-or-two > .Grid-Col > .Grid-Row > .Grid-Col:first-of-type{margin-left:0px; flex:0 0 calc(50% - 0.4vw - 4px);} .GridStyleD.Row-1.One-or-two > .Grid-Col > .Grid-Row > .Grid-Col:last-of-type{margin-top:0; margin-left:0px; flex:0 0 calc(50% - 0.4vw - 4px);} .GridStyleD.Row-1 > .Grid-Col:nth-of-type(2), .GridStyleD.Row-1 > .Grid-Col:nth-of-type(3){flex:1 1 auto;} .GridStyleD.Row-1 > .Grid-Col:last-of-type{flex:0 0 100%; margin-left:0px; margin-right:0px; margin-top:calc(0.8vw + 8px) !important;} .GridStyleD.Row-1.One-or-two > .Grid-Col:last-of-type{flex:0 0 100%; margin-left:0px; margin-right:0px; margin-top:0 !important;} .GridStyleD.Row-1 > .Grid-Col:last-of-type .Grid-Row{flex:1 1 auto ; height:auto !important; margin:0px calc(0.4vw + 4px) !important;} .GridStyleD.Row-1 > .Grid-Col:last-of-type .Grid-Row:first-of-type{margin-left:0px !important;} .GridStyleD.Row-1 > .Grid-Col:last-of-type .Grid-Row:last-of-type{margin-right:0px !important;} .GridStyleD.Row-1 > .Grid-Col:last-of-type .Grid-Row{order:1;} .GridStyleD.Row-1 > .Grid-Col:last-of-type .Grid-Row:last-of-type{order:2;} .GridStyleD.Row-2 > .Grid-Col:first-of-type, .GridStyleD.Row-2 > .Grid-Col:nth-of-type(2){flex:1 1 auto; order:1;} .GridStyleD.Row-2 > .Grid-Col:first-of-type{margin-left:0px;} .GridStyleD.Row-2 > .Grid-Col:last-of-type{flex:2 1 auto; order:2;} .GridStyleD.Row-2 > .Grid-Col:nth-of-type(3){flex:2 1 auto; order:3;} .GridStyleD.Row-2 > .Grid-Col:nth-of-type(3){flex:0 0 100%; margin-left:0px; margin-right:0px; margin-top:calc(0.8vw + 8px) !important;} .GridStyleD.Row-2 > .Grid-Col:nth-of-type(3) .Grid-Row{flex:1 1 auto ; height:auto !important; margin:0px calc(0.4vw + 4px) !important;} .GridStyleD.Row-2 > .Grid-Col:nth-of-type(3) .Grid-Row:first-of-type{margin-left:0px !important;} .GridStyleD.Row-2 > .Grid-Col:nth-of-type(3) .Grid-Row:last-of-type{margin-right:0px !important;} .GridStyleD.Row-2 > .Grid-Col:nth-of-type(3) .Grid-Row{order:1;} .GridStyleD.Row-2 > .Grid-Col:nth-of-type(3) .Grid-Row:last-of-type{order:2;} .GridStyleD.Row-3 > .Grid-Col:first-of-type{margin-left:0px; flex:2 1 auto; order:3;} .GridStyleD.Row-3 > .Grid-Col:nth-of-type(2){flex:2 1 auto; margin-left:0px; order:1;} .GridStyleD.Row-3 > .Grid-Col:nth-of-type(3), .GridStyleD.Row-3 > .Grid-Col:last-of-type{flex:1 1 auto; order:2;} .GridStyleD.Row-3 > .Grid-Col:nth-of-type(3){margin-right:calc(0.4vw + 4px);} .GridStyleD.Row-3 > .Grid-Col:first-of-type{flex:0 0 100%; margin-left:0px; margin-right:0px; margin-top:calc(0.8vw + 8px) !important; display:flex;} .GridStyleD.Row-3 > .Grid-Col:first-of-type .Grid-Row:first-of-type{order:2; margin-left:calc(0.4vw + 4px); margin-right:0px !important;} .GridStyleD.Row-3 > .Grid-Col:first-of-type .Grid-Row:nth-of-type(2){order:1; margin-right:calc(0.4vw + 4px); margin-left:0px !important;} .GridStyleD.Row-3 > .Grid-Col:first-of-type .Grid-Row{flex:1 1 auto ; height:auto !important; margin:0px calc(0.4vw + 4px) !important;} .GridStyleD.Row-1, .GridStyleD.Row-2, .GridStyleD.Row-3{margin-bottom:calc(0.8vw + 8px);} .GridStyleD h2{font-size:0.7rem;} .GridStyleD h3{font-size:calc(16px + 0.11rem);} .GridStyleD h4{font-size:0.35rem;} .GridStyleD .Vocabuary h2{font-size:1.2rem;} .GridStyleD .Vocabuary h3{font-size:calc(16px + 0.4rem);} .GridStyleD .Vocabuary h4{font-size:0.5rem;} } @media only screen and (min-width:1200px){ .GridStyleC > .Grid-Col:first-of-type{margin-left:0px;} .GridStyleC > .Grid-Col:first-of-type, .GridStyleC > .Grid-Col:last-of-type{flex:2 1 !important;} .GridStyleC > .Grid-Col:nth-of-type(2), .GridStyleC > .Grid-Col:nth-of-type(3){margin-left:calc(0.4vw + 4px); margin-right:calc(0.4vw + 4px); flex:1 1 !important;} .GridStyleC > .Grid-Col:last-of-type{margin-left:calc(0.4vw + 4px); margin-right:0px; margin-top:0px !important;} .GridStyleC > .Grid-Row{flex:0 0 100%; overflow:hidden; margin-top:0px;} .GridStyleC > .Grid-Col:last-of-type .Grid-Row{margin:calc(0.4vw + 4px) 0px !important; flex:0 0 100% !important;} .GridStyleC > .Grid-Col:last-of-type .Grid-Row:first-of-type{margin-top:0px !important;} .GridStyleC > .Grid-Col:last-of-type .Grid-Row:last-of-type{margin-bottom:0px !important; margin-top:calc(0.4vw + 4px);} .GridAside .Grid-Col{flex:0 0 100% !important; margin:0px !important; margin-top:calc(0.8vw + 8px) !important;} .GridAside > .Grid-Col:nth-of-type(2) h3{font-size:calc(20px + 0.11rem);} .GridAside h3, .GridAside > .Grid-Col:nth-of-type(2) h3{font-size:0.35rem;} .GridStyleD.Row-1 > .Grid-Col:first-of-type{margin-left:0px;} .GridStyleD.Row-1 > .Grid-Col:first-of-type, .GridStyleD.Row-1 > .Grid-Col:last-of-type{flex:2 1 !important;} .GridStyleD.Row-1 > .Grid-Col:nth-of-type(2), .GridStyleD.Row-1 > .Grid-Col:nth-of-type(3){margin-left:calc(0.4vw + 4px); margin-right:calc(0.4vw + 4px); flex:1 1 !important;} .GridStyleD.Row-1 > .Grid-Col:last-of-type{margin-left:calc(0.4vw + 4px); margin-right:0px; margin-top:0px !important;} .GridStyleD.Row-1 > .Grid-Row{flex:0 0 100%; overflow:hidden; margin-top:0px;} .GridStyleD.Row-1 > .Grid-Col:last-of-type .Grid-Row{margin:calc(0.4vw + 4px) 0px !important; flex:0 0 100% !important;} .GridStyleD.Row-1 > .Grid-Col:last-of-type .Grid-Row:first-of-type{margin-top:0px !important;} .GridStyleD.Row-1 > .Grid-Col:last-of-type .Grid-Row:last-of-type{margin-bottom:0px !important; margin-top:calc(0.4vw + 4px);} .GridStyleD.Row-2 > .Grid-Col:first-of-type{margin-left:0px;} .GridStyleD.Row-2 > .Grid-Col:last-of-type, .GridStyleD.Row-2 > .Grid-Col:nth-of-type(3){flex:2 1 !important;} .GridStyleD.Row-2 > .Grid-Col:last-of-type{order:2; margin-left:calc(0.4vw + 4px);} .GridStyleD.Row-2 > .Grid-Col:first-of-type, .GridStyleD.Row-2 > .Grid-Col:nth-of-type(2){margin-right:calc(0.4vw + 4px); flex:1 1 !important;} .GridStyleD.Row-2 > .Grid-Col:nth-of-type(2){margin-left:calc(0.4vw + 4px);} .GridStyleD.Row-2 > .Grid-Col:nth-of-type(3){margin-left:calc(0.4vw + 4px); margin-right:calc(0.4vw + 4px); margin-top:0px !important; order:1;} .GridStyleD.Row-2 > .Grid-Row{flex:0 0 100%; overflow:hidden; margin-top:0px;} .GridStyleD.Row-2 > .Grid-Col:nth-of-type(3) .Grid-Row{margin:calc(0.4vw + 4px) 0px !important; flex:0 0 100% !important;} .GridStyleD.Row-2 > .Grid-Col:nth-of-type(3) .Grid-Row:first-of-type{margin-top:0px !important;} .GridStyleD.Row-2 > .Grid-Col:nth-of-type(3) .Grid-Row:last-of-type{margin-bottom:0px !important; margin-top:calc(0.4vw + 4px);} .GridStyleD.Row-3 > .Grid-Col:first-of-type{margin-left:0px; margin-right:calc(0.4vw + 4px); margin-bottom:0px !important; margin-top:0px !important; order:1;} .GridStyleD.Row-3 > .Grid-Col:first-of-type, .GridStyleD.Row-3 > .Grid-Col:nth-of-type(2){flex:2 1 !important;} .GridStyleD.Row-3 > .Grid-Col:nth-of-type(2){margin-left:calc(0.4vw + 4px); margin-right:calc(0.4vw + 4px);} .GridStyleD.Row-3 > .Grid-Col:nth-of-type(3), .GridStyleD.Row-3 > .Grid-Col:last-of-type{margin-left:calc(0.4vw + 4px); margin-right:calc(0.4vw + 4px); margin-top:0px !important; flex:1 1 !important;} .GridStyleD.Row-3 > .Grid-Col:last-of-type{margin-right:0px;} .GridStyleD.Row-3 > .Grid-Row{flex:0 0 100%; overflow:hidden; margin-top:0px;} .GridStyleD.Row-3 > .Grid-Col:first-of-type .Grid-Row{margin:calc(0.4vw + 4px) 0px !important; flex:0 0 100% !important;} .GridStyleD.Row-3 > .Grid-Col:first-of-type .Grid-Row:first-of-type{margin-top:0px !important; order:1;} .GridStyleD.Row-3 > .Grid-Col:first-of-type .Grid-Row:last-of-type{margin-bottom:0px !important; margin-top:calc(0.4vw + 4px); order:2;} .ArticleRHS .GridWrapper .ADVWrapper{margin-top:0px;} } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){ .GridWrapper .Horz-Rect .Thumbnail img{width:102%; height:auto;} .GridWrapper .Square .Thumbnail img, .GridWrapper .Vert-Rect .Thumbnail img{width:auto; height:102%;} } /* Video *********************************************************************************************************************************************************************************************/ #Video .Story, #Video .Headline{background-color:#000000;} #Video{color:#FFFFFF;} /* Cookie *********************************************************************************************************************************************************************************************/ #CookieWrapper{position:fixed; left:0px; bottom:0px; width:100%; z-index:99999999; background-color:rgba(229,240,211,1); ; -webkit-box-shadow:0px -20px 20px -10px rgba(0,0,0,0.35); box-shadow:0px -20px 20px -10px rgba(0,0,0,0.35); webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); border-top:1px solid rgba(255,255,255,0.6);} #CookieWrapper.OverlayWrapper #CookieContainer{flex-wrap:wrap;} #CookieContainer{width:100%; max-width:1600px; margin:auto; padding:20px; display:flex; flex-wrap:nowrap; align-content:flex-start; justify-content:center; position:relative;} #CookieMessage{flex:0 1 auto; font-size:calc(12px + 0.2vw); color:#000000; padding-right:20px; align-self:center;} #CookieMessage a{color:#000000; display:inline-block; border-bottom:1px dotted #000000;} #CookieTrigger{flex:0 0 auto; border:1px solid #666666; border-radius:6px; text-align:center; padding:10px 20px; font-size:calc(12px + 0.2vw); color:#000000; align-self:flex-start; background-color:transparent; cursor:pointer; transition:background-color ease-in 0.2s, color ease-in 0.2s;} #CookieTrigger:hover{background-color:rgba(255,255,255,0.8); color:#000000; transition:all ease-out 0.2s;} #CookieCloseBtn{flex:0 0 31px; width:31px; height:31px; background-color:#000000; border:2px solid rgba(255,255,255,0.8); border-radius:50%; cursor:pointer; margin-left:15px; transform:translateY(-36px); position:relative;} #CookieCloseBtn::before, #CookieCloseBtn::after{content:""; width:15px; height:2px; font-size:0px; line-height:0px; display:block; background-color:#FFFFFF; position:absolute; left:6px; top:12px; transform-origin:center;} #CookieCloseBtn::before{transform:rotate(-45deg);} #CookieCloseBtn::after{transform:rotate(45deg);} #CookieWrapper.OverlayWrapper{width:auto; min-width:300px; max-width:1000px; background-color:rgba(229,240,211,1); -webkit-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.4); box-shadow:0px 0px 20px 0px rgba(0,0,0,0.4); padding:calc(12px + 1vw); position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:999999999; border-radius:6px;color:#FFFFFF;} #CookieWrapper.OverlayWrapper #CookieContainer{height:100%; width:100%; text-align:center; align-content:center;} #CookieWrapper.OverlayWrapper #CookieMessage{width:100%; margin:50px 0;} #CookieWrapper.OverlayWrapper #CookieTrigger{width:150px;} #CookieWrapper.OverlayWrapper #CookieCloseBtn{position:absolute; right:-15px;top:15px;} /* Channel Highlight *********************************************************************************************************************************************************************************************/ #ChannelHighlightWrapper{width:100%; max-width:none; padding:0px; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start;} #ChannelHighlightPreview{flex:0 0 100%;} #ChannelHighlightPreview.CarouselWrapper{width:100%; height:auto; background-size:cover; background-position:center; padding:0px; padding-top:0px; margin:0%; font-size:0px; position:relative; overflow:hidden;} #ChannelHighlightPreview .CarouselInner{padding:0vw;} #ChannelHighlightPreview .CarouselInner .Story{-webkit-box-shadow:none; box-shadow:none; height:50vh;} #ChannelHighlightPreview .Story{pointer-events:all;} #ChannelHighlightPreview .Story article{width:100%; height:100%; position:absolute; top:0px; left:0px; pointer-events:none;} #ChannelHighlightPreview .Story .Headline{color:#FFFFFF; position:absolute; left:0px; bottom:0px; width:100%; height:auto; padding:12px; z-index:2; background:rgb(0,0,0); background:-moz-linear-gradient(0deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 100%); background:-webkit-linear-gradient(0deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 100%); background:linear-gradient(0deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 100%); pointer-events:none;} #ChannelHighlightPreview .Story .Headline p{font-size:calc(0.1rem + 13px);} #ChannelHighlightPreview .Story .Thumbnail{width:100%; height:100%; position:absolute; top:0px; left:0px; overflow:hidden;} #ChannelHighlightPreview .Story .Thumbnail.Square{display:none;} #ChannelHighlightPreview .Story .Thumbnail img{width:102%; height:102%; object-fit:cover; transition:all ease-in 0.2s;} #ChannelHighlightPreview .Story:hover .Thumbnail img{width:104%; height:104%; object-fit:cover; transition:all ease-out 0.2s;} #ChannelHighlightThumbnail{display:none;} #ChannelHighlightThumbnail .swiper-container{width:100%;} #ChannelHighlightThumbnail .swiper-wrapper{transform:translate3d(0px, 0px, 0px) !important; display:flex; flex-wrap:wrap; justify-content:space-between;} #ChannelHighlightThumbnail .Story{flex:0 0; margin-bottom:calc(0.8vw + 8px); cursor:pointer; border:none; background-color:#FFFFFF; pointer-event:all;} #ChannelHighlightThumbnail .Story article{flex:0 0 100%; position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; pointer-events:none;} #ChannelHighlightThumbnail .Story .Thumbnail{flex:0 0 100%; height:0px; padding-top:52.333%; pointer-events:none;} #ChannelHighlightThumbnail .Story .Thumbnail img{width:102%; height:102%; object-fit:cover; transition:all ease-in 0.2s;} #ChannelHighlightThumbnail .Story:hover .Thumbnail img {width:106%; height:106%; transition:all ease-out 0.2s ;} #ChannelHighlightThumbnail .Story .Headline{color:#FFFFFF; position:absolute; left:0px; bottom:0px; width:100%; height:auto; padding:12px; z-index:2; background:rgb(0,0,0); background:-moz-linear-gradient(0deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 100%); background:-webkit-linear-gradient(0deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 100%); background:linear-gradient(0deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 100%); pointer-events:none;} #ChannelHighlightThumbnail .Story .Breadcrums{opacity:0; transition:opacity ease-in-out 0.3s; margin-bottom:10px;} #ChannelHighlightThumbnail .Story .Breadcrums a{color:#FFFFFF; pointer-events:all;} #ChannelHighlightThumbnail .Story:hover .Breadcrums{opacity:1; transition:opacity ease-in-out 0.2s;} #DarkChannelHighlight .GridContent{width:100%; height:50vh; max-height:800px;} #DarkChannelHighlight .Thumbnail.Square{display:none;} @media only screen and (min-width:1100px){ #ChannelHighlightWrapper{max-width:1600px; padding:0px calc(15px + 1vw);} #ChannelHighlightPreview .CarouselInner .Story{height:75vh;} #ChannelHighlightIndicator{display:none;} #ChannelHighlightPreview .CarouselInner .Story{height:calc(100vw * 0.5233); max-height:70vh;} #ChannelHighlightThumbnail{flex:0 0 100%; padding-left:0; padding-top:calc(0.2vw + 5px); display:flex;} #ChannelHighlightThumbnail .swiper-wrapper{flex-wrap:nowrap;} #ChannelHighlightThumbnail .Story{flex:0 0 13.6%; margin-bottom:0px; border-bottom:5px solid #FFFFFF; transition:all ease-in 0.1s;} #ChannelHighlightThumbnail .Story:hover{background-color:#EFEFEF; transition:background-color ease-out 0.2s;} #ChannelHighlightThumbnail .Story:hover .Thumbnail img {width:106%; height:106%; transition:all ease-out 0.2s ;} #ChannelHighlightThumbnail .Story.swiper-slide-thumb-active{border-color:#fbba00; -webkit-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.25); box-shadow:0px 0px 20px 0px rgba(0,0,0,0.25); transition:border-color ease-in-out 0.5s;} #ChannelHighlightThumbnail .Story.swiper-slide-thumb-active:hover{background-color:#FFFFFF;} #ChannelHighlightThumbnail .Story article{flex:0 0 100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start;} #ChannelHighlightThumbnail .Story .Thumbnail{flex:0 0 100%; height:0px; padding-top:52.333%;} #ChannelHighlightThumbnail .Story .Thumbnail img{width:102%; height:102%; object-fit:cover; transition:all ease-in 0.2s;} #ChannelHighlightThumbnail .Story .Headline{padding:calc(0.4vw + 5px); position:relative; background:transparent; color:#333333;} #ChannelHighlightThumbnail .Story .Headline > div{display:block; margin:0px;} #ChannelHighlightThumbnail .Story .Headline h2{font-size:0.9rem;} #ChannelHighlightThumbnail .Story .Headline h3{font-size:0.6rem;} #DarkChannelHighlight .GridContent{height:75vh;} } @media only screen and (min-width:1500px){ #ChannelHighlightWrapper{flex-wrap:nowrap;} #ChannelHighlightPreview{flex:0 0 72%;} #ChannelHighlightPreview .CarouselInner .Story{height:auto; padding-top:0px; max-height:none;} #ChannelHighlightPreview .Story article{position:relative; width:100%; height:100%; padding-top:0px;} #ChannelHighlightPreview .Story .Thumbnail{width:100%; padding-top:0px; position:relative;} #ChannelHighlightThumbnail{flex:0 0 28%; padding-left:calc(0.2vw + 5px); padding-top:0px;} #ChannelHighlightThumbnail .swiper-wrapper{flex-wrap:wrap; align-items:stretch;} #ChannelHighlightThumbnail .Story{flex:0 0 100%; margin-bottom:calc(0.2vw + 5px); border-right:5px solid #FFFFFF; border-bottom:none;} #ChannelHighlightThumbnail .Story:last-of-type{margin-bottom:0px;} #ChannelHighlightThumbnail .Story article{flex-wrap:nowrap;} #ChannelHighlightThumbnail .Story .Thumbnail{flex:0 0 150px; height:78px; padding:0px; overflow:hidden;} #ChannelHighlightThumbnail .Story .Thumbnail img{width:102%; height:102%; object-fit:cover; transition:all ease-in 0.2s;} #ChannelHighlightThumbnail .Story .Headline{padding:0px calc(0.4vw + 5px); flex:1 1 auto; user-select: none;} #ChannelHighlightThumbnail .Story .Headline > div{display:block; margin:0px;} } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){ #ChannelHighlightPreview .Story .Thumbnail img{width:110%; height:auto; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);} #ChannelHighlightPreview .Story:hover .Thumbnail img{width:112%; height:auto; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);} } @media screen and (-ms-high-contrast: active) and (orientation:portrait), (-ms-high-contrast: none) and (orientation:portrait){ #ChannelHighlightPreview .Story .Thumbnail img{width:auto; height:110%;} #ChannelHighlightPreview .Story:hover .Thumbnail img{width:auto; height:112%;} } @media only screen and (max-width:760px) and (orientation: portrait), only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:414px) and (orientation: portrait), only screen and (min-device-pixel-ratio: 2) and (max-device-width:414px) and (orientation: portrait), only screen and (min-resolution:192dpi) and (max-device-width:414px) and (orientation: portrait), only screen and (min-resolution:2dppx) and (max-device-width:414px) and (orientation: portrait){ #Feature .Story .Thumbnail{display:none;} #Feature .Story .Thumbnail.Square{display:block;} .GridStyleD .Vocabuary h4{font-size:1rem!important;} #DarkChannelHighlight .GridContent{height:100vw;} #DarkChannelHighlight .Thumbnail{display:none;} #DarkChannelHighlight .Thumbnail.Square{display:block;} #ChannelHighlightPreview .Story .Thumbnail{display:none;} #ChannelHighlightPreview .Story .Thumbnail.Square{display:block;} } /* Channel Pick *********************************************************************************************************************************************************************************************/ #ChannelPick .CarouselInner .Story{-webkit-box-shadow:0px 40px 20px -10px rgba(0,0,0,0.2); box-shadow:0px 40px 20px -10px rgba(0,0,0,0.2); background-color:transparent;} #ChannelPick .Story > h3{width:100%; margin-top:3vw; margin-bottom:4vw; padding:0px 1vw; border-left:3px solid #fbba00;} #ChannelPick .Story > h3 a::after{content: "〉"; font-weight:100; color:#fbba00; padding-left:0.4rem; transition:padding-left ease-in 0.3s;} #ChannelPick .Story > h3 a:hover::after{padding-left:0.6rem; transition:padding-left ease-out 0.2s;} @media only screen and (min-width:660px){ #ChannelPick .Story > h3{margin-top:0vw; margin-bottom:2vw;} } /* Article *********************************************************************************************************************************************************************************************/ .ArticleCover{width:100%; height:auto; position:relative; padding:0px; margin-bottom:calc(10px + 0.8vw);} .ArticleCover .Thumbnail{width:100%; height:0px; line-height:0px; padding-top:calc(40% + 20vh); overflow:hidden; position:relative; pointer-events:none; display:block;} .ArticleCover .Thumbnail.Square{padding-top:100%; display:none;} .ArticleCover .Thumbnail a{width:102%; height:102%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:0; transition:width ease-out 0.2s, height ease-out 0.2s;} .ArticleCover .Thumbnail a img{width:100%; height:100%; object-fit:cover; pointer-events:all;} .ArticleCover .Headline{color:#FFFFFF; position:absolute; left:0px; bottom:0px; width:100%; height:auto; padding:3vw; z-index:2; background:rgb(0,0,0); background:-moz-linear-gradient(0deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 100%); background:-webkit-linear-gradient(0deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 100%); background:linear-gradient(0deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 100%); pointer-events:auto;} .ArticleCover .Headline h1{width:100%;} .ArticleCover.NoThumbnail{ height:auto; line-height:auto;} .ArticleCover.NoThumbnail .Thumbnail{display:none;} .ArticleCover.NoThumbnail .Headline{padding:3vw 0px; color:#333333; background:none; position:relative;} body.Dark .ArticleCover.NoThumbnail .Headline{color:#FFFFFF;} .ArticleWrapper{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start;} .ArticleLHS, .ArticleRHS, .ArticleStatic{flex:0 0 100%; width:100%;} .ArticleLHS{margin-bottom:calc(2vw + 25px);} main h4, main p{letter-spacing:2px; margin-top:calc(30px + 1vw); margin-bottom:calc(30px + 1vw);} main h4, main p, main figure, main h3{margin-left:3vw; margin-right:3vw; max-width:calc(100% - 6vw);} main ol, main ul{font-size:calc(0.1rem + 16px); margin-left:3vw; width:calc(100% - 6vw);} main ol li, main ul li{margin-bottom:1.5vw; text-align:justify;} main ol li:last-of-type, main ul li:last-of-type{margin-bottom:0px;} .ArticleExtra{width:100%; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between;} .ArticleExtra > div{flex:1 1 auto; display:flex; flex-wrap:nowrap; align-content:stretch; justify-content:flex-start; margin:15px 0px;} .ArticleFontAdjuster > div, .ArticleSNSWrapper > div{flex:0 0 34px; width:34px; height:34px; line-height:0px; cursor:pointer; user-select:none; outline:none; margin-right:0.5vw; overflow:hidden;} .ArticleFontAdjuster > div.Disabled{color:#CCCCCC; border-color:#CCCCCC; cursor:default;} .ArticleFontAdjuster > div{border:1px solid #666666; text-align:center; font-size:17px; font-weight:bold; font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; letter-spacing:0px; display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; position:relative;} .ArticleSNSWrapper > div svg{width:36px; height:36px; fill:#333333; transition:fill ease-in 0.3s;} .ArticleSNSWrapper > div svg:hover{fill:#FBBA00; transition:fill ease-out 0.2s;} .ArticleFontAdjuster > div:last-of-type, .ArticleSNSWrapper > div:last-of-type{margin-right:0px;} .ArticleSNSWrapper{justify-content:flex-end !important;} .ArticleExtra .TagWrapper{flex-basis:100%;} .ArticleExtra .TagWrapper{flex-wrap:wrap; flex:0 0 100%;} .ArticleCredit{width:100%; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start; margin:calc(15px + 0.8vw) 0px;} .ArticleCredit > div{font-size:calc(11px + 0.1rem); color:#545454; margin-right:0.66rem;} .ArticleCredit > div:last-of-type{margin-right:0px;} .ArticleDate{font-size:calc(9px + 0.1rem) !important; color:#545454; margin:1vw 0px 0px 0px;} .ArticleLead{padding-left:3vw; border-left:5px solid #fbba00; margin:calc(30px + 2vw) 0px; margin-right:3vw; max-width:calc(100% - 3vw);} .ArticleLead p{font-weight:900; font-size:calc(0.09rem + 17px); margin-left:0px; margin-right:0px; max-width:none;} .ArticleGuide { position: relative; width: 100%; max-height:65px; overflow: hidden; background-color: #f1e8e3; padding:10px max(20px,3vw) 10px max(20px,3vw); ; } body.Dark .ArticleGuide { background-color: #2b3946; } .ArticleGuide.Enable { overflow: auto; max-height:none; } .ArticleGuide .ArticleGuideSwitch { position: relative; font-size: calc(0.09rem + 15px); margin-bottom: 5px; font-weight: 900; cursor: pointer; } .ArticleGuideSwitch::before{ width: 0; height: 0; border-left: 6px solid transparent; border-right:6px solid transparent; border-top: 10px solid #fbba00; content: ""; font-size: 0px; position: absolute; transform:rotate(270deg); left:-15px; top:10px; line-height: 0; } .ArticleGuide.Enable .ArticleGuideSwitch::before{ transform:rotate(0deg); } .ArticleGuide .ArticleGuideContent { font-size: calc(0.09rem + 15px); opacity: 0.3; letter-spacing: 0; } .ArticleGuide.Enable .ArticleGuideContent { opacity: 1; } .ArticleGuideContent p {margin:0px;} @media only screen and (min-width:660px){ .ArticleGuide { max-height:75px; } .ArticleGuide .ArticleGuideSwitch { font-size: calc(0.1rem + 17px); } .ArticleGuide .ArticleGuideContent { font-size: calc(0.09rem + 17px); } } /* NEW 20240119*******************************************/ .GalleryWrapper{width:100%; height:auto; position:relative; overflow:hidden; display:grid; gap:calc(0.5vw + 5px); grid-auto-flow:row; margin:calc(0.8vw + 8px) 0;} .GalleryWrapper > div{position:relative; overflow:hidden; line-height:0px; width:100%; height:0;} .GalleryWrapper article{display:block; position:absolute; top:0px; left:0px; bottom:0px; right:0px;} .GalleryWrapper article .Thumbnail{width:100%; height:100%; position:absolute; top:0px; left:0px; bottom:0px; right:0px; overflow:hidden; z-index: 1;} /*.GalleryWrapper article::after{content:""; width:60px; height:60px; border-radius:50%; position:absolute; top:1vw; right:1vw; background-image:url(../images/figureicon.svg); background-size:contain; background-position:center; background-repeat:no-repeat; background-color:#000000; z-index:2; opacity:0.2; transition:opacity ease-in 0.2s;}*/ .GalleryWrapper > div{padding-top:50%;} /*.GalleryWrapper article:hover::after{opacity:1; transition:opacity ease-out 0.4s;}*/ .GalleryWrapper a{z-index:3; pointer-events:all; display:block; position:absolute; top:0px; left:0px; bottom:0px; right:0px;} .GalleryWrapper img{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);} .GalleryWrapper img.front{width:100% !important; height:100% !important; object-fit:contain; z-index:3;} .GalleryWrapper img.back{min-width:102%; min-height:102%; object-fit:cover; z-index:2; filter:blur(12px);} .G2, .G3, .G4{grid-template-columns:1fr 1fr;} .G5{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;} .G3 > div:first-of-type{grid-column:1 / 3; grid-row:1;} .G3 > div:nth-of-type(2), .G3 > div:nth-of-type(3){padding-top:100%;} @media only screen and (min-width:660px){ .G3 { grid-template-columns:1fr 1fr 1fr;} .G3 > div:first-of-type{grid-column:1; grid-row:1;} .G3 > div:nth-of-type(2), .G3 > div:nth-of-type(3){padding-top:50%;} } .G5 > div:first-of-type{grid-column:1 / 4; grid-row:1;} .G5 > div:nth-of-type(2){grid-column:4 / 7; grid-row:1;} .G5 > div:nth-of-type(3){grid-column:1 / 3; grid-row:2;} .G5 > div:nth-of-type(4){grid-column:3 / 5; grid-row:2;} .G5 > div:nth-of-type(5){grid-column:5 / 7; grid-row:2;} .G5.More > div:nth-of-type(5)::before{content:""; background-color:rgba(0,0,0,0.6); width:100%; height:100%; z-index:2; position:absolute; inset:0;} .G5.More .GalleryCounter{width:auto; max-width:100%; height:auto; overflow:hidden; z-index:2; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#FFFFFF;} /* NEW 20240119*******************************************/ @media only screen and (max-width:760px) and (orientation: portrait), only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:414px) and (orientation: portrait), only screen and (min-device-pixel-ratio: 2) and (max-device-width:414px) and (orientation: portrait), only screen and (min-resolution:192dpi) and (max-device-width:414px) and (orientation: portrait), only screen and (min-resolution:2dppx) and (max-device-width:414px) and (orientation: portrait){ .ArticleCover .Thumbnail{display:none;} .ArticleCover .Thumbnail.Square{display:block;} } main article.S1 .ArticleLead p{font-size:calc(0.08rem + 15px);} main article.S2 .ArticleLead p{font-size:calc(0.07rem + 13px);} main article.L1 .ArticleLead p{font-size:calc(0.10rem + 19px);} main article.L2 .ArticleLead p{font-size:calc(0.12rem + 21px);} main article.S1 p{font-size:calc(0.09rem + 14px);} main article.S2 p{font-size:calc(0.08rem + 12px);} main article.L1 p{font-size:calc(0.10rem + 19px);} main article.L2 p{font-size:calc(0.11rem + 21px);} main article.S1 figcaption{font-size:calc(10px + 0.1rem);} main article.S2 figcaption{font-size:calc(8px + 0.1rem);} main article.L1 figcaption{font-size:calc(14px + 0.1rem);} main article.L2 figcaption{font-size:calc(16px + 0.1rem);} main article.S1 .ArticleCredit > div{font-size:calc(10px + 0.1rem);} main article.S2 .ArticleCredit > div{font-size:calc(8px + 0.1rem);} main article.L1 .ArticleCredit > div{font-size:calc(12px + 0.1rem);} main article.L2 .ArticleCredit > div{font-size:calc(14px + 0.1rem);} main article h4{font-size:calc(18px + 0.1rem);} main article.S1 h4{font-size:calc(16px + 0.08rem);} main article.S2 h4{font-size:calc(14px + 0.06rem);} main article.L1 h4{font-size:calc(20px + 0.12rem);} main article.L2 h4{font-size:calc(22px + 0.14rem);} main article a{color:#0084d8; text-decoration:underline; transition:color 0.2s ease-in;} main article a:hover{color:#24aaff; border-bottom-color:#0084d8; transition:color 0.2s ease-out;} body.Dark main article a{color:#ffdb73; text-decoration:underline; transition:color 0.2s ease-in;} body.Dark main article a:hover{color:#fff3d1; border-bottom-color:#0084d8; transition:color 0.2s ease-out;} @media only screen and (min-width:660px){ main article.S1 h4{font-size:calc(0.08rem + 17px);} main article.S2 h4{font-size:calc(0.07rem + 15px);} main article.L1 h4{font-size:calc(0.10rem + 21px);} main article.L2 h4{font-size:calc(0.12rem + 23px);} } figure{display:block; width:100%; margin:calc(50px + 2vw); position:relative; text-align:center;} figure img, main article video{width:auto; max-width:100% !important; max-height:70vh !important; display:block; margin:auto; z-index:1;} main article iframe{max-width:100% !important; display:block; margin:auto; z-index:1;} @media only screen and (max-width:450px){ figure img, main article img, main article video{width:370px; max-height:unset !important;} main article iframe.youtubeiframe{max-height:25vh !important;} } figcaption{width:auto; display:block; text-align:center; font-size:calc(12px + 0.1rem); line-height:110%; margin:10px auto 30px auto; font-style:italic;} figure a{position:relative; display:inline-block; width:auto; margin:auto;} figure a::after{content:""; width:60px; height:60px; border-radius:50%; position:absolute; top:1vw; right:1vw; background-image:url("../images/figureicon.svg"); background-size:contain; background-position:center; background-repeat:no-repeat; background-color:#000000; z-index:2; opacity:0.2; transition:opacity ease-in 0.2s;} figure a img{filter:brightness(100%); transition:filter ease-in 0.2s;} figure a:hover img{filter:brightness(50%); transition:filter ease-out 0.4s;} figure a:hover::after{opacity:1; transition:opacity ease-out 0.4s;} .RelatedArticle h4{font-size:calc(17px + 0.12rem);} .RelatedTag .TagWrapper{margin:0 0 calc(25px + 0.8vw);} .RelatedTag .GridStyleA .Grid-Col{flex:0 0 calc(50% - 4px - 0.4vw);} .RelatedTag .GridStyleA .Grid-Col:first-of-type{flex:0 0 100%; margin-right:0px; margin-bottom:calc(8px + 0.8vw);} .RelatedTag .GridStyleA .Grid-Col h3{font-size:calc(17px + 0.12rem);} .RelatedTag .GridStyleA .Grid-Col:first-of-type h3{font-size:1.2rem;} .RelatedTag .GridStyleA .Grid-Col:nth-of-type(2){margin-left:0px;} .RelatedTag .TagWrapper a, .ArticleExtra .TagWrapper a {color:#0084d8; border: #0084d8 1px solid; font-size:calc(16px + 0.05rem); text-decoration: underline;} body.Dark .RelatedTag .TagWrapper a, body.Dark .ArticleExtra .TagWrapper a{color:#ffdb73; border: #ffdb73 1px solid;} #ExpandableWrapper{z-index:1000000; width:100%; height:200px; display:block; transform:translateY(100px); position:absolute; bottom:0px; left:0px;} .ExpandableFade{width:100%; height:100px; background:rgb(66,86,100); background:-moz-linear-gradient(180deg, rgba(66,86,100,0) 0%, rgba(66,86,100,1) 100%); background:-webkit-linear-gradient(180deg, rgba(66,86,100,0) 0%, rgba(66,86,100,1) 100%); background:linear-gradient(180deg, rgba(66,86,100,0) 0%, rgba(66,86,100,1) 100%); -webkit-box-shadow:0px 40px 30px -30px rgba(0,0,0,0.4); box-shadow:0px 40px 30px -30px rgba(0,0,0,0.4);} .ExpandableLine{width:100%; height:1px; display:block;} .ExpandableButton{width:60px; height:30px; display:block; margin:0px auto; overflow:hidden; cursor:pointer; border-bottom-left-radius:40px; border-bottom-right-radius:40px; position:relative; transform:translateY(-4px); -webkit-box-shadow:0px 15px 10px -5px rgba(0,0,0,0.2); box-shadow:0px 15px 10px -5px rgba(0,0,0,0.2); transition:transform ease-in 0.2s;} .ExpandableButton::before{content:""; position:absolute; top:6px; left:20px; border-left:10px solid transparent; border-right:10px solid transparent; border-top-width:12px; border-top-style:solid; border-top-color:#FFFFFF; width:0px; height:0px; display:inline-block; *display:inline; padding:0px; margin:0px 3px 0px 0px; float:left; vertical-align:bottom; z-index:10000; pointer-events:none; transition:top ease-in 0.1s;} .ExpandableButton:hover{transform:translateY(0px); transition:transform ease-out 0.2s;} .ExpandableButton:hover::before{top:9px; transition:top ease-out 0.1s;} .ExpandableCaption{width:100px; height:auto; display:block; margin:10px auto; color:#FFFFFF; text-align:center; font-size:15px; font-weight:500; line-height:100%;} .ExpandableCaption::before{content:"展開文章";} section.Expandable.Show #ExpandableWrapper{height:130px;} section.Expandable.Show .ExpandableFade{height:30px; background:none; background-color:rgb(66,86,100); -webkit-box-shadow:0px 20px 15px -10px rgba(0,0,0,0.4); box-shadow:0px 20px 15px -10px rgba(0,0,0,0.4);} section.Expandable.Show .ExpandableButton::before{border-top-width:0px; border-top-color:transparent; border-bottom-width:12px; border-bottom-style:solid; border-bottom-color:#FFFFFF; } section.Expandable.Show .ExpandableCaption::before{content:"縮小";} .ArticleStatic .Header{font-weight:100; padding:0px calc(3vw - 5px);} .ArticleStatic a{border-bottom:1px dotted #666666;} .ArticleStatic .SectionHeader{border-left:5px solid #fbba00; margin:2vw 0px;} .ArticleStatic article p, .ArticleStatic li{font-size: calc(0.06rem + 15px);} .ArticleStatic p, .ArticleStatic li{font-size: calc(0.06rem + 15px);} .ArticleStatic ul, .ArticleStatic ol{margin-left:3vw; margin-right:3vw;} .OHKFInfo{width:100%; display:flex; flex-wrap:wrap; align-items:flex-start;} .ArticleStatic h3{margin-top:3vw; font-size:calc(0.15rem + 22px);} .ArticleStatic h4{font-size:calc(0.1rem + 15px);} .OHKFInfo > div{flex:0 0 100%; order:2;} .OHKFInfo > div:last-of-type{max-width:260px; padding-right:0px; padding-top:calc(30px + 1vw); order:1;} .OHKFInfo > div:last-of-type a{border:none;} .OHKFInfo > div img{width:auto; max-width:100%; max-height:250px !important; margin:0px 3vw;} .OHKFInfo > div img.small{width:auto; max-width:80%; max-height:200px !important; margin:0px 3vw;} .OHKFLink{width:100%; display:flex; flex-wrap:wrap; align-items:stretch; align-content:space-between;} .OHKFLink > div{flex:0 0 100%;} .ContactUsWrapper{display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start;} .ContactUsWrapper article{flex:0 0 100%;} .ContactUsWrapper article p{margin-top:calc(12px + 1vw); margin-bottom:calc(12px + 1vw);} .ContactUsWrapper article p span{display:block;} .ContactUsWrapper article p span:first-of-type{font-weight:900;} .Accordion{width:44px; height:44px; display:inline-block; vertical-align:middle; margin-left:calc(3vw - 5px); border:1px solid #E2E3E4; border-radius:50%; cursor:pointer; position:relative; background-color:#FFFFFF;} .Accordion::before{content:""; position:absolute; top:14px; left:13px; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom-width:12px; border-bottom-style:solid; border-bottom-color:rgba(0,0,0,0.4); width:0px; height:0px; display:inline-block; *display:inline; padding:0px; margin:0px 3px 0px 0px; float:left; vertical-align:bottom; z-index:10000; pointer-events:none;} .Accordion.Show{background-color:#fbba00; border-color:#fbba00;} .Accordion.Show::before{top:16px; border-bottom-style:none; border-top-width:12px; border-top-style:solid; border-top-color:#FFFFFF;} .AboutUsContent{overflow:hidden;} @media only screen and (min-width:660px){ .RelatedArticle h4{font-size:0.35rem;} .RelatedTag .GridStyleA .Grid-Col{flex:1 1 auto !important; margin:0px calc(4px + 0.4vw) !important;} .RelatedTag .GridStyleA .Grid-Col:first-of-type{margin-left:0px !important;} .RelatedTag .GridStyleA .Grid-Col h3, .RelatedTag .GridStyleA .Grid-Col:first-of-type h3{font-size:calc(20px + 0.11rem);} .RelatedTag .GridStyleA .Grid-Col:last-of-type{margin-right:0px !important;} } @media only screen and (min-width:900px){ .OHKFInfo > div{flex:2 1; order:1;} .OHKFInfo > div:last-of-type{flex-grow:1; max-width:450px; padding-right:3vw; padding-top:0px;} .OHKFInfo > div img{max-height:300px !important; margin:auto;} .ContactUsWrapper article{flex:1 0 50%; padding-right:calc(15px + 1vw);} .ContactUsWrapper article p span{display:inline-block;} .ContactUsWrapper article p span:first-of-type{font-weight:100;} .ContactUsWrapper article p{margin-top:calc(8px + 0.5vw); margin-bottom:calc(8px + 0.5vw);} .OHKFLink > div{flex:0 0 47%; margin:1.5% 1.5% 3% 1.5%; -webkit-box-shadow:0px 25px 20px -10px rgba(0,0,0,0.2); box-shadow:0px 25px 20px -10px rgba(0,0,0,0.2); border-bottom-right-radius:30px;} } @media only screen and (min-width:1200px){ .ArticleCover .Thumbnail{padding-top:50%;} .ArticleCover .Headline h1{width:calc(100% - 420px - 2vw);} .ArticleLHS, .ArticleRHS{position:-webkit-sticky; position:sticky; top:125px; align-self:flex-start; overflow:inherit;} .ArticleLHS{flex:1 1; overflow:hidden; border-right:1px solid #E2E3E4; padding-right:calc(15px + 1vw);} .ArticleRHS{flex-basis:calc(360px + 2vw + 1px); border-left:1px solid #E2E3E4; transform:translateX(-1px); padding-left:calc(15px + 1vw);} .ArticleRHS .SectionHeader.wMargin{margin:0px;} .ArticleLHS{margin-bottom:0px;} } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .ArticleLHS, .ArticleRHS{top:0px; bottom:auto; align-self:flex-start; position:relative;} .ArticleCover .Thumbnail{width:100%; height:50vh; padding-top:0px;} .ArticleCover .Thumbnail a{width:102%; height:auto;} .ArticleCover .Thumbnail a img{height:auto;} figure a{display:block; width:auto;} .ArticleCover .Thumbnail a::after{top:50%; transform:translateY(-50%);} } @media screen and (-ms-high-contrast: active) and (orientation:portrait), (-ms-high-contrast: none) and (orientation:portrait){ .ArticleCover .Thumbnail a, .ArticleCover .Thumbnail a img{height:100%; width:auto;} } #main{width:100%; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start;} #puzzle, #Quiz{flex:0 0 100%;} #puzzle > div{display:block; margin:0px; line-height:0px;} #puzzle .selected{background-color:#0d8600; color:#FFFFFF;} #puzzle .found{background-color:#fbba00;} .puzzleSquare{width:calc((100vw - 42px - 1.6vw) / 9 - 2px); min-width:calc((320px - 42px - 1.6vw) / 9 - 2px); height:calc((100vw - 42px - 1.6vw) / 9 - 2px); min-height:calc((320px - 42px - 1.6vw) / 9 - 2px); font-size:calc(0.5rem + 10px); line-height:100%; border:none; 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:-webkit-box-shadow 0.3s ease-in, box-shadow 0.3s ease-in; padding:0px; text-align:center; background-color:#FFFFFF; margin:1px; color:#333333;} .puzzleSquare:hover{-webkit-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.4); box-shadow:0px 0px 20px 0px rgba(0,0,0,0.4); transform:translateZ(10px); transition:-webkit-box-shadow 0.2s ease-out,box-shadow 0.2s ease-out;} .puzzleSquare.selected:hover, .puzzleSquare.found:hover{-webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0);} .puzzleSuccessNickname{word-break:break-all;} .GameInfo{margin-top:30px; flex:0 1 100%; width:100%; display:flex; flex-wrap:nowrap;} .GameInfo li{color:#FFFFFF; font-size:calc(13px + 0.1rem); margin:10px 0px;} #words{flex:0 0 100%; width:100%; list-style:none; padding:0px; display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:flex-start;} #words > li{position:relative; width:100%;} #words > li h3{color:#FFFFFF; margin:0.8rem 0px;} #words > li p{color:#FFFFFF; margin:0.2rem 0px;} #words > li input{background-color:transparent; border:none; color:#FFFFFF; font-size:calc(0.1rem + 16px);} #words > li:first-of-type, #words > li:last-of-type{flex:0 0 100%;} .wordFound, .wordFound > input.word{color:#fbba00 !important; cursor:pointer; display:block;} .wordsBtn{margin:30px 0px 0px 0px; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start;} .wordsBtn > .Button{margin-right:10px; font-size:calc(16px + 0.2vw); position:relative; margin:calc(10px + 0.2vw) 0px; display:flex; flex-wrap:nowrap; flex:0 0 auto;} .wordsBtn > .Button a{font-size:calc(16px + 0.2vw); font-weight:500; border-bottom:none; padding:0.3rem 0.8rem} .wordsBtn > .Button{margin-right:10px; font-size:calc(16px + 0.2vw);} .wordsBtn > .Button:last-of-type{margin-right:0px;} .wordInfoWrapper{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; color:#fbba00;} .wordInfoWrapper > div{line-height:120%;} .wordInfoWrapper > div:first-of-type{margin-right:50px;} .GameRankingWrapper{display:flex; flex-wrap:wrap; align-items:stretch; justify-content:space-between;} .GameRankingWrapper > div{flex:0 0 45%; display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start; margin:0.5vw 0px; word-break:break-all;} .GameRankingWrapper > div > div{flex:1 1 auto; font-size: calc(0.1rem + 13px); color:#FFFFFF;} .GameRankingWrapper > div > div:first-of-type{flex:0 0 40px;} .GameRankingWrapper > div > div:last-of-type{text-align:right;} .OverlayWrapper .GameSuccessHeader {color:#333333;} .OverlayWrapper .GameRankingWrapper > div.RankingWording {color:#333333; flex:1 100%;} .OverlayWrapper .GameRankingWrapper > div > div{color:#333333;} .GameChannelWrapper, .GameSectionWrapper{width:100%; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start;} .GameChannelWrapper > div, .GameSectionWrapper > div{flex:0 0 100%;} .GameSectionSubHead{width:100%; display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start} .GameSectionSubHead > div{flex:0 0 auto; text-indent:20px; border-left:3px solid #fbba00; margin:30px 0px;} .GameSectionButton{width:100%; display:flex; flex-wrap:wrap; margin:30px 0px;} .GameSectionButton .Button{border:1px solid rgba(255,255,255,0.7); -webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0); margin:0.1rem 0.1rem 0 0; padding-left:30px; position:relative; transition:0.2s ease-in;} .GameSectionButton .Button:hover{-webkit-box-shadow:0px 10px 10px 0px rgba(0,0,0,0.4); box-shadow:0px 10px 10px 0px rgba(0,0,0,0.4); background-color:rgba(0,0,0,0.5); transition:0.2s ease-out;} .GameSectionButton .Button::before{content:""; width:20px; height:20px; border:1px solid rgba(255,255,255,0.7); border-radius:50%; position:absolute; top:50%; left:10%; transform:translate(0%,-50%);} .GameSectionButton .Button.Completed::after{content:"\2713"; color:#fbba00; font-size:30px; font-weight:900; position:absolute; left:12px; top:50%; transform:translate(0%,-50%);} .GameSectionButton .Button a{width:100%; display:block; padding:10px 20px; font-size:18px; color:#FFFFFF; line-height:30px; font-weight:900; text-shadow:0px 0px 0px rgba(0,0,0,0);} .GameSectionButton.noCheck .Button{ padding-left:0px;} .GameSectionButton.noCheck .Button::before{display:none;} #Quiz img{width:100%;} .QuizOption{display:block; position:relative; padding-left:30px; cursor:pointer; font-size:calc(16px + 0.2vw); font-weight:100; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;} .QuizOption input{position:absolute; opacity:0; cursor:pointer;} .QuizOptionCheckmark{position:absolute; top:calc(50% - 11px); left:0%; translate:transformY(-50%); height:22px; width:22px; background-color:#FFFFFF; border:1px solid rgba(0,0,0,0.1); border-radius:50%;} .QuizOption:hover input ~ .QuizOptionCheckmark{background-color:#fbba00;} .QuizOption input:checked ~ .QuizOptionCheckmark{background-color:#fbba00;} .QuizOptionCheckmark:after{content:""; position:absolute; display:none;} .QuizOption input:checked ~ .QuizOptionCheckmark:after{display:block;} .QuizOption .QuizOptionCheckmark:after{top:5px; left:5px; width:10px; height:10px; border-radius:50%; background:white;} .QuizOptionButton{width:auto; display:inline-block; padding:0.1rem 0.4rem; font-size:calc(16px + 0.2vw); font-weight:500; color:#333333; background-image:linear-gradient(44.8deg, rgba(255,136,102,1) -53.1%, rgba(255,221,136,1) 49%); border-radius:200px; -webkit-box-shadow:0px 25px 20px -10px rgba(0,0,0,0.3); box-shadow:0px 25px 20px -10px rgba(0,0,0,0.3); user-select:none; cursor:pointer; position:relative; transition:-webkit-box-shadow ease-out 0.2s, box-shadow ease-out 0.2s;} .QuizOptionButton:hover{-webkit-box-shadow:0px 5px 10px -5px rgba(0,0,0,0.5); box-shadow:0px 5px 10px -5px rgba(0,0,0,0.5); transition:all ease-in 0.1s;} #Quiz{position:relative; font-size:0px; line-height:0px; overflow:hidden;} #Quiz.GameRule img{filter:blur(2px); -webkit-filter:blur(2px);} #Quiz.GameRule::before{content:""; position:absolute; top:-1%; left:-1%; width:102%; height:102%; z-index:2; background-color:rgba(0,0,0,0.8);} #Quiz .wordsBtn{position:absolute; top:0px; left:10px; z-index:3; margin-top:0px;} #Quiz.GameRule .wordsBtn{top:50%; left:50%; transform:translate(-50%, -50%);} @media only screen and (min-width:660px){ #puzzle, #Quiz{flex:0 0 324px; width:324px;} .puzzleSquare{width:34px; height:34px;} .GameInfo{margin-top:0px; flex:0 0 calc(100% - 324px); width:calc(100% - 324px); padding-left:2vw;} } @media only screen and (min-width:800px){ #puzzle, #Quiz{flex:0 0 540px; width:540px;} .puzzleSquare{width:58px; height:58px;} .GameInfo{flex:0 0 calc(100% - 540px); width:calc(100% - 540px);} } @media only screen and (min-width:900px){ #main{flex-wrap:nowrap;} #words{flex-flow:column; justify-content:space-around; margin:0px;} #words > li:first-of-type{flex:0 0 auto; width:100%;} #words > li:last-of-type{flex:1 1 auto !important; display:flex;} #words > li:last-of-type > div{align-self:flex-end;} .GameSectionWrapper > div{flex:0 0 100%; width:100%;} .GameChannelWrapper > div{flex:0 0 50%; width:50%;} } @media screen and (-ms-high-contrast: active) and (min-width:900px), (-ms-high-contrast: none) and (min-width:900px) { .GameChannelWrapper > div{flex:0 0 43%; width:43%;} } @media only screen and (min-width:1200px){ .GameRankingWrapper > div{flex:0 0 100%;} .GameRankingWrapper > div:first-of-type{margin-top:2vw;} } .OverlayWrapper{width:auto; min-width:300px; max-width:1000px; padding:calc(12px + 1vw); position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:999999999; border-radius:6px; display:none; color:#000000; align-items:center; justify-content:center;} .OverlayWrapper p{color:#000000; font-size:calc(16px + 0.2vw);} .OverlayWrapper .CloseOverlay{width:41px; height:41px; background-color:#000000; border:2px solid rgba(255,255,255,0.8); border-radius:50%; cursor:pointer; position:absolute; top:10px; right:10px; z-index:5;} .OverlayWrapper .CloseOverlay::before, .OverlayWrapper .CloseOverlay::after{content:""; width:20px; height:2px; font-size:0px; line-height:0px; display:block; background-color:#FFFFFF; position:absolute; right:8px; top:17px; transform-origin:center;} .OverlayWrapper .CloseOverlay::before{transform:rotate(-45deg);} .OverlayWrapper .CloseOverlay::after{transform:rotate(45deg);} .OverlayWrapper.Show{width:100%; display:flex;} .OverlayContainer{max-height:100vh; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; background-color:rgba(229,240,211,1); -webkit-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.4); box-shadow:0px 0px 20px 0px rgba(0,0,0,0.4); position:relative; padding:10px 0px;} /* User Comment *******************************************************************************************************************************************************************/ #ArticleComment{margin:2px 0.2rem 0px 0px; padding-right:0.2rem; border-right:1px solid #333333; width:auto; flex:0 0 auto;} #ArticleComment a{display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:center; width:auto;} #ArticleComment svg, #ArticleComment span{flex:0 0 auto;} #ArticleComment span{font-size:calc(11px + 0.1vw); height:auto; line-height:normal; padding:0px 0.1rem; letter-spacing:0px;} #CommentInclHeader{display:none; position:-webkit-sticky; position:sticky; top:0px; left:0px; background-color:#FFFFFF; z-index:99999999;} #CommentInclFooter{display:none; position:relative; width:100%; margin-bottom:100px; background-color:#FFFFFF; z-index: 1;} .CommentSection{background-image:linear-gradient( 89.4deg, rgba(74,77,103,1) -4.3%, rgba(119,125,165,1) 102.1%); padding:calc(15px + 1vw) 0px; overflow:inherit;} .CommentWrapper{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start; position:relative;} #CommentLightBox{position:fixed; top:0px; left:0px; right:0px; bottom:0px; width:100vw; height:100vh; z-index:9999997; background-color:rgba(0,0,0,0.7); webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; display:none;} #CommentLightBox.Expand{z-index:999999997;} .CommentLHS, .CommentRHS{flex:0 0 100%; width:100%; position:relative;} .CommentLHS{background-color:rgba(255,255,255,1); -webkit-box-shadow:0px 20px 20px -10px rgba(0,0,0,0.4); box-shadow:0px 20px 20px -10px rgba(0,0,0,0.4); padding:calc(8px + 0.8vw); margin-bottom:calc(15px + 1vw); display:none; border-top:5px solid #fbba00;} .CommentLHS.Active{display:block;} .CommentLHS .AlertMessage{padding:0.1rem 0px;} #CommentLogin{background-color:transparent; -webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0); padding:0px; border-top:none;} .CommentUserWrapper{width:100%; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start;} .CommentUserWrapper > div{flex:0 0 100%; padding:calc(4px + 0.4vw) 0px;} .CommentInput{width:100%; height:10vw; min-height:70px; resize:none; padding:0.3vw;} .CommentLHS label{display:block; position:relative; padding-left:30px; cursor:pointer; font-size:calc(16px + 0.2vw); font-weight:100; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;} .CommentCheckmark{position:absolute; top:calc(50% - 11px); left:0%; translate:transformY(-50%); height:22px; width:22px; background-color:#FFFFFF; border:1px solid rgba(0,0,0,0.1); border-radius:50%;} .CommentLHS label:hover input ~ .CommentCheckmark{background-color:#fbba00;} .CommentLHS label input{display:none;} .CommentLHS label input:checked ~ .CommentCheckmark{background-color:#fbba00;} .CommentCheckmark:after{content:""; position:absolute; display:none;} .CommentLHS label input:checked ~ .CommentCheckmark:after{display:block;} .CommentLHS label .CommentCheckmark:after{top:5px; left:5px; width:10px; height:10px; border-radius:50%; background:white;} #CommentTrigger, #CommentTrigger.Hide{display:none;} #CommentTrigger > .Button{text-align:center;} #CommentTrigger > .Button a{font-size:calc(16px + 0.2vw);} .CommentBtn{margin:0px; display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:space-around;} .CommentBtn > .Button{margin-right:10px; font-size:calc(16px + 0.2vw); flex:1 1 auto; text-align:center;} .CommentBtn > .Button:last-of-type{margin-right:0px;} .CommentBtn > .Button a{font-size:calc(16px + 0.2vw); font-weight:500; border-bottom:none; padding:0.3rem 0rem;} .CommentBtn > .Button a span{display:inline-block;} .CommentBtn > .Button.Cancel{display:none; background-color:#FFFFFF; border:1px solid #E2E3E4;} .CommentBtn > .Button.Cancel a{color:#333333;} #CommentLogin .CommentBtn{flex-wrap:nowrap;} #CommentLogin .CommentBtn > .Button{flex:1 1; margin-right:0.3rem; display:flex; align-items:center;} #CommentLogin .CommentBtn > .Button:last-of-type{margin-right:0px;} .CommentSection.StandAlone .CommentBtn{ flex:0 0 calc(100% - 70px);} .CommentThread{margin-bottom:calc(15px + 1vw); position:relative;} .CommentThread > ul{width:100%; background-color:rgba(255,255,255,1); list-style:none; margin:0px 0px 0.3rem 0px; padding:calc(5px + 0.45rem); -webkit-box-shadow:0px 20px 20px -10px rgba(0,0,0,0.4); box-shadow:0px 20px 20px -10px rgba(0,0,0,0.4); display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center;} .CommentThread > ul:last-of-type{margin-bottom:0px;} .CommentThread li{display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start; position:relative;} .CommentThread li > div{flex:0 0 auto;} .CommentUser{flex:1 1; flex-wrap:wrap !important;} .CommentReaction{flex:0 1 100px; align-items:center;} .CommentReaction > a{flex:0 0 auto; height:calc(36px + 0.2vw); align-self:flex-end; padding:0px 0px 0px calc(36px + 0.2vw); font-size:calc(12px + 0.1vw); line-height:calc(36px + 0.2vw); background-size:auto 90%; background-repeat:no-repeat; display:block; color:#333333 !important;} .CommentReaction > a:hover{color:#333333;} .CommentReaction > a.CommentLike{background-image:url("../images/like.svg"); background-position:left center; margin-right:0.4rem;} .CommentReaction > a.CommentDisLike{background-image:url("../images/dislike.svg"); background-position:left center;} .CommentNumber{flex:0 1 80px; font-size:calc(16px + 0.2vw); justify-content:flex-end !important;} .CommentUserName{font-size:calc(16px + 0.2vw); font-weight:500; margin-right:0.3rem; position:relative;} .CommentUserSelect{position:absolute; top:50%; transform:translateY(-50%); left:0px; width:calc(20px + 0.5vw); height:calc(20px + 0.5vw); background-color:#FFFFFF; border-radius:50%; border:1px solid #CCCCCC; transition:background-color 0.2s ease-in; background-color:#FFFFFF;} .CommentUserSelect::before{content:"≡"; font-size:calc(13px + 0.2vw); font-weight:500; position:absolute; color:#999999; display:block; width:calc(20px + 0.45vw); height:calc(20px + 0.5vw); line-height:calc(20px + 0.5vw); text-align:center; cursor:pointer; transition:color 0.2s ease-in;} .CommentUserSelect.Active{background-color:#333333;} .CommentUserSelect.Active::before{content:"×"; font-size:calc(22px + 0.2vw); font-weight:100; width:calc(20px + 0.4vw); line-height:calc(20px + 0.4vw); color:#FFFFFF;} .CommentUserSelect:hover{background-color:#333333; transition:background-color 0.2s ease-out;} .CommentUserSelect:hover::before{color:#FFFFFF; transition:color 0.2s ease-out;} .CommentSelectBubble{flex:0 0 auto; position:absolute; top:0px; left:0px; z-index:10000000; display:none; flex-wrap:nowrap; flex-flow:column; background-color:rgba(0,0,0,0.8); -webkit-box-shadow:0px 20px 20px -10px rgba(0,0,0,0.4); box-shadow:0px 20px 20px -10px rgba(0,0,0,0.4); padding:0.3rem;} .CommentSelectBubble.Active{display:flex;} .CommentSelectBubble > a{width:100%; flex:0 0 100%; text-align:center; font-size:calc(14px + 0.2vw); line-height:calc(20px + 0.2vw); white-space:nowrap; padding:0.2rem; color:#FFFFFF; background-color:transparent; display:block; border-bottom:1px solid rgba(0,0,0,0.8); transition:background-color 0.2s ease-in; z-index:10;} .CommentSelectBubble > a:hover{background-color:#000000; transition:background-color 0.2s ease-out;} .CommentSelectBubble > a:last-of-type{border-bottom:none;} .CommentSelectBubble::before, .CommentSelectBubble::after{content:""; display:block; position:absolute; width:0%; height:0%; border-style:solid;} .CommentSelectBubble::before{top:50%; transform:translateY(-50%); left:-30px; border-color:transparent rgba(0,0,0,0.8) transparent transparent; border-width:15px;} .CommentTime{font-size:calc(12px + 0.1vw); padding-top:0.1rem;} .CommentMessage{flex:0 1 100%; flex-wrap:wrap !important; border-top:1px solid rgba(0,0,0,0.1); margin-top:0.3rem;} .CommentMessage p{font-size:calc(16px + 0.2vw); flex:0 0 100%; margin:calc(12px + 0.2vw) 0px; word-break:break-all;} .CommentAction{flex:1 1 auto; justify-content:flex-end !important;} .CommentAction{flex-wrap:wrap;} .CommentAction > .Button{flex:0 0 auto; margin-right:0.1rem;} .CommentAction > .Button a{font-size:calc(16px + 0.1vw); font-weight:500; padding:calc(8px + 0.2vw) calc(10px + 0.3vw);} .CommentAction > .Button:last-of-type{margin-right:0px;} .CommentAction > .Button.Report{border:1px solid rgba(0,0,0,0.1); -webkit-box-shadow:0px 25px 20px -10px rgba(0,0,0,0); box-shadow:0px 25px 20px -10px rgba(0,0,0,0);} .CommentAction > .Button.Report a{color:#333333; text-shadow:0px 0px 0px rgba(0,0,0,0);} .CommentAction > .Button.Report:hover a{color:#333333 !important;} .CommentQuoteMsg{display:block; width:100%; flex:0 0 100%; background-color:#F2F2F2; border:1px solid #E2E3E4; border-left:3px solid #fbba00; margin:calc(12px + 0.2vw) 0px; -webkit-box-shadow:0px 10px 10px -5px rgba(0,0,0,0.1); box-shadow:0px 10px 10px -5px rgba(0,0,0,0.1);} .CommentQuoteMsg p{font-size:calc(13px + 0.2vw); padding:0px calc(12px + 0.2vw); margin:calc(12px + 0.2vw) 0px 0px 0px;} .CommentQuoteMsg p:last-of-type{margin-bottom:calc(12px + 0.2vw); padding-bottom:calc(6px + 0.2vw);} .CommentQuoteMsg p.QuoteHeader{font-size:calc(12px + 0.1vw); font-weight:900; padding-bottom:0px; margin-bottom:0px;} .CommentQuoteMsg p.QuoteHeader > *{display:inline-block; vertical-align:bottom;} .CommentQuoteMsg p.QuoteHeader a{margin:0px 10px; border-bottom:1px solid #999999; color:#333333;} .CommentQuoteMsg p.QuoteHeader .CommentTime{font-size:calc(11px + 0.1vw); letter-spacing:0px; font-weight:100;} .CommentReplyMsg{display:inline-block; width:auto; flex:0 0 auto; background-color:#F2F2F2; border:1px solid #E2E3E4; border-left:3px solid #79c490; margin:calc(12px + 0.2vw) 0px; -webkit-box-shadow:0px 10px 10px -5px rgba(0,0,0,0.1); box-shadow:0px 10px 10px -5px rgba(0,0,0,0.1);} .CommentReplyMsg p{font-size:calc(12px + 0.1vw); font-weight:900; padding:0px calc(12px + 0.2vw);} .CommentReplyMsg p a{margin:0px 10px; border-bottom:1px solid #999999; color:#333333; line-height:normal;} .CommentReplyMsg p a:hover{color:#333333;} .CommentAdmin{background-color:#fbba00;} .CommentAdmin > ul{padding:0.45rem; border:5px solid #fbba00; background-color:transparent;} .CommentAdmin .CommentQuoteMsg, .CommentAdmin .CommentReplyMsg{background-color:#FFFFFF;} .CommentAdmin .CommentMessage, .CommentAdmin .CommentReaction, .CommentAdmin .CommentAction{background-color:#fff8ef; padding:0px 20px;} .CommentAdmin .CommentReaction, .CommentAdmin .CommentAction{padding-bottom:20px;} .CommentSection.NoComment .CommentLHS{flex:1 1 100%; width:100%; margin-right:0px;} .CommentSection.NoComment .CommentRHS{display:none;} .CommentSection.NoComment #CommentLogin .CommentBtn > div{flex:0 0 48%; margin-bottom:0px;} #ViewAllComment{display:none;} .CommentRHS .PaginationWrapper a{color:#FFFFFF !important;} .CommentRHS .PaginationWrapper.Inv > a.Navigation.FirstPage::before{border-left-color:rgba(255,255,255,0.7);} .CommentRHS .PaginationWrapper.Inv > a.Navigation.LastPage::before{border-right-color:rgba(255,255,255,0.7);} .CommentRHS .PaginationWrapper a.Selected{background-color:transparent;} #CommentPageHeader{display:none;} #ArticleCommentTrigger{width:100%; display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; padding-bottom:35px;} #ArticleCommentTrigger > .Button{text-align:center; flex:0 0 auto;} #ArticleCommentTrigger > .Button a{font-size:calc(16px + 0.2vw);} #BackToArticle{width:auto; display:inline-block;} #BackToArticle a{font-size:calc(12px + 0.25rem); padding:0.1rem 0.3rem;} #CommentSwitcher{width:100%; display:none; flex-wrap:nowrap; align-items:flex-start; justify-content:center; position:absolute; top:-40px; left:0px; padding-top:10px; overflow:hidden;} #CommentSwitcher > div{width:50px; height:25px; border-top-left-radius:25px; border-top-right-radius:25px; background-color:#fbba00; -webkit-box-shadow:0px -5px 5px 0px rgba(0,0,0,0.3); box-shadow:0px -5px 5px 0px rgba(0,0,0,0.3); position:relative;} #CommentSwitcher > div::before{content:"〈"; color:#FFFFFF; display:block; width:50px; height:50px; font-size:15px; transform:rotate(90deg); transform-origin:center center; position:absolute; top:3px; left:-14px; transition:transform 0.2s ease-in;} #CommentSwitcher.Close > div::before{content:"\00d7"; color:#FFFFFF; display:block; width:50px; height:50px; font-size:36px; transform:rotate(-90deg); transform-origin:center center; position:absolute; top:-25px; left:2px; transition:transform 0.2s ease-out;} @media only screen and (min-width:813px){ .CommentRHS .PaginationWrapper a.Selected{background-color:#fbba00;} } @media only screen and (min-width:1100px){ .CommentWrapper{flex-wrap:nowrap;} .CommentLHS, .CommentRHS{position:-webkit-sticky; position:sticky; align-self:flex-start; top:125px;} .CommentLHS{flex:0 0 calc(360px + 2vw + 1px); width:calc(360px + 2vw + 1px); margin-right:calc(15px + 1vw);} .CommentRHS{flex:1 1 auto; width:auto;} #CommentLogin{background-color:transparent;} #CommentLogin .CommentBtn{flex-wrap:wrap;} #CommentLogin .CommentBtn > .Button{flex:0 0 100%; margin-right:0px; margin-bottom:0.3rem;} #CommentLogin .CommentBtn > .Button:last-of-type{margin-bottom:0px;} } @media screen and (-ms-high-contrast: active) and (min-width:1100px), (-ms-high-contrast: none) and (min-width:1100px) { .CommentLHS{flex:0 0 360px !important; width:360px !important;} } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .CommentRHS{padding-bottom:calc(4vw + 50px);} } @media only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:812px) and (orientation: portrait), only screen and (min-device-pixel-ratio: 2) and (max-device-width:812px) and (orientation: portrait), only screen and (min-resolution:192dpi) and (max-device-width:812px) and (orientation: portrait), only screen and (min-resolution:2dppx) and (max-device-width:812px) and (orientation: portrait), only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:1366px) and (orientation: landscape), only screen and (min-device-pixel-ratio: 2) and (max-device-width:1366px) and (orientation: landscape), only screen and (min-resolution:192dpi) and (max-device-width:1366px) and (orientation: landscape), only screen and (min-resolution:2dppx) and (max-device-width:1366px) and (orientation: landscape){ .CommentSection{height:auto; background-attachment:fixed; margin-bottom:0px !important; overflow:auto; padding:3vw 0%;} .CommentLHS{position:relative; bottom:0px; left:0px; z-index:9999999; pointer-events:all; webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); order:2; padding:0px; background-color:transparent; border:none; -webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0); margin-bottom:calc(8px + 0.8vw);} .CommentLHS.Expand{z-index:999999999;} .CommentRHS .PaginationWrapper{display:none;} .CommentBtn > .Button.Cancel{display:block;} .CommentLHS .CommentUserWrapper > div{display:none;} #CommentPost.Active .CommentUserWrapper > div#CommentSwitcher{display:flex;} #UserCommentBlock #CommentPost.Active .CommentUserWrapper > div#CommentSwitcher{display:none;} #CommentPost.Active .CommentUserWrapper > div#CommentTrigger{display:block;} #CommentPost.Active .CommentUserWrapper > div#CommentTrigger.Hide{display:none;} #CommentLogin.Active .CommentUserWrapper > div.CommentBtn{display:flex;} .CommentRHS .CommentThread{display:none;} .CommentRHS .CommentThread:first-of-type{display:block;} .CommentSection.StandAlone{background-image:none; z-index:9999;} .CommentSection.StandAlone .CommentLHS{position:fixed; background-color:rgba(255,255,255,1); -webkit-box-shadow:0px 20px 20px -10px rgba(0,0,0,0.4); box-shadow:0px 20px 20px -10px rgba(0,0,0,0.4); padding:calc(8px + 0.8vw); border-top:5px solid #fbba00; margin:0px;} .CommentSection.StandAlone .CommentLHS.Active .CommentUserWrapper > div{display:block;} .CommentSection.StandAlone .CommentLHS.Active .CommentUserWrapper > div.CommentBtn{display:flex;} .CommentSection.StandAlone .CommentRHS .CommentThread{display:block;} .CommentSection.StandAlone .CommentRHS .PaginationWrapper{display:flex;} .CommentSection.StandAlone #CommentLogin{background-color:rgba(255,255,255,0.8); -webkit-box-shadow:0px -20px 20px -10px rgba(0,0,0,0.4); box-shadow:0px -20px 20px -10px rgba(0,0,0,0.4); padding:calc(8px + 0.8vw);} #ViewAllComment{display:flex; align-items:center; justify-content:center; width:100%; flex:0 0 100%; margin:calc(4px + 0.4vw) 0px calc(8px + 0.8vw) 0px; order:2;} #ViewAllComment a{font-size:calc(16px + 0.1vw); font-weight:500; border-bottom:1px solid #FFFFFF;} .CommentSection.StandAlone #ViewAllComment{display:none;} } /* Voting *******************************************************************************************************************************************************************/ .VoteAction{display:none; padding-bottom:calc(30px + 1vw); margin-bottom:calc(30px + 1vw); border-bottom:1px solid #E2E3E4;} .VoteAction.Active{display:block;} #VotingOptionsList{width:100%; margin:calc(10px + 1vw) 0px calc(30px + 1vw) 0px; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start; position:relative;} #VotingOptionsList > div{position:relative; flex:0 0 calc(100% - 8px); margin:4px; padding:2px; border:1px solid #E2E3E4; background-color:#FFFFFF; -webkit-box-shadow:0px 5px 5px 0px rgba(0,0,0,0.05); box-shadow:0px 5px 5px 0px rgba(0,0,0,0.05); transition:-webkit-box-shadow 0.2s ease-in,box-shadow 0.2s ease-in;} #VotingOptionsList > div:hover{-webkit-box-shadow:0px 10px 10px -5px rgba(0,0,0,0.3); box-shadow:0px 10px 10px -5px rgba(0,0,0,0.3); transition:-webkit-box-shadow 0.2s ease-out,box-shadow 0.2s ease-out;} main #VotingOptionsList .Story article img{width:102%; height:102%; max-width:none !important; max-height:none !important;} main #VotingOptionsList .Story article:hover img{width:106%; height:106%;} #VotingOptionsList .Story article{display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start;} #VotingOptionsList .Story article > div{flex:0 0 50%;} #VotingOptionsList .Story article > div.Thumbnail{padding-top:26.1667%;} #VotingOptionsList .Story .Headline > div{display:block;} .VoteOptionItem{position:relative; margin:0px; width:100%; display:flex; flex-wrap:nowrap; pointer-events:all; z-index:1;} .VoteOptionItem > div{font-size:calc(16px + 0.2vw); font-weight:500; align-self:center; overflow:hidden; flex:0 0 100%; width:100%;} .VoteOption{display:block; position:relative; padding:0.2rem 0.2rem 0.2rem 40px; cursor:pointer; font-size:calc(16px + 0.2vw); font-weight:500; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;} .VoteOption input{position:absolute; opacity:0; cursor:pointer;} .VoteOptionCheckmark{position:absolute; top:50%; left:10px; transform:translateY(-50%); height:22px; width:22px; background-color:#FFFFFF; border:1px solid rgba(0,0,0,0.1); border-radius:50%;} .VoteOption:hover input ~ .VoteOptionCheckmark{background-color:#fbba00;} .VoteOption input:checked ~ .VoteOptionCheckmark{background-color:#fbba00;} .VoteOptionCheckmark:after{content:""; position:absolute; display:none;} .VoteOption input:checked ~ .VoteOptionCheckmark:after{display:block;} .VoteOption .VoteOptionCheckmark:after{top:5px; left:5px; width:10px; height:10px; border-radius:50%; background:white;} .VotingSubHeader{margin:calc(20px + 1vw) 0px;} .VotingSubHeader.NoMargin{margin-bottom:0px;} .VotingChartWrapper{width:100%; height:300px; padding:0px; overflow:hidden; display:block; margin:0 auto; -webkit-box-shadow:0px 30px 20px -20px rgba(0,0,0,0.2); box-shadow:0px 30px 20px -20px rgba(0,0,0,0.2); border:1px solid #FFFFFF; background:rgb(236,241,244); background:-moz-linear-gradient(0deg, rgba(236,241,244,1) 0%, rgba(255,255,255,1) 100%); background:-webkit-linear-gradient(0deg, rgba(236,241,244,1) 0%, rgba(255,255,255,1) 100%); background:linear-gradient(0deg, rgba(236,241,244,1) 0%, rgba(255,255,255,1) 100%);} .VotingChartWrapper:last-of-type{margin-bottom:calc(30px + 1vw);} #VotingOptionsList.S-List > div{flex:0 0 calc(50% - 8px); border:0px; -webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0);} #VotingOptionsList.S-List > div:hover{-webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0);} #VotingOptionsList.S-List .VoteOption{font-size:calc(14px + 0.1vw);} #VotingTrigger{width:100%; display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; padding-bottom:35px;} #VotingTrigger > .Button{text-align:center; flex:0 0 auto; margin-right:10px;} #VotingTrigger > .Button:last-of-type{margin-right:0px;} #VotingTrigger > .Button a{font-size:calc(16px + 0.2vw); text-decoration:none;} .VoteSubject{font-size:calc(14px + 0.1rem); margin:0px; line-height:130%; font-weight:500; max-width:none;} .VoteSubject.wPadding{padding:calc(30px + 1vw) 0px 0px 0px;} .VotingUserWrapper{width:100%; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center;} .VotingUserWrapper > div{flex:0 0 auto; padding:calc(30px + 0.4vw) 0px;} .VotingBtn{margin:0px; display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:space-around;} .VotingBtn > .Button{margin-right:10px; font-size:calc(16px + 0.2vw); flex:1 1 auto; text-align:center;} .VotingBtn > .Button:last-of-type{margin-right:0px;} .VotingBtn > .Button a{font-size:calc(16px + 0.2vw); font-weight:500; border-bottom:none; padding:0.3rem 0.6rem;} .VotingBtn > .Button a span{display:inline-block;} /* Voting Disabled */ .VoteAction.Disabled .Story, .VoteAction.Disabled .VoteSubject{opacity:0.5;} .VoteAction.Disabled .VoteOption{cursor:default;} .VoteAction.Disabled #VotingOptionsList .Story article a{cursor:default;} .VoteAction.Disabled #VotingOptionsList .Story article img{filter:grayscale(100%);} .VoteAction.Disabled #VotingOptionsList .Story article:hover img{width:102%; height:102%;} .VoteAction.Disabled #VotingOptionsList > div:hover{-webkit-box-shadow:0px 5px 5px 0px rgba(0,0,0,0.05); box-shadow:0px 5px 5px 0px rgba(0,0,0,0.05); transition:none;} .VoteAction.Disabled #VotingOptionsList.S-List > div:hover{-webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0);} .VoteAction.Disabled .VoteOption:hover input ~ .VoteOptionCheckmark{background-color:#FFFFFF;} .VoteAction.Disabled .VoteOption input:checked ~ .VoteOptionCheckmark{background-color:#FFFFFF;} @media only screen and (min-width:568px){ #VotingOptionsList > div{flex:0 0 calc(50% - 8px);} #VotingOptionsList.S-List > div{flex:0 0 calc(33.333% - 8px);} } @media only screen and (min-width:812px){ #VotingOptionsList > div{flex:0 0 calc(33.333% - 8px);} #VotingOptionsList.S-List > div{flex:0 0 calc(25% - 8px);} } @media only screen and (min-width:1000px){ .VotingChartWrapper{width:100%; height:500px;} #VotingOptionsList.S-List > div{flex:0 0 calc(20% - 8px);} } /* Google recaptcha*/ .grecaptcha-badge{ display:none !important; } /* Event *******************************************************************************************************************************************************************/ .EventInfo{max-width:calc(100% - 6vw); padding:0px; display:table; border-spacing:0px; border-collapse:collapse; margin-left:3vw; margin-right:3vw;} .EventInfo > ul{display:table-row;} .EventInfo > ul > li{display:table-cell; font-size: calc(0.1rem + 16px);} .EventInfo > ul > li:first-of-type{white-space:nowrap;} /*fix IE11*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { #SubscriptionPopupTemplate .OverlayContainer{width:1600px;} .Member3PartyWrapper > a{width:50px;} } .EventHomeSectionHeader{margin-top:calc(30px + 1vw); margin-bottom:calc(30px + 1vw);} #EventHighlight .GridContent{width:100%; height:50vh; max-height:800px;} #EventHighlight .Thumbnail.Square{display:none;} @media only screen and (min-width:1100px){ #EventHighlight .GridContent{height:75vh;} } @media only screen and (max-width:760px) and (orientation: portrait), only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:414px) and (orientation: portrait), only screen and (min-device-pixel-ratio: 2) and (max-device-width:414px) and (orientation: portrait), only screen and (min-resolution:192dpi) and (max-device-width:414px) and (orientation: portrait), only screen and (min-resolution:2dppx) and (max-device-width:414px) and (orientation: portrait){ #EventHighlight .GridContent{height:100vw;} #EventHighlight .Thumbnail{display:none;} #EventHighlight .Thumbnail.Square{display:block;} } /* Search *******************************************************************************************************************************************************************/ .SearchCount{font-size:calc(10px + 0.2vw) !important; font-weight:normal !important; color:#333333; line-height:normal; margin:0px; letter-spacing:0px;} .ListWrapper, .ListWrapper > div{width:100%; position:relative;} .ListWrapper > div:hover ul > li .Thumbnail img{width:106%; height:106%; transition:all ease-out 0.2s;} .ListWrapper > div a{position:absolute; width:100%; height:100%; pointer-events:all; z-index:0; top:0px; left:0px; bottom:0px; right:0px;} .ListWrapper > div.NoThumbnail ul > li .Thumbnail{margin-bottom:0; padding-top:0;} .ListWrapper ul{flex:0 0 100%; list-style:none; display:flex; flex-wrap:wrap; margin:calc(1.2vw +12px) 0px; padding:calc(10px + 0.8vw); background-color:#F3F3F3;} .ListWrapper ul > li{flex:0 0 100%; position:relative;} .ListWrapper ul > li h6{position:absolute; bottom:0; right:0;} .ListWrapper ul > li .Thumbnail{width:100%; height:0px; position:relative; padding-top:52.333333%; overflow:hidden; margin-bottom:calc(12px + 1.2vw);} .ListWrapper ul > li .Thumbnail img{width:102%; height:102%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); object-fit:cover; transition:all ease-in 0.2s;} .ListWrapper ul > li p{font-size:calc(16px + 0.2vw);} .ListWrapper ul > li p:last-of-type{margin-bottom:0px; padding-bottom:calc(30px + 0.5rem);} @media only screen and (min-width:660px){ .ListWrapper ul{flex-wrap:nowrap;} .ListWrapper ul > li:first-of-type{flex:1 0 auto; max-width:420px; margin-right:calc(12px + 1.2vw);} .ListWrapper ul > li:last-of-type{flex:1 1;} .ListWrapper ul > li .Thumbnail{margin-bottom:0;} .ListWrapper > div.NoThumbnail ul > li:first-of-type{flex:0 0; margin-right:0;} } @media only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:820px) and (orientation: portrait), only screen and (min-device-pixel-ratio: 2) and (max-device-width:820px) and (orientation: portrait), only screen and (min-resolution:192dpi) and (max-device-width:820px) and (orientation: portrait), only screen and (min-resolution:2dppx) and (max-device-width:820px) and (orientation: portrait), only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:1366px) and (orientation: landscape), only screen and (min-device-pixel-ratio: 2) and (max-device-width:1366px) and (orientation: landscape), only screen and (min-resolution:192dpi) and (max-device-width:1366px) and (orientation: landscape), only screen and (min-resolution:2dppx) and (max-device-width:1366px) and (orientation: landscape), only screen and (max-width:1199px){ .ArticleWrapper.Search .ArticleRHS{display:none;} } .fslightbox-slide-number-container{ max-width:80px !important; } .fslightboxci { font-size: 16px !important; } @media only screen and (min-width:660px){ .fslightboxci { font-size: 20px !important; } }