@import url("https://dlcdnimgs.asus.com/vendor/public/fonts/css/roboto.css");
.bg-dark { background: #13202c; }

/*  Box Sizing */
/*  Text Truncate */
/* TRANSITION */
/* TRANSFORM */
/* ANIMATION */
/* GRADIENT */
/* OUTER */
#special-sectionOverview { margin-bottom: 100px; }

.width-line-gray { background: none; }

/* ---------- RESET ---------- */
html, body { margin: 0; overflow: visible; }

#hd { font-family: "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; background: black; color: white; margin: 0; padding: 0; }
#hd * { margin: 0; padding: 0; text-decoration: none; list-style-type: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; word-break: break-word; }

::selection { background: #1d2124; color: #ff0054; }

::-moz-selection { background: #1d2124; color: #ff0054; }

#hd ul, #hd li, #hd figure, #hd p { margin: 0; padding: 0; }

#hd h1, #hd h2, #hd h3, #hd h4, #hd p, #hd a, #hd li { font: inherit; }

#hd img { display: block; height: auto; border: none; max-width: 100% !important; }

/* ---------- ANIMATIONS ------------ */
@-webkit-keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-moz-keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-ms-keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-o-keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-webkit-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-moz-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-ms-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-o-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-webkit-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(8%); -o-transform: translateY(8%); -ms-transform: translateY(8%); -webkit-transform: translateY(8%); transform: translateY(8%); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(8%); -o-transform: translateY(8%); -ms-transform: translateY(8%); -webkit-transform: translateY(8%); transform: translateY(8%); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-ms-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(8%); -o-transform: translateY(8%); -ms-transform: translateY(8%); -webkit-transform: translateY(8%); transform: translateY(8%); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-o-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(8%); -o-transform: translateY(8%); -ms-transform: translateY(8%); -webkit-transform: translateY(8%); transform: translateY(8%); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(8%); -o-transform: translateY(8%); -ms-transform: translateY(8%); -webkit-transform: translateY(8%); transform: translateY(8%); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-webkit-keyframes slideFromLeft { 0% { opacity: 0; -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-moz-keyframes slideFromLeft { 0% { opacity: 0; -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-ms-keyframes slideFromLeft { 0% { opacity: 0; -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-o-keyframes slideFromLeft { 0% { opacity: 0; -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@keyframes slideFromLeft { 0% { opacity: 0; -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-webkit-keyframes slideFromRight { 0% { opacity: 0; -moz-transform: translate(50%, 0); -o-transform: translate(50%, 0); -ms-transform: translate(50%, 0); -webkit-transform: translate(50%, 0); transform: translate(50%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-moz-keyframes slideFromRight { 0% { opacity: 0; -moz-transform: translate(50%, 0); -o-transform: translate(50%, 0); -ms-transform: translate(50%, 0); -webkit-transform: translate(50%, 0); transform: translate(50%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-ms-keyframes slideFromRight { 0% { opacity: 0; -moz-transform: translate(50%, 0); -o-transform: translate(50%, 0); -ms-transform: translate(50%, 0); -webkit-transform: translate(50%, 0); transform: translate(50%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-o-keyframes slideFromRight { 0% { opacity: 0; -moz-transform: translate(50%, 0); -o-transform: translate(50%, 0); -ms-transform: translate(50%, 0); -webkit-transform: translate(50%, 0); transform: translate(50%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@keyframes slideFromRight { 0% { opacity: 0; -moz-transform: translate(50%, 0); -o-transform: translate(50%, 0); -ms-transform: translate(50%, 0); -webkit-transform: translate(50%, 0); transform: translate(50%, 0); }
  100% { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
#hd { font-size: 16px; }
#hd h2 { font-size: 4.5em; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: uppercase; word-break: normal; word-wrap: normal; }
#hd h2 small { display: block; font: inherit; font-size: .75em; }
#hd h3 { font-size: 1em; font-weight: normal; line-height: 1; margin: 0 0 .75em; }
#hd h4 { font-size: 1.5em; font-weight: bold; line-height: 1.25; text-transform: uppercase; }
#hd h5 { font-size: 1.25em; font-weight: bold; }
#hd p, #hd small, #hd a, #hd li { font-family: "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; }
#hd p { font-size: 1em; line-height: 1.5; letter-spacing: -.028em; }
#hd b { font-weight: bold; }
#hd small { font-size: 14px; font-weight: 300; letter-spacing: 0.5px; }
#hd .align-center { text-align: center; }
#hd .align-left { text-align: left; }
#hd .align-right { text-align: right; }
#hd .align-italic { font-style: italic; }
#hd a.txt-link { display: inline-block; text-decoration: underline; font-weight: 400; margin-top: .5em; }
#hd a.txt-link:hover { color: white; }
#hd .color-primary { color: #ff0054; }
#hd .color-grey { color: #aaaaaa; }
#hd .hd-uppercase { text-transform: uppercase; }
#hd .hd-notransform { text-transform: none; }
#hd .color-gradient { display: inline-block; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#hd .part-gundam .color-primary { color: #4c3de0; }
#hd .part-gundam .color-gradient { color: #2871fa !important; background: #2871fa; background-color: #2871fa; background-image: -moz-linear-gradient(135deg, #2871fa, #6717cd); background-image: -webkit-linear-gradient(135deg, #2871fa, #6717cd); background-image: linear-gradient(135deg, #2871fa, #6717cd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#hd .part-zaku .color-primary { color: #51127f; }
#hd .part-zaku .color-gradient { color: #501080 !important; background: #501080; background-color: #501080; background-image: -moz-linear-gradient(135deg, #501080, #d30b85); background-image: -webkit-linear-gradient(135deg, #501080, #d30b85); background-image: linear-gradient(135deg, #501080, #d30b85); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/*ie11 above fixed*/
_:-ms-fullscreen, :root #hd .color-gradient { background: transparent !important; }

@media screen and (max-width: 1440px) { #hd h2 { font-size: 3em; }
  #hd p { font-size: 14px; } }
@media screen and (max-width: 1024px) { #hd h2 { font-size: 1.75em; } }
@media screen and (max-width: 620px) { #hd h2 { font-size: 2.75em; } }
@media screen and (max-width: 480px) { #hd h2 { font-size: 2em; } }
#hd .w95 { width: 94%; margin: 0 auto; position: relative; }
#hd .hd-w800 { max-width: 800px; margin-left: auto; margin-right: auto; }
#hd .hd-mw1000 { max-width: 1000px; margin-left: auto; margin-right: auto; }
#hd .hd-w1100, #hd .hd-w1200, #hd .hd-w1300, #hd .hd-w1400 { width: 90%; max-width: 1200px; margin: 0 auto; position: relative; }
#hd .hd-w1100 { max-width: 1100px; }
#hd .hd-w1300 { max-width: 1300px; }
#hd .hd-w1400 { max-width: 1400px; }
#hd .hd-col20 { width: 20%; }
#hd .hd-col25 { width: 25%; }
#hd .hd-col30 { width: 30%; }
#hd .hd-col33 { width: 33.3333%; }
#hd .hd-col40 { width: 40%; }
#hd .hd-col45 { width: 45%; }
#hd .hd-col50 { width: 50%; }
#hd .hd-col55 { width: 55%; }
#hd .hd-col60 { width: 60%; }
#hd .hd-col65 { width: 65%; }
#hd .hd-col70 { width: 70%; }
#hd .hd-col75 { width: 75%; }
#hd .hd-col80 { width: 80%; }
#hd .hd-col100 { width: 100%; }
#hd .ib-top { display: inline-block; vertical-align: top; }
#hd .ib-bottom { display: inline-block; vertical-align: bottom; }
#hd .mx-auto { margin-left: auto; margin-right: auto; }
#hd .m-auto { margin: auto; }
#hd .flex-wrap { display: flex; flex-wrap: wrap; }
#hd .flex-nowrap { display: flex; flex-wrap: nowrap; }
#hd .align-items-center { align-items: center; }
#hd .align-items-start { align-items: flex-start; }
#hd .align-items-end { align-items: flex-end; }
#hd .justify-content-center { justify-content: center; }
#hd .justify-content-start { justify-content: flex-start; }
#hd .justify-content-end { justify-content: flex-end; }
#hd .justify-content-between { justify-content: space-between; }
#hd .justify-content-around { justify-content: space-around; }
#hd .row-reverse { flex-direction: row-reverse; }
#hd .hd-d-none { display: none; }

@media screen and (max-width: 1023px) { #hd .hd-d-1023-none { display: none; }
  #hd .hd-d-1023-block { display: block; }
  #hd .hd-d-1023-inline-block { display: inline-block; } }
@media screen and (max-width: 768px) { #hd .hd-d-768-none { display: none; }
  #hd .hd-d-768-block { display: block; } }
@media screen and (max-width: 620px) { #hd .hd-d-620-none { display: none; }
  #hd .hd-d-620-block { display: block; }
  #hd .w95 { width: 90%; } }
@media screen and (max-width: 480px) { #hd .hd-d-480-none { display: none; }
  #hd .hd-d-480-block { display: block; } }
#hd .hd-btn { display: inline-block; font-size: 12px; padding: .25em 1.5em; margin: 0 .5em .5em; color: white; white-space: nowrap; border: 1px solid white; position: relative; z-index: 2; -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; -webkit-transition: transform 0.25s ease; transition: transform 0.25s ease; }
#hd .hd-btn:hover { font-weight: 500; color: #ff0054; background: #e5e65c; border-color: #e5e65c; }
#hd .hd-btn:before, #hd .hd-btn:after, #hd .hd-btn span:before, #hd .hd-btn span:after { content: ''; display: block; width: 4px; height: 4px; background: white; position: absolute; }
#hd .hd-btn:before { top: -2px; left: -2px; }
#hd .hd-btn:after { bottom: -2px; left: -2px; }
#hd .hd-btn span:before { top: -2px; right: -2px; }
#hd .hd-btn span:after { bottom: -2px; right: -2px; }

#hd .hd-icon-plus { display: inline-block; vertical-align: top; width: 1.25em; height: 1.25em; border-radius: 1em; border: 1px solid #ff0054; margin: .125em .5em -.125em 0; position: relative; }
#hd .hd-icon-plus:before, #hd .hd-icon-plus:after { content: ''; display: block; width: .65em; height: 1px; background: #ff0054; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .hd-icon-plus:after { -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
#hd .hd-active > .hd-icon-plus:after { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }

#hd img.lazyload { opacity: 0; height: 50vh; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; }
#hd img.lazyload.lazyloaded { height: auto; opacity: 1; }

#hd .main-kv { background: #0056b9; background-size: cover; position: relative; z-index: 3; overflow: hidden; }
#hd .main-kv:before, #hd .main-kv:after { content: ''; display: block; width: 100%; height: 100%; background: center top no-repeat; background-size: cover; position: absolute; top: 0; left: 0; }
#hd .main-kv:before { background-image: url(../img/kv/banner-bg-base.jpg); background-size: contain; z-index: 0; }
#hd .main-kv:after { background-image: url(../img/kv/banner-bg-left.png); z-index: 1; -webkit-animation-delay: 0.1s; -webkit-animation-duration: 1s; -webkit-animation-name: slideFromLeft; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.1s; -moz-animation-duration: 1s; -moz-animation-name: slideFromLeft; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.1s; -o-animation-duration: 1s; -o-animation-name: slideFromLeft; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.1s; animation-duration: 1s; animation-name: slideFromLeft; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .main-kv .bg-title { width: 29.2%; mix-blend-mode: screen; position: absolute; top: 3.5%; left: 41.5%; z-index: 1; }
#hd .main-kv figure.zaku, #hd .main-kv figure.gundam { position: relative; z-index: 3; }
#hd .main-kv figure.zaku .mark { width: 65%; top: -18%; left: -27%; }
#hd .main-kv figure.zaku .logo { bottom: 10%; right: -8%; }
#hd .main-kv figure.zaku .title { width: 4.16%; top: 8%; left: 3%; }
#hd .main-kv figure.gundam .mark { width: 55%; top: 0; bottom: 0; right: -23%; margin: auto 0; }
#hd .main-kv figure.gundam .pd { margin-left: auto; margin-right: 2em; }
#hd .main-kv figure.gundam .logo { top: 9%; left: -6%; }
#hd .main-kv figure.gundam .logo-rog { width: 4%; right: 2%; top: 4%; }
#hd .main-kv figure.gundam .title { width: 2.5%; right: 2%; bottom: 18%; }
#hd .main-kv .mark { position: absolute; }
#hd .main-kv .logo-rog, #hd .main-kv .title { position: absolute; }
#hd .main-kv .union { mix-blend-mode: overlay; position: absolute; bottom: 0; z-index: 2; }
#hd .main-kv .union.union-zeon { width: 14%; left: 1.75em; }
#hd .main-kv .union.union-gundam { width: 25%; right: 0; }
#hd .main-kv .pd { width: 87%; position: relative; z-index: 2; cursor: pointer; }
#hd .main-kv .logo { width: 25%; position: absolute; cursor: pointer; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); }
#hd .main-kv .logo .bg { position: absolute; top: 0; left: 0; -moz-transform: translateZ(60px); -o-transform: translateZ(60px); -ms-transform: translateZ(60px); -webkit-transform: translateZ(60px); transform: translateZ(60px); }
#hd .main-kv .logo .content { position: relative; z-index: 2; -moz-transform: translateZ(120px); -o-transform: translateZ(120px); -ms-transform: translateZ(120px); -webkit-transform: translateZ(120px); transform: translateZ(120px); }
#hd .main-kv .suit { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; -moz-transform: skewX(35.5deg); -o-transform: skewX(35.5deg); -ms-transform: skewX(35.5deg); -webkit-transform: skewX(35.5deg); transform: skewX(35.5deg); }
#hd .main-kv .suit img { width: 160%; max-width: none !important; height: auto; position: absolute; top: 3%; right: 2.5%; -moz-transform: skewX(-35.5deg); -o-transform: skewX(-35.5deg); -ms-transform: skewX(-35.5deg); -webkit-transform: skewX(-35.5deg); transform: skewX(-35.5deg); }
#hd .main-kv [class*="animate"] { opacity: 0; }

@media screen and (max-width: 1280px) { #hd .main-kv figure.zaku .logo { right: -5%; bottom: 15%; } }
@media screen and (max-width: 620px) { #hd .main-kv:before { background-image: url(../img/kv/banner-bg-base-m.jpg); background-position: center center; background-size: cover; }
  #hd .main-kv:after { background-image: url(../img/kv/banner-bg-left-m.png); background-position: center center; background-size: cover; -webkit-animation-delay: 0.1s; -webkit-animation-duration: 1s; -webkit-animation-name: fadeInUp; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.1s; -moz-animation-duration: 1s; -moz-animation-name: fadeInUp; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.1s; -o-animation-duration: 1s; -o-animation-name: fadeInUp; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.1s; animation-duration: 1s; animation-name: fadeInUp; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
  #hd .main-kv .container { flex-direction: column-reverse; }
  #hd .main-kv .container .hd-col50 { width: 100%; }
  #hd .main-kv .bg-title { width: 50%; top: 5%; left: 10%; transform-origin: center left; -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
  #hd .main-kv .pd { width: 90%; }
  #hd .main-kv .union.union-gundam { display: none; }
  #hd .main-kv .union.union-zeon { width: 35%; left: 2.5%; }
  #hd .main-kv .logo { -webkit-transform-style: flat; -moz-transform-style: flat; transform-style: flat; }
  #hd .main-kv .logo .bg { -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; }
  #hd .main-kv figure { padding: 2% 0; }
  #hd .main-kv figure.gundam .pd { margin: 0 auto; }
  #hd .main-kv figure.gundam .logo { top: 2.5%; left: 2.5%; }
  #hd .main-kv figure.gundam .logo-rog { display: none; }
  #hd .main-kv figure.gundam .mark { width: 40%; bottom: auto; right: auto; left: 2.5%; }
  #hd .main-kv figure.zaku .logo { top: 0; left: 1%; }
  #hd .main-kv figure.zaku .logo .bg { -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); transform: scale(-1, 1); }
  #hd .main-kv figure.zaku .mark { width: 60%; top: auto; left: auto; right: -5%; bottom: 25%; }
  #hd .main-kv figure.zaku .pd { width: 100%; margin-right: -2.5%; }
  #hd .main-kv figure.zaku .title { width: 6%; left: auto; right: 2.5%; top: auto; bottom: 35%; opacity: .5 !important; } }
@media screen and (max-width: 480px) { #hd .main-kv figure { padding: 10% 0; } }
#hd .sec-banner { display: flex; min-height: 55vw; background: 0 0 no-repeat; background-size: cover; position: relative; overflow: hidden; padding: 1px 0; z-index: 3; }
#hd .sec-banner .container { width: 54%; height: 100%; margin: auto 3% auto auto; }
#hd .sec-banner p { font-size: 1.7em; font-weight: 400; padding: 0 2em; margin-top: 1.75em; }
#hd .sec-banner .hd-bg { position: relative; }
#hd .part-gundam { opacity: 0; visibility: hidden; height: 0; overflow: hidden; }
#hd .part-gundam.active { opacity: 1; visibility: visible; height: auto; }
#hd .part-gundam .sec-banner { background-image: url(../img/gundam/main-bg.jpg); }
#hd .part-gundam .sec-banner .hd-bg { width: 50%; height: auto; margin-top: -1%; margin-bottom: -50%; opacity: .85; -moz-transform: translate(0, 15%); -o-transform: translate(0, 15%); -ms-transform: translate(0, 15%); -webkit-transform: translate(0, 15%); transform: translate(0, 15%); }
#hd .part-zaku { opacity: 0; visibility: hidden; height: 0; overflow: hidden; }
#hd .part-zaku.active { opacity: 1; visibility: visible; height: auto; }
#hd .part-zaku .sec-banner { background-image: url(../img/zaku/main-bg.jpg); }
#hd .part-zaku .sec-banner .hd-bg { width: 45%; height: auto; margin-top: -1%; margin-bottom: -28%; mix-blend-mode: screen; -moz-transform: translate(0, 10%); -o-transform: translate(0, 10%); -ms-transform: translate(0, 10%); -webkit-transform: translate(0, 10%); transform: translate(0, 10%); }

@media screen and (max-width: 1440px) { #hd .sec-banner .container { width: 53%; }
  #hd .sec-banner p { font-size: 1.25em; } }
@media screen and (max-width: 1024px) { #hd .sec-banner p { font-size: 1.125em; }
  #hd .part-gundam .sec-banner .hd-bg { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  #hd .part-zaku .sec-banner .hd-bg { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@media screen and (max-width: 768px) { #hd .sec-banner p { font-size: 1em; line-height: 1.25; } }
@media screen and (max-width: 620px) { #hd .sec-banner { min-height: none; flex-direction: column-reverse; }
  #hd .sec-banner .hd-bg { margin: 0 auto; }
  #hd .sec-banner .container { display: flex; flex-direction: column-reverse; width: 90%; padding: 2em 0; margin: 0 auto; }
  #hd .sec-banner .container img { width: 90%; }
  #hd .sec-banner p { padding: 0; margin: 0 0 1em; }
  #hd .part-gundam .sec-banner .hd-bg { width: 80%; margin-top: 15%; margin-bottom: -80%; }
  #hd .part-zaku .sec-banner .hd-bg { width: 80%; margin-top: 15%; margin-bottom: -50%; } }
#hd .sec-pd { background: center top no-repeat; background-size: cover; position: relative; overflow: hidden; z-index: 2; }
#hd .sec-pd .bg-right, #hd .sec-pd .bg-bar { width: 100%; position: absolute; top: 0; right: 0; }
#hd .sec-pd .logo { width: 13%; min-width: 115px; max-width: 230px; position: absolute; bottom: 2.5%; }
#hd .sec-pd .suit { width: 100%; height: 100%; background-repeat: no-repeat; position: fixed; background-attachment: initial; left: 0; top: 0; bottom: 0; margin: auto 0; }
#hd .sec-pd .content { padding: 1em 0; }
#hd .sec-pd p { font-size: 1.5em; font-weight: 500; line-height: 1.25; margin-top: .5em; }
#hd .sec-pd .item h2, #hd .sec-pd .item p { opacity: 0; -moz-transform: translate(0, 50px); -o-transform: translate(0, 50px); -ms-transform: translate(0, 50px); -webkit-transform: translate(0, 50px); transform: translate(0, 50px); -moz-transition: transform 0.8s ease, opacity 0.4s ease; -o-transition: transform 0.8s ease, opacity 0.4s ease; -webkit-transition: transform 0.8s ease, opacity 0.4s ease; transition: transform 0.8s ease, opacity 0.4s ease; }
#hd .sec-pd .item figure { opacity: 0; -moz-transform: translate(10%, 0); -o-transform: translate(10%, 0); -ms-transform: translate(10%, 0); -webkit-transform: translate(10%, 0); transform: translate(10%, 0); -moz-transition: transform 0.8s ease, opacity 0.4s ease; -o-transition: transform 0.8s ease, opacity 0.4s ease; -webkit-transition: transform 0.8s ease, opacity 0.4s ease; transition: transform 0.8s ease, opacity 0.4s ease; }
#hd .sec-pd .item p { -moz-transition: transform 0.8s 0.1s ease, opacity 0.4s 0.1s ease; -o-transition: transform 0.8s 0.1s ease, opacity 0.4s 0.1s ease; -webkit-transition: transform 0.8s 0.1s ease, opacity 0.4s 0.1s ease; transition: transform 0.8s 0.1s ease, opacity 0.4s 0.1s ease; }
#hd .sec-pd .active h2, #hd .sec-pd .active p, #hd .sec-pd .active figure { opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
#hd .sec-pd .owl-nav { width: 100%; height: 3em; position: absolute; top: 0; bottom: 0; margin: auto 0; }
#hd .sec-pd .owl-nav .owl-prev, #hd .sec-pd .owl-nav .owl-next { width: 2.25em; height: 2.25em; border-left: 3px solid rgba(255, 255, 255, 0.5); border-bottom: 3px solid rgba(255, 255, 255, 0.5); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 0; left: -1.5em; }
#hd .sec-pd .owl-nav .owl-next { left: auto; right: -1.5em; -moz-transform: scale(-1, 1) rotate(45deg); -o-transform: scale(-1, 1) rotate(45deg); -ms-transform: scale(-1, 1) rotate(45deg); -webkit-transform: scale(-1, 1) rotate(45deg); transform: scale(-1, 1) rotate(45deg); }
#hd .part-gundam .sec-pd { background-image: url(../img/gundam/pd-bg.jpg); }
#hd .part-gundam .sec-pd .suit { background-image: url(../img/gundam/line.png); background-position: 0 0; background-size: 51%; mix-blend-mode: color-burn; }
#hd .part-gundam .sec-pd .logo { right: 40%; }
#hd .part-gundam .sec-pd .content { padding-right: 5%; }
#hd .part-gundam .sec-pd figure { margin-left: -3%; }
#hd .part-gundam .sec-pd .owl-nav .owl-prev { border-color: #4316ed; }
#hd .part-gundam .sec-pd .owl-nav .owl-next { border-color: #ff6ddf; }
#hd .part-zaku .sec-pd { background-image: url(../img/zaku/pd-bg.jpg); }
#hd .part-zaku .sec-pd .suit { background-image: url(../img/zaku/line.png); background-position: 0 -10%; background-size: 55%; mix-blend-mode: darken; }
#hd .part-zaku .sec-pd .logo { right: 43%; }
#hd .part-zaku .sec-pd .bg-bar { width: 90%; }
#hd .part-zaku .sec-pd .content { padding-right: 7%; }
#hd .part-zaku .sec-pd figure { margin-left: -12%; }
#hd .part-zaku .sec-pd .owl-nav .owl-prev { border-color: #501080; }
#hd .part-zaku .sec-pd .owl-nav .owl-next { border-color: #d30b85; }

@media screen and (max-width: 1440px) { #hd .sec-pd p { font-size: 1.25em; } }
@media screen and (max-width: 1024px) { #hd .sec-pd .suit { background-position: 0 -10%; }
  #hd .sec-pd p { font-size: 1em; }
  #hd .sec-pd .owl-nav .owl-prev, #hd .sec-pd .owl-nav .owl-next { width: 1.5em; height: 1.5em; border-width: 2px; }
  #hd .sec-pd .owl-nav .owl-prev { left: -2.3%; }
  #hd .sec-pd .owl-nav .owl-next { right: -2.3%; } }
@media screen and (max-width: 768px) { #hd .sec-pd p { font-size: 14px; } }
@media screen and (max-width: 620px) { #hd .sec-pd { display: flex; align-items: center; min-height: 177vw; padding-top: 2em; }
  #hd .sec-pd .logo { width: 35%; top: 1%; right: 5% !important; bottom: auto; }
  #hd .sec-pd .slider-pd { width: 100%; }
  #hd .sec-pd .item { flex-direction: column-reverse; }
  #hd .sec-pd .content { width: calc(90% - 2em); padding-left: 0 !important; padding-right: 0 !important; margin: 0 auto; }
  #hd .sec-pd figure { width: 100%; }
  #hd .sec-pd .owl-nav { top: 30%; }
  #hd .sec-pd .owl-nav .owl-prev, #hd .sec-pd .owl-nav .owl-next { width: 2em; height: 2em; }
  #hd .sec-pd .owl-nav .owl-prev { left: 1em; }
  #hd .sec-pd .owl-nav .owl-next { right: 1em; }
  #hd .part-gundam .sec-pd:after { content: ''; display: block; background: url(../img/kv/title-gundam.png) left bottom no-repeat; background-size: 5%; width: 100%; height: 100%; position: absolute; bottom: 5%; left: 1%; pointer-events: none; }
  #hd .part-gundam .sec-pd .suit { background-size: 110%; background-position: 390% -20%; }
  #hd .part-zaku .sec-pd:after { content: ''; display: block; background: url(../img/kv/title-zaku.png) left top no-repeat; background-size: 5%; width: 100%; height: 100%; position: absolute; bottom: 5%; left: 6%; pointer-events: none; transform-origin: left center; -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
  #hd .part-zaku .sec-pd .suit { background-size: 110%; background-position: 340% -120%; } }
#hd .sec-series { display: flex; align-items: center; min-height: 55vw; padding-bottom: 120px; background: 0 0 no-repeat; background-size: cover; position: relative; overflow: hidden; z-index: 2; }
#hd .sec-series .container { padding-top: 2em; width: 90%; margin-left: auto; margin-right: 0; }
#hd .sec-series .row-top { margin-bottom: 1em; }
#hd .sec-series .item { display: flex; flex-direction: column; align-items: center; height: 100%; position: relative; }
#hd .sec-series .item:before, #hd .sec-series .item:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; -moz-transform: scale(0, 0); -o-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); -moz-transition: transform 0.4s ease; -o-transition: transform 0.4s ease; -webkit-transition: transform 0.4s ease; transition: transform 0.4s ease; }
#hd .sec-series .item img, #hd .sec-series .item h3, #hd .sec-series .item .btn-container { position: relative; z-index: 2; }
#hd .sec-series .item h3 { font-size: 12px; font-weight: 600; width: 90%; max-width: 22em; min-width: 9em; border-top: 1px solid white; border-bottom: 1px solid white; margin: auto auto .5em; position: relative; }
#hd .sec-series .item h3:before, #hd .sec-series .item h3:after, #hd .sec-series .item h3 span:before, #hd .sec-series .item h3 span:after { content: ''; display: block; width: 4px; height: 4px; background: white; position: absolute; }
#hd .sec-series .item h3:before { top: -2px; left: -2px; }
#hd .sec-series .item h3:after { bottom: -2px; left: -2px; }
#hd .sec-series .item h3 span:before { top: -2px; right: -2px; }
#hd .sec-series .item h3 span:after { bottom: -2px; right: -2px; }
#hd .sec-series .item h3 span { display: block; padding: 3px 5px 2px; margin: 3px 6px; }
#hd .sec-series .item .btn-container { opacity: 0; pointer-events: none; }
#hd .sec-series .item:hover:before, #hd .sec-series .item:hover:after { opacity: 1; -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
#hd .sec-series .item:hover .btn-container { opacity: 1; pointer-events: all; -webkit-animation-delay: 0s; -webkit-animation-duration: 0.4s; -webkit-animation-name: fadeInUp; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.4s; -moz-animation-name: fadeInUp; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.4s; -o-animation-name: fadeInUp; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.4s; animation-name: fadeInUp; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .sec-series .trigger { position: absolute; bottom: 2em; right: 1em; cursor: pointer; z-index: 10; }
#hd .sec-series .trigger .bg { position: absolute; top: 0; left: 0; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; }
#hd .sec-series .trigger .content { position: relative; z-index: 2; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; }
#hd .sec-series .trigger:hover .bg { -moz-transform: translate(10px, 10px); -o-transform: translate(10px, 10px); -ms-transform: translate(10px, 10px); -webkit-transform: translate(10px, 10px); transform: translate(10px, 10px); }
#hd .sec-series .trigger:hover .content { -moz-transform: translate(-10px, -10px); -o-transform: translate(-10px, -10px); -ms-transform: translate(-10px, -10px); -webkit-transform: translate(-10px, -10px); transform: translate(-10px, -10px); }
#hd .part-gundam .sec-series { background-image: url(../img/gundam/series-bg.jpg); }
#hd .part-gundam .sec-series .item:before { box-shadow: 0 0 25px #4bcaf9; }
#hd .part-gundam .sec-series .item:after { mix-blend-mode: difference; background: #0043ff; }
#hd .part-gundam .sec-series .item.hd-col50 { margin-bottom: -2em; }
#hd .part-gundam .sec-series .item.hd-col50 h3 { min-width: 7em; }
#hd .part-gundam .sec-series h3 { color: #0b0089; }
#hd .part-gundam .sec-series h3 span { background: #1fc3ff; }
#hd .part-gundam .sec-series .hd-btn:hover { color: #0b0089; }
#hd .part-zaku .sec-series { background-image: url(../img/zaku/series-bg.jpg); }
#hd .part-zaku .sec-series .item:before { box-shadow: 0 0 25px #f9534b; }
#hd .part-zaku .sec-series .item:after { mix-blend-mode: hard-light; background: #ffbc00; }
#hd .part-zaku .sec-series h3 { color: #090188; }
#hd .part-zaku .sec-series h3 span { background: #bbff2e; }
#hd .part-zaku .sec-series .hd-btn:hover { color: #0b0089; }

@media screen and (max-width: 1440px) { #hd .sec-series .row-top { margin-bottom: 0; }
  #hd .sec-series .row-bottom .hd-col20, #hd .sec-series .row-bottom .hd-col25 { width: 20%; margin-top: 0 !important; }
  #hd .sec-series .row-bottom .hd-col30, #hd .sec-series .row-bottom .hd-col40 { width: 33.3333%; }
  #hd .sec-series .row-bottom .hd-col45 { width: 60%; }
  #hd .part-zaku .sec-series .row-top .hd-col20 { width: 25%; }
  #hd .part-zaku .sec-series .row-bottom .hd-col25 { width: 25%; }
  #hd .part-zaku .sec-series .row-bottom .hd-col45 { width: 50%; } }
@media screen and (max-width: 1024px) { #hd .sec-series .container { width: 94%; margin: 0 auto; }
  #hd .sec-series .row-bottom .hd-col20, #hd .sec-series .row-bottom .hd-col25 { width: 35%; margin: 0 auto !important; }
  #hd .sec-series .row-bottom .hd-col45 { width: 100%; }
  #hd .part-zaku .sec-series .row-bottom .hd-col20, #hd .part-zaku .sec-series .row-bottom .hd-col25 { width: 33.3333%; } }
@media screen and (max-width: 1023px) { #hd .sec-series { padding-bottom: 18%; background-position: center center; }
  #hd .sec-series:before, #hd .sec-series:after { content: ''; display: block; width: 100%; height: 50%; position: absolute; left: 0; }
  #hd .sec-series:before { top: 2.5%; left: 2.5%; background: 0 0 no-repeat; background-size: contain; }
  #hd .sec-series:after { bottom: 0; background: center bottom no-repeat; background-size: 100% auto; mix-blend-mode: lighten; }
  #hd .part-gundam .sec-series { background-image: url(../img/gundam/series-bg-m.jpg); }
  #hd .part-gundam .sec-series:before { background-image: url(../img/gundam/series-title-m.png); }
  #hd .part-gundam .sec-series:after { background-image: url(../img/gundam/series-bottom-m.png); }
  #hd .part-zaku .sec-series { background-image: url(../img/zaku/series-bg-m.jpg); }
  #hd .part-zaku .sec-series:before { background-image: url(../img/zaku/series-title-m.png); }
  #hd .part-zaku .sec-series:after { background-image: url(../img/zaku/series-bottom-m.png); } }
@media screen and (max-width: 620px) { #hd .sec-series { padding-bottom: 40%; }
  #hd .sec-series:after { bottom: 15%; }
  #hd .sec-series .slider-series { width: 80%; max-width: 320px; margin: 0 auto; }
  #hd .sec-series .slider-series .group { padding: 10px; }
  #hd .sec-series .slider-series .item { min-height: 60vw; margin-bottom: 2em; }
  #hd .sec-series .slider-series .item.hd-col50 { width: 100%; }
  #hd .sec-series .slider-series .item.hd-col50 img { width: 50%; max-width: 106px !important; margin: auto; }
  #hd .sec-series .slider-series .item .btn-container { opacity: 1; pointer-events: all; }
  #hd .sec-series .owl-nav { width: 100%; height: 3em; position: absolute; top: 0; bottom: 0; margin: auto 0; }
  #hd .sec-series .owl-nav .owl-prev, #hd .sec-series .owl-nav .owl-next { width: 2em; height: 2em; border-left: 2px solid rgba(255, 255, 255, 0.5); border-bottom: 2px solid rgba(255, 255, 255, 0.5); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 0; left: -2em; }
  #hd .sec-series .owl-nav .owl-next { left: auto; right: -2em; -moz-transform: scale(-1, 1) rotate(45deg); -o-transform: scale(-1, 1) rotate(45deg); -ms-transform: scale(-1, 1) rotate(45deg); -webkit-transform: scale(-1, 1) rotate(45deg); transform: scale(-1, 1) rotate(45deg); }
  #hd .sec-series .trigger { bottom: 1em; }
  #hd .part-gundam .sec-series .item:before { box-shadow: 0 0 10px #4bcaf9; }
  #hd .part-gundam .sec-series .owl-nav .owl-prev, #hd .part-gundam .sec-series .owl-nav .owl-next { border-color: #ff6ddf; }
  #hd .part-zaku .sec-series .item:before { box-shadow: 0 0 10px #f9534b; }
  #hd .part-zaku .sec-series .owl-nav .owl-prev, #hd .part-zaku .sec-series .owl-nav .owl-next { border-color: #d30b85; } }
@media screen and (max-width: 480px) { #hd .sec-series .slider-series .item { min-height: 80vw; }
  #hd .sec-series .owl-nav .owl-prev { left: -1em; }
  #hd .sec-series .owl-nav .owl-next { right: -1em; } }

/*# sourceMappingURL=hd-style.css.map */