@charset "UTF-8"; .thumbnailHorizon.thumbnailHorizonDiffColor .caption, .thumbnailTheme .caption { border-color: #fff; -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .12); -moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .12); box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .12) } /*------------ import ------------*/ .thumbnailHorizon.thumbnailSM .caption { max-width: 240px; padding-right: 20px } .thumbnailHorizon.thumbnailSM .caption::before { left: -80px } .thumbnailHorizon .caption .desc { height: auto; padding-bottom: 15px } .thumbnailHorizonType2 .caption::before, .thumbnailHorizonType3 .caption::before { right: -70px } .thumbnailHorizonType2 .caption, .thumbnailHorizonType3 .caption { max-width: 265px; height: 336px } .thumbnailHorizonType2 .caption .thumbnailListTheme>li .thumbnailListThemeInner, .thumbnailHorizonType3 .caption .thumbnailListTheme>li .thumbnailListThemeInner { font-size: 18px; width: 80%; word-wrap: break-word; } .thumbnailHorizonType2 .caption .thumbnailListTheme>li .numberStat, .thumbnailHorizonType3 .caption .thumbnailListTheme>li .numberStat { font-size: 28px; height: 40px; width: 40px } /*------------ import ------------*/ .thumbnail { background: 0 0; padding: 0; border: none } .thumbnail img { display: block; margin-left: auto; margin-right: auto } .thumbnailTheme { max-width: 320px; width: 100%; margin: 0 auto 15px; position: relative } .thumbnailTheme .imageInner a:after { content: ''; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .15); z-index: 2; transition-property: top; transition-delay: 0s } /*------------ end import ------------*/ .thumbnailHorizon { max-width: 802px; width: 100%; margin: 0 auto 15px; position: relative } .thumbnailHorizon .imageInner a:after { content: ''; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .15); z-index: 2; transition-property: top; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s } .thumbnailHorizon:hover .imageInner a:after { top: 100% } @media (max-width: 767px) { .thumbnailHorizon { max-width: 320px; width: 100%; margin: 0 auto 30px } } .thumbnailHorizon .thumbnailHorizonInner { position: relative } .thumbnailHorizon .image .imageInner { position: relative; overflow: hidden; width: 100%; z-index: 1 } .thumbnailHorizon .image .imageInner img { position: relative; display: block; width: 100% } .thumbnailHorizon .image .imageInner .curve { position: absolute; left: -250px; top: 35%; width: 250%; height: 150%; z-index: 10; background: #d1d1d1; -webkit-transform: rotate(-65deg); -ms-transform: rotate(-65deg); transform: rotate(-65deg); transition-property: all; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: .15s } @media (max-width: 767px) { .thumbnailHorizon .image .imageInner .curve { right: -100px !important; left: auto !important; top: 100% !important; width: 250% !important; height: 150% !important; z-index: 4 !important; -webkit-transform: rotate(-13deg) !important; -ms-transform: rotate(-13deg) !important; transform: rotate(-13deg) !important; background: #d1d1d1; transition-property: all; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s } } .thumbnailHorizon .caption { position: absolute; top: 0; right: 0; width: 100%; max-width: 280px; height: 78%; margin: 55px 0 0; background: #F26D23; color: #fff; z-index: 2; font-family: 'quarkbold', sans-serif; } @media (max-width: 767px) { .thumbnailHorizon .caption { position: relative !important; top: 0 !important; margin: -30px 15px 0 !important; max-width: none !important; width: auto !important; height: auto !important; border-bottom: 1px solid transparent; transition-property: all; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s } } .thumbnailHorizon .caption:before { position: absolute; left: -85px; top: 0; background: #F26D23; content: ""; height: 100%; width: 80%; z-index: 0; -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); } @media (max-width: 767px) { .thumbnailHorizon .caption:before { right: 0 !important; left: auto !important; top: -32px !important; height: 90% !important; width: 100% !important; border: none !important; -webkit-transform: skewY(-13deg) !important; -ms-transform: skewY(-13deg) !important; transform: skewY(-13deg) !important; background: #F26D23 } } .thumbnailHorizon .caption .titleText { margin: 0; color: #F26D23; font-size: 24px; height: 27px; overflow: hidden; position: relative; z-index: 2 } .thumbnailHorizon .caption .desc { font-size: 22px; line-height: 1; margin-bottom: 0; overflow: hidden; height: 108px; color: #fff } .thumbnailHorizon .caption .date { font-size: 50px } .thumbnailHorizon .captionInner { position: relative; border-top: none; padding: 0 30px 0 0; z-index: 5 } @media (max-width: 767px) { .thumbnailHorizon .caption .date { font-size: 30px } .thumbnailHorizon .captionInner { padding: 0 15px } } .thumbnailHorizon .thumbnailHeader { position: absolute; bottom: 100%; height: 38px; padding-right: 110px; padding-left: 20px; padding-top: 5px; background-color: #fff; left: -50px } @media (max-width: 767px) { .thumbnailHorizon .thumbnailHeader { position: relative !important; left: 0 !important; top: 0 !important; bottom: auto !important } } @media (min-width: 768px) { .thumbnailHorizon .thumbnailHeader:before { content: ''; position: absolute; z-index: 0; display: block; height: 100%; width: 30px; left: -10px; top: 0; background-color: #fff; -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); transition-property: background; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s; } } .thumbnailHorizon .btnThumbnailTheme { position: absolute; right: 0; top: 0; z-index: 3; height: 38px; background-color: #8a0029; color: #fff; font-size: 20px; padding: 5px; font-family: 'quarkbold', sans-serif;; border: none; transition-property: background; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s } .thumbnailHorizon .btnThumbnailTheme:active { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9) } .thumbnailHorizon .btnThumbnailTheme .btnThumbnailThemeInner { display: inline-block; position: relative; z-index: 1 } .thumbnailHorizon .btnThumbnailTheme:before, .thumbnailHorizon .readmore { display: block; transition-property: background; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s } .thumbnailHorizon .btnThumbnailTheme:before { content: ''; position: absolute; z-index: 0; height: 100%; width: 30px; left: -10px; top: 0; background-color: #8a0029; -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg) } @media (min-width: 768px) { .thumbnailHorizon .btnThumbnailTheme:after { content: ''; position: absolute; z-index: 0; display: block; height: 100%; width: 30px; right: -1px; top: 0; background-color: #8a0029; -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); transition-property: background; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s; } .thumbnailHorizon.thumbnailSM { max-width: 550px } } .thumbnailHorizon .btnThumbnailTheme:hover, .thumbnailHorizon .btnThumbnailTheme:hover:after, .thumbnailHorizon .btnThumbnailTheme:hover:before { background-color: #57001a } .thumbnailHorizon .readmore { background-color: #FCB840; position: relative; z-index: 3; color: #50081e; width: 210px; font-size: 25px; margin-top: 30px; padding-top: 10px; padding-bottom: 10px; padding-left: 20px } .thumbnailHorizon .readmore:active { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9) } @media (max-width: 767px) { .thumbnailHorizon .readmore { width: 100%; padding-top: 15px } } .thumbnailHorizon .readmore>span { position: relative; z-index: 1; transition-property: all; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s } .thumbnailHorizon .readmore>span:last-child, .thumbnailHorizon .readmore>span:last-child:after { position: absolute; height: 100%; top: 0; transition-property: all; transition-delay: 0s; transition-duration: .35s; transition-timing-function: ease-out } .thumbnailHorizon .readmore>span:last-child { background-color: #50081e; right: 0; padding-right: 20px; width: 45px; z-index: 0; text-align: center; text-align: right } .thumbnailHorizon .readmore>span:last-child:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: 0 } .thumbnailHorizon .readmore>span:last-child:after { content: ''; z-index: -1; display: block; background: #50081e; -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); left: -20px; width: 40px } .thumbnailHorizon .readmore>span:last-child>* { display: inline-block; vertical-align: middle; position: relative; z-index: 1 } @media (min-width: 1344px) { .thumbnailHorizon .readmore:hover>span { color: #fff } .thumbnailHorizon .readmore:hover>span:last-child { width: 100% } .thumbnailHorizon .readmore:hover>span:last-child:after { left: 0; -webkit-transform: skewX(0); -ms-transform: skewX(0); transform: skewX(0) } } .thumbnailHorizon.thumbnailHorizonDiffColor .caption { background-color: #fff; color: #837d7d; padding-top: 30px } .thumbnailHorizon.thumbnailHorizonDiffColor .caption .desc { color: #837d7d } .thumbnailHorizon.thumbnailHorizonDiffColor .caption:before { background-color: #fff; border-left: 10px solid #FCB840 } @media (max-width: 767px) { .thumbnailHorizon.thumbnailHorizonDiffColor .caption { padding-top: 0; padding-left: 10px; padding-right: 10px } .thumbnailHorizon.thumbnailHorizonDiffColor .caption:before { border-top: 10px solid #FCB840 !important } .thumbnailHorizon.thumbnailSM .caption:before { top: -40px !important } } .thumbnailHorizon.thumbnailSM .caption { margin: 30px 0; max-width: 180px } @media (min-width: 768px) { .thumbnailHorizon.thumbnailSM .image .imageInner .curve { left: -165px } .thumbnailHorizon.thumbnailSM .caption { box-shadow: 1px 0 1px #e0e2e2 } } .thumbnailHorizon.thumbnailSM .caption .captionInner { padding: 0 } .thumbnailHorizon.thumbnailSM .caption:before { left: -65px } @media (max-width: 991px) { .thumbnailHorizon.thumbnailSM .caption:before { left: -70px } } .thumbnailHorizon.thumbnailSM .caption .minisiteTitleText { font-size: 30px } .thumbnailHorizon.thumbnailSM .caption .readmoreTheme { margin: 0 } @media (min-width: 768px) { .thumbnailHorizon.thumbnailSM.thumbnailHorizonDiffSide .image .imageInner .curve { left: auto; right: 50px } .thumbnailHorizon.thumbnailSM.thumbnailHorizonDiffSide .caption { box-shadow: -1px 0 1px #e0e2e2; padding-left: 15px; right: auto; left: 0 } .thumbnailHorizon.thumbnailSM.thumbnailHorizonDiffSide .caption:before { left: auto; right: -55px } } @media (min-width: 768px) and (max-width: 991px) { .thumbnailHorizon.thumbnailSM.thumbnailHorizonDiffSide .caption:before { right: -70px } } @media (min-width: 768px) { .thumbnailHorizon.thumbnailSM.thumbnailHorizonDiffSide.thumbnailHorizonDiffColor .caption:before { border-right: 10px solid #FCB840; border-left: 0 } .thumbnailHorizon.thumbnailSM.thumbnailHorizonDiffSide:hover .image .imageInner .curve { left: auto; right: 100% } } .thumbnailHorizon.onBGwhite .image .imageInner .curve { background-color: #fff } .thumbnailHorizon:hover .image .imageInner .curve { left: 100px !important; -webkit-transform: rotate(-90deg) !important; -ms-transform: rotate(-90deg) !important; transform: rotate(-90deg) !important } @media (max-width: 767px) { .thumbnailHorizon:hover .image .imageInner .curve { -webkit-transform: rotate(0) !important; -ms-transform: rotate(0) !important; transform: rotate(0) !important } } .thumbnailHorizonType2 .thumbnailHeader { left: -100px } .thumbnailHorizonType2 .caption { margin-top: 38px; max-width: 260px; height: 273px } .thumbnailHorizonType2 .caption:before { left: -76px; } .thumbnailHorizonType2 .caption .thumbnailListTheme { list-style: none; padding: 0; text-align: right } .thumbnailHorizonType2 .caption .thumbnailListTheme>li { padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .45); font-size: 1px; } .thumbnailHorizonType2 .caption .thumbnailListTheme>li:last-child { border-bottom: none } .thumbnailHorizonType2 .caption .thumbnailListTheme>li a { padding: 5px 0; color: #fff; display: block; position: relative } .thumbnailHorizonType2 .caption .thumbnailListTheme>li a:after { content: ''; position: absolute; z-index: -1; top: 0; width: 0; height: 100%; background-color: #d5540d; transition-property: width; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s; right: 0; left: auto } @media (min-width: 1344px) { .thumbnailHorizonType2 .caption .thumbnailListTheme>li a:hover:after { width: 100% } } .thumbnailHorizonType2 .caption .thumbnailListTheme>li .thumbnailListThemeInner { display: inline-block; vertical-align: middle } .thumbnailHorizonType2 .caption .thumbnailListTheme>li .numberStat { font-size: 36px; background-color: #fff; margin-left: 10px; color: #F26D23; width: 50px; height: 50px; border-radius: 50%; text-align: center } .thumbnailHorizonType2 .captionInner { padding: 10px 15px 0 0 } .thumbnailHorizonType3 .image .imageInner .curve { transition-property: all; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: .15s; right: 0; left: auto } .thumbnailHorizonType3 .thumbnailHeader { right: -200px; left: auto; padding-right: 10px; padding-left: 110px } .thumbnailHorizonType3 .thumbnailHeader:before { left: auto; right: -10px } .thumbnailHorizonType3 .thumbnailHeader .btnThumbnailTheme { right: auto; left: 0 } .thumbnailHorizonType3 .caption { right: auto; left: 0; margin-top: 38px; max-width: 260px; background-color: #FCB840; height: 273px } .thumbnailHorizonType3 .caption:before { right: -65px; left: auto; background-color: #FCB840 } .thumbnailHorizonType3 .caption .thumbnailListTheme { list-style: none; padding: 0; text-align: left } .thumbnailHorizonType3 .caption .thumbnailListTheme>li { padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .45); font-size: 22px } .thumbnailHorizonType3 .caption .thumbnailListTheme>li:last-child { border-bottom: none } .thumbnailHorizonType3 .caption .thumbnailListTheme>li a { padding: 5px 0; color: #fff; display: block; position: relative } .thumbnailHorizonType3 .caption .thumbnailListTheme>li a:after { content: ''; position: absolute; z-index: -1; left: 0; top: 0; width: 0; height: 100%; background-color: #fba50e; transition-property: width; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s } @media (min-width: 1344px) { .thumbnailHorizonType3 .caption .thumbnailListTheme>li a:hover:after { width: 100% } } .thumbnailHorizonType3 .caption .thumbnailListTheme>li .thumbnailListThemeInner { display: inline-block; vertical-align: middle } .thumbnailHorizonType3 .caption .thumbnailListTheme>li .numberStat { font-size: 36px; background-color: #fff; margin-right: 10px; color: #F26D23; width: 50px; height: 50px; border-radius: 50%; text-align: center } .thumbnailHorizonType3 .captionInner { padding: 10px 0 0 15px } .thumbnailHorizonType3:hover .image .imageInner .curve { left: auto !important; right: 100px !important } .thumbnail { background: 0 0; padding: 0; border: none } .thumbnail img { display: block; margin-left: auto; margin-right: auto } .thumbnailTheme { max-width: 320px; width: 100%; margin: 0 auto 15px; position: relative } .thumbnailTheme .imageInner a:after { content: ''; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .15); z-index: 2; transition-property: top; transition-delay: 0s } .thumbnailTheme:hover .imageInner a:after { top: 100% } .thumbnailTheme .thumbnailThemeInner { position: relative } .thumbnailTheme .image { position: relative; overflow: hidden; z-index: 0 } .thumbnailTheme .image .imageInner { position: relative; overflow: hidden; width: 100%; z-index: 1 } .thumbnailTheme .image .imageInner img { position: relative; z-index: 2; display: block; width: 100% } .thumbnailTheme .image .imageInner .curve { position: absolute; right: -100px; top: 100%; width: 250%; height: 150%; z-index: 10; background: #d1d1d1; -webkit-transform: rotate(-13deg); -ms-transform: rotate(-13deg); transform: rotate(-13deg); transition-property: all; transition-delay: .15s } @media (max-width: 479px) { .thumbnailTheme .image .imageInner .curve { -webkit-transform: rotate(-7deg); -ms-transform: rotate(-7deg); transform: rotate(-7deg) } } .thumbnailTheme .thumbnailHeader { position: absolute; top: 0; width: 100%; z-index: 1; padding-right: 95px } .thumbnailTheme .thumbnailHeader.diffColor .titleTextWrap { background-color: #F26D23 } .thumbnailTheme .thumbnailHeader.diffColor .titleTextWrap:before { content: ''; position: absolute; z-index: -1; display: block; height: 100%; width: 30px; top: 0; background: #F26D23; -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); transition-property: background; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s; left: auto; right: -10px } .thumbnailTheme .thumbnailHeader.diffColor .titleTextWrap>* { color: #fff } .thumbnailTheme .titleTextWrap { opacity: .89; background-color: #fff; position: relative; z-index: 1 } .thumbnailTheme .btnThumbnailTheme, .thumbnailTheme .titleTextWrap:before { position: absolute; display: block; transition-property: background; top: 0; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s } .thumbnailTheme .titleTextWrap:before { content: ''; z-index: -1; height: 100%; width: 30px; background: #fff; -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); left: auto; right: -10px } .thumbnailTheme .titleTextWrap>* { color: #F26D23 } .thumbnailTheme .titleText { margin: 0; color: rgba(0, 0, 0, .8); font-size: 24px; height: 29px; overflow: hidden; padding-top: 2px; padding-left: 10px } .thumbnailTheme .btnThumbnailTheme { right: 0; z-index: 3; background-color: #8a0029; color: #fff; font-size: 18px; padding: 2px 5px 2px 0; border: none; height: 29px } .thumbnailTheme .btnThumbnailTheme:active { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9) } .thumbnailTheme .btnThumbnailTheme .btnThumbnailThemeInner { position: relative; margin-top: 5px; display: inline-block; z-index: 1 } .thumbnailTheme .btnThumbnailTheme:before { content: ''; position: absolute; z-index: -1; display: block; height: 100%; width: 30px; left: -10px; top: 0; background: #8a0029; -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); transition-property: background; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s } .thumbnailTheme .btnThumbnailTheme:hover, .thumbnailTheme .btnThumbnailTheme:hover:before { background-color: #57001a } .thumbnailTheme .caption { position: relative; top: 0; margin: -30px 15px 0; z-index: 2; box-shadow: 0 1px 1px #DDD; transition-property: all; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s } .thumbnailTheme .caption:before { right: 0; top: -36px; background: #fff; content: ""; height: 100%; width: 100%; border: 1px solid #f1f1f1; z-index: 0; position: absolute; -webkit-transform: skewY(-13deg); -ms-transform: skewY(-13deg); transform: skewY(-13deg) } @media (max-width: 479px) { .thumbnailTheme .caption { margin-top: -10px } .thumbnailTheme .caption:before { -webkit-transform: skewY(-7deg); -ms-transform: skewY(-7deg); transform: skewY(-7deg); top: -23px } } .thumbnailTheme .caption .captionInner { position: relative; background: #fff; border-top: none; padding: 0 30px 12px 40px; z-index: 5 } .thumbnailTheme .caption .captionInner:after { content: ''; display: block; height: 10px; width: 15px; -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); background-color: #F26D23; position: absolute; left: 15px; top: 5px } .thumbnailTheme .thumbnailFooter .readmore, .thumbnailTheme.hasShareBar .thumbnailFooter .btnShare { width: 25px; transition-property: background; transition-delay: 0s; transition-duration: .35s; transition-timing-function: ease-out } .thumbnailTheme .caption .desc { font-family: Tahoma; font-size: 13px; color: rgba(0, 0, 0, .5); margin-bottom: 0; height: 55px; overflow: hidden; position: relative } .thumbnailTheme .caption .datePost { color: #bbb6b6; font-size: 12px; display: block } .thumbnailTheme .thumbnailFooter { margin: 0; position: relative; background: #fff; border-top: none; padding: 0; z-index: 6 } .thumbnailTheme .thumbnailFooter .list-inline { margin: 0 } .thumbnailTheme .thumbnailFooter .list-inline li:first-child { margin-left: 0; padding-left: 0 } .thumbnailTheme .thumbnailFooter .list-inline li>span { font-size: 12px; color: rgba(0, 0, 0, .5) } .thumbnailTheme .thumbnailFooter .list-inline li>span:first-child { margin-right: 8px } .thumbnailTheme .thumbnailFooter .readmore { background-color: #F26D23; position: relative; right: 0; top: 0; margin-left: auto; height: 25px; display: block; text-align: center } .thumbnailTheme .thumbnailFooter .readmore:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: 0 } .thumbnailTheme .thumbnailFooter .readmore:active { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9) } .thumbnailTheme .thumbnailFooter .readmore:hover { background-color: #d5540d } .thumbnailTheme .thumbnailFooter .readmore>* { display: inline-block; vertical-align: middle } .thumbnailTheme.hasSlideDetail .thumbnailHeader { position: absolute; z-index: 3; margin-left: 15px; margin-right: 15px; top: auto; bottom: 65px; left: 40px } .thumbnailTheme.hasSlideDetail .caption .captionInner { padding-top: 27px } .thumbnailTheme.hasShareBar .thumbnailFooter { position: relative } .thumbnailTheme.hasShareBar .thumbnailFooter .btnShare { display: block; height: 25px; right: 40px; bottom: 0; position: absolute } .thumbnailTheme.hasShareBar .thumbnailFooter .btnShare:hover { background-color: #cdcdcd } .thumbnailTheme.minisiteThumbnailTheme .caption .captionInner { text-align: center } .thumbnailTheme.minisiteThumbnailTheme .caption .captionInner:after { display: none } .thumbnailTheme.thumbnailThemeDiffCaptionColor .caption, .thumbnailTheme.thumbnailThemeDiffCaptionColor .caption .captionInner, .thumbnailTheme.thumbnailThemeDiffCaptionColor .caption:before, .thumbnailTheme.thumbnailThemeDiffCaptionColor .thumbnailFooter { background-color: #F26D23 } .thumbnailTheme.thumbnailThemeDiffCaptionColor .thumbnailFooter .readmore { background-color: #dadada } .thumbnailTheme.onBGwhite .image .imageInner .curve { background-color: #fff } .thumbnailTheme:hover .image .imageInner .curve { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0) } .thumbnailHorizon { max-width: 800px; width: 100%; margin: 0 auto 15px; position: relative; } .thumbnailHorizon .imageInner a:after { content: ''; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 370px; background-color: rgba(0, 0, 0, .15); z-index: 2; transition-property: top; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s; } .thumbnailHorizon:hover .imageInner a:after { top: 100% } @media (max-width: 767px) { .thumbnailHorizon { max-width: 320px; width: 100%; margin: 0 auto 30px } } .thumbnailHorizon .thumbnailHorizonInner { position: relative } .thumbnailHorizon .image .imageInner { position: relative; overflow: hidden; width: 100%; z-index: 1 } .thumbnailHorizon .image .imageInner img { position: relative; display: block; width: 100%; } .thumbnailHorizon .image .imageInner .curve { position: absolute; /* left: -288px; */ top: 35%; /* width: 250%; */ /* height: 330px; */0% */ z-index: 10; background: #f5eee2; -webkit-transform: rotate(-65deg); -ms-transform: rotate(-65deg); transform: rotate(-65deg); transition-property: all; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: .15s; } @media (max-width: 767px) { .thumbnailHorizon .image .imageInner .curve { right: -100px !important; left: auto !important; top: 100% !important; width: 250% !important; height: 150% !important; z-index: 4 !important; -webkit-transform: rotate(-13deg) !important; -ms-transform: rotate(-13deg) !important; transform: rotate(-13deg) !important; background: #d1d1d1; transition-property: all; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s } } .thumbnailHorizon .caption { position: absolute; top: 0; right: 0; width: 100%; max-width: 280px; height: 78%; margin: 55px 0 0; background: #a94442; color: #fff; z-index: 2; font-family: 'quarkbold', sans-serif;; } @media (max-width: 767px) { .thumbnailHorizon .caption { position: relative !important; top: 0 !important; margin: -30px 15px 0 !important; max-width: none !important; width: auto !important; height: auto !important; border-bottom: 1px solid transparent; transition-property: all; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s } } .thumbnailHorizon .caption:before { position: absolute; left: -85px; top: 0; background: #a94442; content: ""; height: 100%; width: 80%; z-index: 0; -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(0deg); } @media (max-width: 767px) { .thumbnailHorizon .caption:before { right: 0 !important; left: auto !important; top: 0px !important; height: 100% !important; width: 100% !important; border: none !important; -webkit-transform: skewY(-13deg) !important; -ms-transform: skewY(-13deg) !important; transform: skewY(0deg) !important; background: #a94442; } } .thumbnailHorizon .caption .titleText { margin: 0; color: #F26D23; font-size: 20px; height: 27px; overflow: hidden; position: relative; z-index: 2; padding: 0px 5px; } .thumbnailHorizon .caption .desc { font-size: 22px; line-height: 1; margin-bottom: 0; overflow: hidden; height: 108px; color: #fff } .thumbnailHorizon .caption .date { font-size: 50px } .thumbnailHorizon .captionInner { position: relative; border-top: none; padding: 0 30px 0 0; z-index: 5; } @media (max-width: 767px) { .thumbnailHorizon .caption .date { font-size: 30px } .thumbnailHorizon .captionInner { padding: 0 15px } } .thumbnailHorizon .thumbnailHeader { position: absolute; bottom: 100%; height: 38px; padding-right: 110px; padding-left: 20px; padding-top: 5px; background-color: #fff; left: -50px; width: 100%; } @media (max-width: 767px) { .thumbnailHorizon .thumbnailHeader { position: relative !important; left: 0 !important; top: 0 !important; bottom: auto !important } } @media (min-width: 768px) { .thumbnailHorizon .thumbnailHeader:before { content: ''; position: absolute; z-index: 0; display: block; height: 100%; width: 30px; left: -13px; top: 0; background-color: #fff; -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); transition-property: background; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s; } } .thumbnailHorizon .btnThumbnailTheme { position: absolute; right: 0; top: 0; z-index: 3; height: 38px; background-color: #8a0029; color: #fff; font-size: 20px; padding: 5px; font-family: 'quarkbold', sans-serif;; border: none; transition-property: background; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s; } .thumbnailHorizon .btnThumbnailTheme:active { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9) } .thumbnailHorizon .btnThumbnailTheme .btnThumbnailThemeInner { display: inline-block; position: relative; z-index: 1 } .thumbnailHorizon .btnThumbnailTheme:before, .thumbnailHorizon .readmore { display: block; transition-property: background; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s } .thumbnailHorizon .btnThumbnailTheme:before { content: ''; position: absolute; z-index: 0; height: 100%; width: 30px; left: 0px; top: 0; background-color: #8a0029; -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(0deg); } @media (min-width: 768px) { .thumbnailHorizon .btnThumbnailTheme:after { content: ''; position: absolute; z-index: 0; display: block; height: 100%; width: 50px; /* right: -47px; */ top: 0; background-color: #8a0029; -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(0deg); transition-property: background; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s; } .thumbnailHorizon.thumbnailSM { max-width: 550px } } .thumbnailHorizon .btnThumbnailTheme:hover, .thumbnailHorizon .btnThumbnailTheme:hover:after, .thumbnailHorizon .btnThumbnailTheme:hover:before { background-color: #57001a } .thumbnailHorizon .readmore { background-color: #FCB840; position: relative; z-index: 3; color: #50081e; width: 210px; font-size: 25px; margin-top: 30px; padding-top: 10px; padding-bottom: 10px; padding-left: 20px } .thumbnailHorizon .readmore:active { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9) } @media (max-width: 767px) { .thumbnailHorizon .readmore { width: 100%; padding-top: 15px } } .thumbnailHorizon .readmore>span { position: relative; z-index: 1; transition-property: all; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s } .thumbnailHorizon .readmore>span:last-child, .thumbnailHorizon .readmore>span:last-child:after { position: absolute; height: 100%; top: 0; transition-property: all; transition-delay: 0s; transition-duration: .35s; transition-timing-function: ease-out } .thumbnailHorizon .readmore>span:last-child { background-color: #50081e; right: 0; padding-right: 20px; width: 45px; z-index: 0; text-align: center; text-align: right } .thumbnailHorizon .readmore>span:last-child:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: 0 } .thumbnailHorizon .readmore>span:last-child:after { content: ''; z-index: -1; display: block; background: #50081e; -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); left: -20px; width: 40px } .thumbnailHorizon .readmore>span:last-child>* { display: inline-block; vertical-align: middle; position: relative; z-index: 1 } @media (min-width: 1344px) { .thumbnailHorizon .readmore:hover>span { color: #fff } .thumbnailHorizon .readmore:hover>span:last-child { width: 100% } .thumbnailHorizon .readmore:hover>span:last-child:after { left: 0; -webkit-transform: skewX(0); -ms-transform: skewX(0); transform: skewX(0) } } .thumbnailHorizon.thumbnailHorizonDiffColor .caption { background-color: #fff; color: #837d7d; padding-top: 30px } .thumbnailHorizon.thumbnailHorizonDiffColor .caption .desc { color: #837d7d } .thumbnailHorizon.thumbnailHorizonDiffColor .caption:before { background-color: #fff; border-left: 10px solid #FCB840 } @media (max-width: 767px) { .thumbnailHorizon.thumbnailHorizonDiffColor .caption { padding-top: 0; padding-left: 10px; padding-right: 10px } .thumbnailHorizon.thumbnailHorizonDiffColor .caption:before { border-top: 10px solid #FCB840 !important } .thumbnailHorizon.thumbnailSM .caption:before { top: -40px !important } } .thumbnailHorizon.thumbnailSM .caption { margin: 30px 0; max-width: 180px } @media (min-width: 768px) { .thumbnailHorizon.thumbnailSM .image .imageInner .curve { left: -165px } .thumbnailHorizon.thumbnailSM .caption { box-shadow: 1px 0 1px #e0e2e2 } } .thumbnailHorizon.thumbnailSM .caption .captionInner { padding: 0 } .thumbnailHorizon.thumbnailSM .caption:before { left: -65px } @media (max-width: 991px) { .thumbnailHorizon.thumbnailSM .caption:before { left: -70px } } .thumbnailHorizon.thumbnailSM .caption .minisiteTitleText { font-size: 30px } .thumbnailHorizon.thumbnailSM .caption .readmoreTheme { margin: 0 } @media (min-width: 768px) { .thumbnailHorizon.thumbnailSM.thumbnailHorizonDiffSide .image .imageInner .curve { left: auto; right: 50px } .thumbnailHorizon.thumbnailSM.thumbnailHorizonDiffSide .caption { box-shadow: -1px 0 1px #e0e2e2; padding-left: 15px; right: auto; left: 0 } .thumbnailHorizon.thumbnailSM.thumbnailHorizonDiffSide .caption:before { left: auto; right: -55px } } @media (min-width: 768px) and (max-width: 991px) { .thumbnailHorizon.thumbnailSM.thumbnailHorizonDiffSide .caption:before { right: -70px } } @media (min-width: 768px) { .thumbnailHorizon.thumbnailSM.thumbnailHorizonDiffSide.thumbnailHorizonDiffColor .caption:before { border-right: 10px solid #FCB840; border-left: 0 } .thumbnailHorizon.thumbnailSM.thumbnailHorizonDiffSide:hover .image .imageInner .curve { left: auto; right: 100% } } .thumbnailHorizon.onBGwhite .image .imageInner .curve { background-color: #fff } .thumbnailHorizon:hover .image .imageInner .curve { left: 100px !important; -webkit-transform: rotate(-90deg) !important; -ms-transform: rotate(-90deg) !important; transform: rotate(-90deg) !important } @media (max-width: 767px) { .thumbnailHorizon:hover .image .imageInner .curve { -webkit-transform: rotate(0) !important; -ms-transform: rotate(0) !important; transform: rotate(0) !important } } .thumbnailHorizonType2 .thumbnailHeader { left: -1px; } .thumbnailHorizonType2 .caption { margin-top: 38px; max-width: 350px; height: 335px; } .thumbnailHorizonType2 .caption:before { left: -100px; } .thumbnailHorizonType2 .caption .thumbnailListTheme { list-style: none; padding: 0; text-align: right; } .thumbnailHorizonType2 .caption .thumbnailListTheme>li { padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .45); /* font-size: 11px; */ } .thumbnailHorizonType2 .caption .thumbnailListTheme>li:last-child { border-bottom: none } .thumbnailHorizonType2 .caption .thumbnailListTheme>li a { padding: 5px 0; color: #fff; display: block; position: relative; } .thumbnailHorizonType2 .caption .thumbnailListTheme>li a:after { content: ''; position: absolute; z-index: -1; top: 0; width: 0; height: 100%; background-color: #d5540d; transition-property: width; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s; right: 0; left: auto } @media (min-width: 1344px) { .thumbnailHorizonType2 .caption .thumbnailListTheme>li a:hover:after { width: 100% } } .thumbnailHorizonType2 .caption .thumbnailListTheme>li .thumbnailListThemeInner { display: inline-block; vertical-align: middle; } .thumbnailHorizonType2 .caption .thumbnailListTheme>li .numberStat { font-size: 18px; background-color: #fff; margin-left: 10px; color: #8a0029; width: 40px; height: 40px; border-radius: 50%; text-align: center; } .thumbnailHorizonType2 .captionInner { padding: 3px 15px 0 0; } .thumbnailHorizonType3 .image .imageInner .curve { transition-property: all; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: .15s; right: 0; left: auto } .thumbnailHorizonType3 .thumbnailHeader { right: 0px; left: auto; padding-right: 10px; padding-left: 110px; } .thumbnailHorizonType3 .thumbnailHeader:before { left: auto; right: -10px; } .thumbnailHorizonType3 .thumbnailHeader .btnThumbnailTheme { right: auto; left: 0 } .thumbnailHorizonType3 .caption { right: auto; left: 0; margin-top: 38px; max-width: 350px; background-color: #a94442; height: 335px; } .thumbnailHorizonType3 .caption:before { right: -65px; left: auto; background-color: #a94442; } .thumbnailHorizonType3 .caption .thumbnailListTheme { list-style: none; padding: 0; text-align: left } .thumbnailHorizonType3 .caption .thumbnailListTheme>li { padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .45); font-size: 22px } .thumbnailHorizonType3 .caption .thumbnailListTheme>li:last-child { border-bottom: none } .thumbnailHorizonType3 .caption .thumbnailListTheme>li a { padding: 5px 0; color: #fff; display: block; position: relative } .thumbnailHorizonType3 .caption .thumbnailListTheme>li a:after { content: ''; position: absolute; z-index: -1; left: 0; top: 0; width: 0; height: 100%; background-color: #D45515; transition-property: width; transition-duration: .35s; transition-timing-function: ease-out; transition-delay: 0s } @media (min-width: 1344px) { .thumbnailHorizonType3 .caption .thumbnailListTheme>li a:hover:after { width: 100% } } .thumbnailHorizonType3 .caption .thumbnailListTheme>li .thumbnailListThemeInner { display: inline-block; vertical-align: middle } .thumbnailHorizonType3 .caption .thumbnailListTheme>li .numberStat { font-size: 18px; background-color: #fff; margin-right: 10px; color: #8a0029; width: 40px; height: 40px; border-radius: 50%; text-align: center; } .thumbnailHorizonType3 .captionInner { padding: 5px 0 0 15px; } .thumbnailHorizonType3:hover .image .imageInner .curve { left: auto !important; right: 100px !important } .thumbnailThemeHighlight { position: relative; overflow: hidden; margin-bottom: 30px } @media (min-width: 768px) { .thumbnailThemeHighlight .caption { position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; width: 55% } } @media (min-width: 992px) { .thumbnailThemeHighlight .caption { width: 40% } } @media (min-width: 768px) { .thumbnailThemeHighlight .caption:before { content: ''; background: rgba(255, 255, 255, .9); display: block; width: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); margin-right: -15px; margin-left: -100px; margin-top: -100px } } .thumbnailThemeHighlight .caption .captionInner { position: relative; z-index: 2; padding: 30px } @media (max-width: 991px) { .thumbnailThemeHighlight .caption .captionInner { padding: 15px } } .thumbnailThemeHighlight .caption .captionInner .thumbnailHeader { margin-bottom: 15px; font-family: 'quarkbold', sans-serif; } .thumbnailThemeHighlight .caption .captionInner .thumbnailHeader .titleText { margin: 0; color: #000 } .thumbnailThemeHighlight .caption .captionInner .thumbnailHeader .titleText small { color: #000; display: block } /**/