Template:News.css

.table { width: 80%; border: 2px solid gray; text-align: center; margin: 0 auto; }

.table th, .table td { border: 1px solid #333333; vertical-align: middle; height: 2.0em; }

.table td { font-size: 0.8em; }

.table__cell--title { font-weight: bold; color: #0cb9f2; }

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }

audio, canvas, video { display: inline-block; }

audio:not([controls]) { display: none; height: 0; }

[hidden], template { display: none; }

html { background: #fff; color: #000; }

html, button, input, select, textarea { font-family: arial, sans-serif !important; }

body { margin: 0; }

a { background: transparent; }

a:focus { outline: thin dotted; }

a:hover, a:active { outline: 0; }

h1 { font-size: 2em; margin: 0.67em 0; }

h2 { font-size: 1.5em; margin: 0.83em 0; }

h3 { font-size: 1.17em; margin: 1em 0; }

h4 { font-size: 1em; margin: 1.33em 0; }

h5 { font-size: 0.83em; margin: 1.67em 0; }

h6 { font-size: 0.75em; margin: 2.33em 0; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

dfn { font-style: italic; }

mark { background: #ff0; color: #000; }

code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: "\201C" "\201D" "\2018" "\2019"; }

q:before, q:after { content: ''; content: none; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

img { border: 0; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

legend { border: 0; padding: 0; white-space: normal; }

button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; vertical-align: baseline; }

button, input { line-height: normal; }

button, select { text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }

button[disabled], input[disabled] { cursor: default; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

textarea { overflow: auto; vertical-align: top; }

table { border-collapse: collapse; border-spacing: 0; }

input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }

-webkit-touch-callout: none; -webkit-user-select: none; }

html { background: #222222; width: 480px; overflow-x: hidden; font: inherit; font-size: 62.5%; -webkit-text-size-adjust: 100%; }

body { color: #ffffff; position: relative; width: 480px; overflow-x: hidden; }

a { color: #ffffff; }

ul { margin: 0; padding: 0; list-style: none; }

.text-fuchsia { color: #ff99ff; }

.text-cyan { color: #88ffff; }

.text-silver { color: #999999; }

.text-lemon { color: #ffff55; }

.text-lime { color: #d6ff58; }

.text-white { color: #fff; }

.text-rainbow--ios { font-weight: bold; display: inline-block; background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #f42d33), color-stop(14%, #f45bc6), color-stop(28%, #fd9c47), color-stop(42%, #fffd31), color-stop(56%, #58ef8d), color-stop(70%, #88f3ff), color-stop(84%, #1e81fd), color-stop(100%, #b949f7)); -webkit-background-clip: text; color: transparent; -webkit-animation: rainbow 10s linear infinite alternate; }

.text-red { color: #ff3333; }

.text-orange { color: #ff8800; }

.text-yellow { color: #ffe200; }

.text-green { color: #37ff0e; }

.text-blue { color: #0cb9f2; }

.text-pink { color: #ffabce; }

.text-gray { color: #999999; }

.text-left { text-align: left; }

.text-center { text-align: center; }

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

.text-fuchsia--light { color: #fff; text-shadow: -1px -1px 2px #ff99ff, 1px 1px 2px #ff99ff, 0 0 5px #ffccff, 0 0 10px #ffccff; }

.text-cyan--light { color: #fff; text-shadow: -1px -1px 2px #44FFFF, 1px 1px 2px #44FFFF, 0 0 5px #77ffff, 0 0 10px #77ffff; }

.text-silver--light { color: #fff; text-shadow: -1px -1px 2px #999999, 1px 1px 2px #999999, 0 0 5px #b3b3b3, 0 0 10px #b3b3b3; }

.text-lime--light { color: #fff; text-shadow: -1px -1px 2px #99CC33, 1px 1px 2px #99CC33, 0 0 5px #add65c, 0 0 10px #add65c; }

.text-lemon--light { color: #fff; text-shadow: -1px -1px 2px #ffff00, 1px 1px 2px #ffff00, 0 0 5px #ffff33, 0 0 10px #ffff33; }

.text-red--light { color: #fff; text-shadow: -1px -1px 2px #ff3333, 1px 1px 2px #ff3333, 0 0 5px #ff6666, 0 0 10px #ff6666; }

.text-orange--light { color: #fff; text-shadow: -1px -1px 2px #ff8800, 1px 1px 2px #ff8800, 0 0 5px #ffa033, 0 0 10px #ffa033; }

.text-yellow--light { color: #fff; text-shadow: -1px -1px 2px #FFD700, 1px 1px 2px #FFD700, 0 0 5px #ffdf33, 0 0 10px #ffdf33; }

.text-green--light { color: #fff; text-shadow: -1px -1px 2px #37ff0e, 1px 1px 2px #37ff0e, 0 0 5px #61ff41, 0 0 10px #61ff41; }

.text-blue--light { color: #fff; text-shadow: -1px -1px 2px #0cb9f2, 1px 1px 2px #0cb9f2, 0 0 5px #3cc7f5, 0 0 10px #3cc7f5; }

.text-pink--light { color: #fff; text-shadow: -1px -1px 2px #ff99cc, 1px 1px 2px #ff99cc, 0 0 5px #ffcce6, 0 0 10px #ffcce6; }

.text-violet--light { color: #fff; text-shadow: -1px -1px 2px #8A2BE2, 1px 1px 2px #8A2BE2, 0 0 5px #a358e8, 0 0 10px #a358e8; }

.text-title { color: #fff; font-weight: 600; margin: 5px 0 2px; display: block; text-shadow: 0 0 5px #3cc7f5, 0 0 10px #3cc7f5; }

.text-silver--light { color: #fff; display: block; text-shadow: -1px -1px 2px #999999, 1px 1px 2px #999999, 0 0 5px #3cc7f5, 0 0 10px #3cc7f5; }

@keyframes fadeIn { 0%, 100% {    opacity: 0; } 50% {    opacity: 1; } }

.anim-blink { animation-name: fadeIn; animation-duration: 1s; animation-iteration-count: infinite; }

@keyframes fadeInHalf { 0%, 100% {    opacity: 0.3; } 50% {    opacity: 1; } }

.anim-blink--half { animation-name: fadeInHalf; animation-duration: 1s; animation-iteration-count: infinite; }

@keyframes pulse { from { transform: scale3d(1, 1, 1); } 50% {    transform: scale3d(1.1, 1.1, 1.1); } to { transform: scale3d(1, 1, 1); } }

.anim-pulse { animation-name: pulse; animation-duration: 1s; animation-iteration-count: infinite; }

.image-box { display: block; text-align: center; width: 100%; margin: 14px auto; }

.image-box img { width: 300px; height: auto; }

.base-button, .button, .button-image, .button--large { margin: 0 auto; padding: 0; background: none; border: none; border-radius: 0; outline: none; appearance: none; display: block; font-weight: bold; }

.base-button>a, .button>a, .button-image>a, .button--large>a { display: block; }

.button-image { overflow: hidden; text-indent: 101%; white-space: nowrap; }

.button--large { background-image: url(../images/common/button_large.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; width: 266px; height: 42px; }

.button--large>a { padding-top: 10px; padding-bottom: 10px; }

.line--silver { margin-top: 3px; margin-bottom: 10px; width: 88%; height: 1px; position: relative; background: -webkit-linear-gradient(left, rgba(179, 220, 237, 0) 0%, #29b8e5 17%, #29b8e5 30%, rgba(188, 224, 238, 0) 100%); /* Chrome10-25,Safari5.1-6 */ }

.line--silver:after { position: absolute; top: 1px; left: 0; height: 1px; width: 100%; background: -webkit-linear-gradient(left, rgba(210, 229, 237, 0) 0%, #b3dced 17%, #29b8e5 30%, rgba(188, 224, 238, 0) 100%); /* Chrome10-25,Safari5.1-6 */ content: ''; }

.box-text { background-color: #2a2a2a; border: 1px solid #575756; border-radius: 10px; padding: 8px; }

.list li { padding: 0 0 0 19px; background: url(../images/common/point.png?a=1) left -3px no-repeat; background-size: 24px 26px; margin-bottom: 8px; }

.owl-carousel .animated { -webkit-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

.owl-carousel .owl-animated-in { z-index: 0; }

.owl-carousel .owl-animated-out { z-index: 1; }

.owl-carousel .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; }

@-webkit-keyframes fadeOut { 0% {   opacity: 1; } 100% {    opacity: 0; } }

@keyframes fadeOut { 0% {   opacity: 1; } 100% {    opacity: 0; } }

.owl-height { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; }

.owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; }

.owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; }

.owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

.owl-carousel .owl-stage-outer { position: relative; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); }

.owl-carousel .owl-controls .owl-nav .owl-prev, .owl-carousel .owl-controls .owl-nav .owl-next, .owl-carousel .owl-controls .owl-dot { cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.owl-carousel.owl-loaded { display: block; }

.owl-carousel.owl-loading { opacity: 0; display: block; }

.owl-carousel.owl-hidden { opacity: 0; }

.owl-carousel .owl-refresh .owl-item { display: none; }

.owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.owl-carousel .owl-item img { display: block; width: 100%; -webkit-transform-style: preserve-3d; }

.owl-carousel.owl-text-select-on .owl-item { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; }

.owl-carousel .owl-grab { cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; }

.owl-carousel.owl-rtl { direction: rtl; }

.owl-carousel.owl-rtl .owl-item { float: right; }

.no-js .owl-carousel { display: block; }

.owl-carousel .owl-item .owl-lazy { opacity: 0; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -ms-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; }

.owl-carousel .owl-item img { transform-style: preserve-3d; }

.owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; }

.owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; -webkit-transition: scale 100ms ease; -moz-transition: scale 100ms ease; -ms-transition: scale 100ms ease; -o-transition: scale 100ms ease; transition: scale 100ms ease; }

.owl-carousel .owl-video-play-icon:hover { -webkit-transition: scale(1.3, 1.3); -moz-transition: scale(1.3, 1.3); -ms-transition: scale(1.3, 1.3); -o-transition: scale(1.3, 1.3); transition: scale(1.3, 1.3); }

.owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; }

.owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -ms-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; }

.owl-carousel .owl-video-frame { position: relative; z-index: 1; }

a { text-decoration: none; }

.whatsnew { opacity: 0; }

@keyframes shake { 0%, 100% {    transform: translate3d(0, 0, 0); } 10%,  30%,  50%,  70%,  90% {    transform: translate3d(-2px, 0, 0); } 20%,  40%,  60%,  80% {    transform: translate3d(2px, 0, 0); } }

@keyframes shake-symmetry { 0%, 100% {    transform: translate3d(0, 0, 0); } 20%,  40%,  60%,  80% {    transform: translate3d(-2px, 0, 0); } 10%,  30%,  50%,  70%,  90% {    transform: translate3d(2px, 0, 0); } }

.shake { animation-duration: 2s; animation-iteration-count: infinite; animation-name: shake; }

.shake--symmetry { animation-duration: 2s; animation-direction: alternate; animation-iteration-count: infinite; animation-name: shake-symmetry; }

.owl-carousel { position: relative; width: 100%; margin-top: 10px; }

.owl-carousel .item { margin-left: 1px !important; margin-right: 1px !important; }

.owl-carousel .item-one { background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; margin: 0 auto; }

.owl-carousel:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100%; background: #302a28; background: -moz-linear-gradient(left, #302a28 0%, rgba(48, 42, 40, 0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #302a28), color-stop(100%, rgba(48, 42, 40, 0))); background: -webkit-linear-gradient(left, #302a28 0%, rgba(48, 42, 40, 0) 100%); background: -o-linear-gradient(left, #302a28 0%, rgba(48, 42, 40, 0) 100%); background: -ms-linear-gradient(left, #302a28 0%, rgba(48, 42, 40, 0) 100%); background: linear-gradient(to right, #302a28 0%, rgba(48, 42, 40, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color', GradientType=1); z-index: 20; }

.owl-carousel:after { content: ""; position: absolute; top: 0; right: 0; width: 100px; height: 100%; background: rgba(48, 42, 40, 0); background: -moz-linear-gradient(left, rgba(48, 42, 40, 0) 0%, #302a28 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(48, 42, 40, 0)), color-stop(100%, #302a28)); background: -webkit-linear-gradient(left, rgba(48, 42, 40, 0) 0%, #302a28 100%); background: -o-linear-gradient(left, rgba(48, 42, 40, 0) 0%, #302a28 100%); background: -ms-linear-gradient(left, rgba(48, 42, 40, 0) 0%, #302a28 100%); background: linear-gradient(to right, rgba(48, 42, 40, 0) 0%, #302a28 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color', GradientType=1); z-index: 10; }

.owl-stage-outer { width: 480px; height: 110px; margin: 0 auto; }

.owl-nav { position: absolute; top: 32px; width: 100%; z-index: 20; }

.owl-nav .owl-prev { background-color: none; background-image: url(../images/whatsnew/arrow_prev.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; width: 26px; height: 57px; position: absolute; left: 9px; top: -5px; }

.owl-nav .owl-next { margin: 0; padding: 0; background-image: url(../images/whatsnew/arrow_next.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; width: 26px; height: 57px; position: absolute; top: -5px; right: 9px; }

.owl-dots { text-align: center; -webkit-tap-highlight-color: transparent; }

.owl-dots .owl-dot { display: inline-block; zoom: 1; *display: inline; }

.owl-dots .owl-dot span { background-image: url(../images/whatsnew/dot_disable.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; width: 6px; height: 6px; display: block; margin: 0 4px; }

.owl-dots .owl-dot.active span, .owl-dots .owl-dot:hover span { background-image: url(../images/whatsnew/dot_enable.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; width: 6px; height: 6px; }

.owl-carousel .item { background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; }

.icon--news { background-image: url(../images/whatsnew/icon_news.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; width: 82px; height: 29px; overflow: hidden; text-indent: 101%; white-space: nowrap; }

.icon--apology { background-image: url(../images/whatsnew/icon_apology.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; width: 82px; height: 29px; overflow: hidden; text-indent: 101%; white-space: nowrap; }

.icon--up { background-image: url(../images/whatsnew/icon_up.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; width: 82px; height: 29px; overflow: hidden; text-indent: 101%; white-space: nowrap; }

.minibanner { width: 320px; margin: 5px auto; padding: 0; text-align: center; }

.minibanner__item { display: inline-block; }

.minibanner__link { display: block; }

.minibanner__thumb { width: 100px; height: auto; }

.notice { width: 443px; display: block; margin: 10px auto 6px; }

.notice__item+.notice__item { margin-top: -3px; }

.notice-table { position: relative; display: table; background-image: url(../images/whatsnew/frame.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; width: 443px; height: 71px; }

.notice-table__new { position: absolute; top: -2px; left: 2px; background-image: url(../images/whatsnew/icon_new.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; width: 44px; height: 17px; overflow: hidden; text-indent: 101%; white-space: nowrap; }

.notice-table__icon { display: table-cell; vertical-align: middle; padding-left: 10px; padding-top: 4px; padding-bottom: 10px; width: 90px; }

.notice-table__body { display: table-cell; vertical-align: middle; padding-top: 4px; padding-bottom: 10px; width: 343px; }

.notice-table__time { position: absolute; top: 10px; right: 10px; }

.notice-table__text { line-height: 150%; font-size: 1.4rem; margin: 2px 0 0 0; width: 245px; }

.button--archive { background-image: url(../images/whatsnew/btn_archive.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; width: 159px; height: 32px; }

.button--back { background-image: url(../images/whatsnew/btn_back_en.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; width: 89px; height: 32px; }

.button--move-top { margin: 20px 0; background: none; width: 480px; height: 30px; line-height: 30px; text-align: center; color: #01c0ff; text-decoration: underline; }

.other { margin: 0 auto; width: 442px; height: auto; background-size: 1px 1.5px; background-image: url("../images/whatsnew/bg_list.jpg"); background-repeat: repeat; border: 1px solid #000; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 3px 1px inset; }

.other__title { margin: 0 0 5px 10px; text-align: center; }

.other__items { padding-top: 7px; }

.other__item { height: 53px; }

.other__item+.other__item { position: relative; }

.other__item+.other__item:before { content: ""; left: 12px; position: absolute; width: 419px; background-color: #006bf0; background-image: -webkit-linear-gradient(-320deg, #006bf0 0%, #00c8fe 100%); background-image: linear-gradient(50deg, #006bf0 0%, #00c8fe 100%); height: 1px; }

.other-table { display: table; width: 100%; height: 100%; }

.other-table__thumb { display: table-cell; vertical-align: middle; width: 129px; }

.other-table__thumb img { margin-left: 5px; width: 129px; height: auto; }

.other-table__content { display: table-cell; vertical-align: middle; padding-right: 5px; padding-left: 30px; }

.other-table__content>p { font-size: 1.3rem; line-height: 130%; text-shadow: 1px 1px 1px #000, 1px 1px 1px #000, 1px 1px 1px #000; }

.whatsnew-detail { opacity: 0; }

.detail { width: 100%; height: auto; }

.detail__title { display: table; height: 50px; width: 100%; position: relative; }

.detail-title__icon { display: table-cell; width: 10px; vertical-align: middle; padding-left: 8px; padding-top: 7px; }

.detail-title__title { display: table-cell; width: 245px; padding-left: 15px; padding-top: 5px; vertical-align: middle; font-size: 1.4rem; line-height: 150%; font-weight: normal; }

.detail-title__date { position: absolute; top: 18px; right: 16px; }

.date { line-height: 180%; font-size: 1.1rem; text-shadow: 1px 1px 1px #000, 1px 1px 1px #000, 1px 1px 1px #000; text-align: center; background-image: url(../images/whatsnew/date.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; width: 81px; height: 19px; }

.detail__content { background-color: #000; margin: 8px auto 0; border-radius: 4px; border-bottom: 1px solid #404040; border-right: 1px solid #404040; box-sizing: border-box; padding: 16px; width: 462px; height: auto; font-size: 1.4rem; line-height: 150%; }

.detail__content p { margin: 0px; }

.detail__content::-webkit-scrollbar { width: 5px; background-color: #404040; background-image: -webkit-linear-gradient(-320deg, #404040 0%, #404040 50%, #404040 51%, #636163 100%); background-image: linear-gradient(50deg, #404040 0%, #404040 50%, #404040 51%, #636163 100%); }

.detail__content::-webkit-scrollbar-thumb { border-radius: 1px; background-color: #0054ff; background-image: -webkit-linear-gradient(-320deg, #0054ff 0%, #00b0ff 50%, #00b0ff 51%, #0054ff 100%); background-image: linear-gradient(50deg, #0054ff 0%, #00b0ff 50%, #00b0ff 51%, #0054ff 100%); }

.detail__footer { margin-top: 8px; margin-bottom: 10px; }

.emergency { opacity: 0; }