@charset "utf-8";
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form, label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,summary,time,mark,audio,video,a,input,textarea,section{ margin:0;padding:0; border:0; font-size:100%; background:transparent; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{ display:block;}
nav ul{ list-style:none;}
ul{ list-style:none; }
blockquote,q{ quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{ content:''; content:none;}
pre,code,kbd,samp{ font-family:monospace,monospace; font-size:inherit;}
table{ border-collapse:collapse; border-spacing:0;}
img{ border:0;}
address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:normal;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal}
sup{ vertical-align:text-top; font-size:75%;}
sub{ vertical-align:text-bottom; font-size:75%;}
input,textarea,select{ z-index:auto; font-family:inherit; font-size:inherit; font-weight:inherit; vertical-align:middle;}
a{ outline:none;}
audio:not([controls]){ display:none;}
time{ display:inline;}
[hidden]{ display:none;}
input::-ms-clear,input::-ms-reveal,input:focus::-ms-clear,input:focus::-ms-reveal{visibility:hidden; display:none;}
button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{ padding:0; border:0; outline:none;}

/*==================================================== */
body{-webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; font-family:Arial,'Roboto','Droid Sans',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif; line-height:1.8;}
button{font-family:'Roboto','Droid Sans',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif; cursor:pointer;}
.mincho {font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif;}


a:link{ color:#373737;}
a:visited{ color:#373737;}
a:hover {color:#373737; transition:background 0.2s;}
a:active{color:#373737;}
*{-webkit-tap-highlight-color:rgba(0,0,0,0); outline:none !important;}
.clr{clear:both;}
.hide{position:absolute !important; left:-9999px !important; top:-9999px !important;}
.clr{clear:both;}
section {clear:both; zoom:1;}
article:after,
section:after,
.clrFx:after{content:''; clear:both; display:block;}
.transition{-webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease; filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6;}

img{-ms-interpolation-mode:bicubic;}

/* chrome bug fix*/
*{max-height:999999px;}
*,*::before,*::after {will-change:all;}
textarea,input[type="email"],input[type="password"],input[type="text"],input[type="button"],input[type="submit"]{-webkit-appearance:none;}
textarea{resize:vertical;}
input:-webkit-autofill {-webkit-box-shadow:0 0 0px 1000px rgba(255,255,255,1) inset; outline:none;}
input,button{ outline:none;}

/******************************************************************************************************************************
	square enix module overwrite
__________________________________________________*/
/* sqFooter */
div#sqexHeader-black {z-index:1000000 !important; position:relative !important; min-width:1140px;}
#___gcse_0 {display:none;}
.windowloaded #___gcse_0 {display:block; position:relative; top:-2px;}
/* sqFooter */
#sqexFooter {z-index:100000 !important; position:relative; min-width:1140px;}
#sqexFooter dl.sqex-footer-shares {height:66px !important;}

/* square 検索窓 */
.gsc-selected-option-container.gsc-inline-block{white-space:nowrap; height:50px;}
.gsc-selected-option-container{height:33px !important; min-width:80px !important;}
.gsc-selected-option {height:33px !important;}

/******************************************************************************************************************************

	BASE SET
__________________________________________________*/
html{overflow:visible;}
html,body {margin:0; padding:0;}
body {position:static; overflow:auto; width:auto; *overflow-y:hidden; color:#fff; font-size:14px; line-height:23px; z-index:0; background:#000;}

#sagaSgContents{margin:0 auto; zoom:1; position:relative; overflow:hidden; min-width:1140px; z-index:100000; transition:height 1s ease-out;}

.over-section{margin:0 -640px; zoom:1; position:relative; *overflow-y:hidden; clear:both; padding:0;}
.over-section:after{content:''; clear:both; display:block;}
main {width:100%;}
section {width:100%; margin:0 auto; clear:both; zoom:1; position:relative; z-index:100; padding:0;}
.wrap   {width:1140px; margin:0 auto; clear:both; zoom:1; position:relative; z-index:100; padding:0;}
article   {width:1140px; margin:0 auto; clear:both; zoom:1; position:relative; z-index:10; padding:0;}
article:after,section:after,.wrap:after{content:''; clear:both; display:block;}
*,*::before,*::after {box-sizing:border-box;}

/******************************************************************************************************************************
	header
*/
#siteHeader {position:fixed; left:0; top:36px; width:100%; z-index:350; min-width:1140px; opacity:0; transition:opacity 1s ease;}
.windowloaded #siteHeader{opacity:1;}
#siteHeader .base {background:rgba(0,0,0,0.8); position:relative; width:100%; height:79px;}
#siteHeader nav {width:1140px; margin:0 auto; padding:0 0 0 0px;}
#siteHeader nav ul {font-size:0; line-height:1;}
#siteHeader nav ul li {display:inline-block; vertical-align:top;}
#siteHeader nav ul li span,
#siteHeader nav ul li a{display:block; width:90px; height:80px; position:relative;}
#siteHeader nav ul li span{background:url(/saga_sg/common/images/nav.png) left top no-repeat; width:90px; height:40px; overflow:hidden; margin:20px 0;}
#siteHeader nav ul li a:before{content:''; background:url(/saga_sg/common/images/nav.png) left top no-repeat; width:90px; height:40px; position:absolute; left:0; top:18px; overflow:hidden;
opacity:1; transition:0.3s;}
#siteHeader nav ul li a:after {content:''; background:url(/saga_sg/common/images/nav.png) left top no-repeat; width:90px; height:40px; position:absolute; left:0; top:18px; overflow:hidden; opacity:0; transition:0.3s;}
#siteHeader nav ul li a:hover:after {opacity:1;}
#siteHeader nav ul li a:hover:before {opacity:0;}
#siteHeader nav ul li a.active:after {opacity:1;}
#siteHeader nav ul li a.active:before {opacity:0;}
#siteHeader nav ul li:nth-child(1) {width:78px;}
#siteHeader nav ul li:nth-child(2) {width:85px;}
#siteHeader nav ul li:nth-child(3) {width:90px;}
#siteHeader nav ul li:nth-child(4) {width:140px;}
#siteHeader nav ul li:nth-child(5) {width:95px;}
#siteHeader nav ul li:nth-child(8) {width:100px;}
#siteHeader nav ul li:nth-child(1) a{width:78px;}
#siteHeader nav ul li:nth-child(2) a{width:85px;}
#siteHeader nav ul li:nth-child(3) a{width:90px;}
#siteHeader nav ul li:nth-child(4) a{width:140px;}
#siteHeader nav ul li:nth-child(5) a{width:95px;}
#siteHeader nav ul li:nth-child(8) a{width:100px;}
#siteHeader nav ul li:nth-child(1) a:before {background-position:23px 0; width:78px;}
#siteHeader nav ul li:nth-child(2) a:before {background-position:-55px 0; width:85px;}
#siteHeader nav ul li:nth-child(3) a:before {background-position:-140px 0; width:90px;}
#siteHeader nav ul li:nth-child(4) a:before {background-position:-230px 0; width:140px;}
#siteHeader nav ul li:nth-child(5) a:before {background-position:-370px 0; width:95px;}
#siteHeader nav ul li:nth-child(6) a:before {background-position:-465px 0;}
#siteHeader nav ul li:nth-child(7) a:before {background-position:-555px 0;}
#siteHeader nav ul li:nth-child(8) a:before {background-position:-645px 0; width:100px;}
#siteHeader nav ul li:nth-child(9) a:before {background-position:-745px 0;}
#siteHeader nav ul li:nth-child(1) a:after {background-position:23px -40px; width:78px;}
#siteHeader nav ul li:nth-child(2) a:after {background-position:-55px -40px; width:85px;}
#siteHeader nav ul li:nth-child(3) a:after {background-position:-140px -40px; width:90px;}
#siteHeader nav ul li:nth-child(4) a:after {background-position:-230px -40px; width:140px;}
#siteHeader nav ul li:nth-child(5) a:after {background-position:-370px -40px; width:95px;}
#siteHeader nav ul li:nth-child(6) a:after {background-position:-465px -40px;}
#siteHeader nav ul li:nth-child(7) a:after {background-position:-555px -40px;}
#siteHeader nav ul li:nth-child(8) a:after {background-position:-645px -40px; width:100px;}
#siteHeader nav ul li:nth-child(9) a:after {background-position:-745px -40px;}
#siteHeader nav ul li:nth-child(1) span {background-position:23px -80px; width:78px;}
#siteHeader nav ul li:nth-child(2) span {background-position:-55px -80px; width:85px;}
#siteHeader nav ul li:nth-child(3) span {background-position:-140px -80px; width:90px;}
#siteHeader nav ul li:nth-child(4) span {background-position:-230px -80px; width:140px;}
#siteHeader nav ul li:nth-child(5) span {background-position:-370px -80px; width:95px;}
#siteHeader nav ul li:nth-child(6) span {background-position:-465px -80px;}
#siteHeader nav ul li:nth-child(7) span {background-position:-555px -80px;}
#siteHeader nav ul li:nth-child(8) span {background-position:-645px -80px; width:100px;}
#siteHeader nav ul li:nth-child(9) span {background-position:-745px -80px;}

.about #siteHeader nav ul li:nth-child(2) a:after {opacity:1;}
.about #siteHeader nav ul li:nth-child(2) a:before {opacity:0;}
.story #siteHeader nav ul li:nth-child(3) a:after {opacity:1;}
.story #siteHeader nav ul li:nth-child(3) a:before {opacity:0;}
.characters #siteHeader nav ul li:nth-child(4) a:after {opacity:1 !important;}
.characters #siteHeader nav ul li:nth-child(4) a:before {opacity:0 !important;}
.system #siteHeader nav ul li:nth-child(5) a:after {opacity:1;}
.system #siteHeader nav ul li:nth-child(5) a:before {opacity:0;}
.world #siteHeader nav ul li:nth-child(6) a:after {opacity:1;}
.world #siteHeader nav ul li:nth-child(6) a:before {opacity:0;}
.video #siteHeader nav ul li:nth-child(7) a:after {opacity:1;}
.video #siteHeader nav ul li:nth-child(7) a:before {opacity:0;}

/* bgm */
#bgm {position:absolute; right:20px; top:17px; text-align:center; width:260px; height:43px; background:url(/saga_sg/common/images/bgm.png) left top no-repeat; padding:12px 0 0; font-size:0; line-height:1; opacity:0; transition:opacity 1s ease;}
.windowloaded #bgm{opacity:1;}
#bgm .ui {padding:0 8px 0 15px; height:30px;}
#bgm .ui:after{content:''; clear:both; display:block;}
#bgm .ui .status{float:left; padding:1px 0 0;}
#bgm .ui .status a + a{display:none;}
#bgm .ui .status.play a {display:none;}
#bgm .ui .status.play a + a {display:block;}
#bgm .ui .prev {float:left; padding:0 4px 0 9px;}
#bgm .ui .next {float:left;}
#bgm .ui .bgmIndex {float:left;}
#bgm .ui .bgmIndex br{display:none;}
#bgm .ui .bgmIndex a{display:none;}
#bgm .bgmtitle {font-size:12px; line-height:1; color:#fff; text-align:left; padding:0; height:22px; overflow:hidden; width:154px; float:left; margin-left:8px;}
#bgm .bgmtitle span {display:inline-block; white-space:nowrap; overflow:hidden; /*text-overflow:ellipsis;*/ position:relative; left:0; line-height:22px; line-height:1.8; width:148px;}
#bgm .bgmtitle span b {font-weight:normal; position:relative; left:0;}
#bgm .bgmtitle span em {color:#F00; font-weight:bold; padding-left:0.5em;}

/*subnav*/
.subnavwrap {position:absolute; left:0; top:79px; width:100%; min-width:1140px; z-index:10;}
.subnav {display:none; position:absolute; left:0; top:0; width:100%;background:rgba(0,0,0,1); padding:26px 0;}
.subnav ul {width:1100px; margin:0 auto; text-align:left; padding:0; clear:both;}
.subnav dl {width:1100px; margin:0 auto; text-align:left; padding:0; clear:both; overflow:hidden;}
.subnav dl + dl {margin-top:10px;}
.subnav dl:after{content:''; clear:both; display:block;}
.subnav dl dt {float:left; padding:0 25px 0 0; position:relative;}
.subnav dl dt:before{content:'：'; position:absolute; right:-0.5em; top:0; z-index:10;}
.subnav dl dt:after{content:''; position:absolute; right:-0.5em; top:0; background:#000; width:30px; height:100px; z-index:1;}
.subnav dl dd {zoom:1; overflow:hidden;}
.subnav dl ul {width:auto;}
.subnav ul li {display:inline-block; padding:0; position:relative;}
.subnav ul li a {color:#fff; font-size:14px; line-height:1.2; text-decoration:none; display:block; transition:color 0.5s; padding:0 25px;}
.subnav ul li:nth-child(n+2):before{content:''; width:1px; height:14px; background:#a3a3a3; position:absolute; left:0; top:50%; margin-top:-7px; z-index:0;}
.subnav ul li a:hover {color:#de1034; /*font-weight:bold;*/}
.subnav ul li a.active {color:#de1034; font-weight:bold;}
.subnav ul li .new {color:#CF1111; font-size:86%; display:inline-block; padding-left:0.5em;}


/******************************************************************************************************************************
	bg
*/
#firebg {position:fixed; left:0; top:0; width:100%; height:100%; z-index:30; min-width:1140px; opacity:0; overflow:hidden; transition: height 1s ease-out;}
#bg01 {position:fixed; left:-50%; top:0; width:200%; height:100%; z-index:0; min-width:1140px; display:none;/* transition:height 1s ease-out;*/}
.bg1skip #bg01 {display:block;}
#bg02 {position:fixed; left:-50%; top:0; width:200%; height:100%; z-index:10; min-width:1140px; display:none;}
#bg03 {position:fixed; left:-50%; top:0; width:200%; height:100%; z-index:20; min-width:1140px; display:none;}
#bg04 {position:fixed; left:-50%; top:0; width:200%; height:100%; z-index:15; min-width:1140px; display:none;}

/******************************************************************************************************************************
	sitelogo
*/
.sitelogo {position:absolute; right:50%; top:98px; z-index:-100; transition:1s; opacity:0; width:229px;}
.sitelogo a {display:block; margin-left:542px; transition:0.5s;}
.sitelogo a:hover {opacity:0.8;}
.sitelogo.show {opacity:1; z-index:200;}
.sitelogo img {width:229px; height:auto;}

/******************************************************************************************************************************

	main parts

*/
main {font-size:0; line-height:1; position:relative; width:1140px; margin:0 auto; opacity:0; color:#fff; font-size:15px; transition:opacity 1s ease-out; z-index:50;}
main.loaded {opacity:1}
main.end    {opacity:0; transition:opacity 0.5s ease-out;}
.categoryLabel {position:absolute; left:21px; top:33px; z-index:101; text-align:left; font-size:0; line-height:1;}
.categoryLabel a {display:block; transition:0.5s;}
.categoryLabel a + a {margin:20px 0 0 -10px;}
.categoryLabel img {display:none;}
.categoryLabel img + a {margin:21px 0 0 -10px;}
.categoryLabel img + img {margin-left:15px;}
.categoryLabel a:hover{opacity:0.7;}

.bg1skip .categoryLabel img.bg1skip,
.categoryLabelskip .categoryLabel img{display:inline-block;}

main .pagearr  {position:fixed; left:0; top:50%; margin-top:-75px; z-index:100;}
main .pagearr a{display:block; transition:1s;}
main .pagearr.prev {left:0;}
main .pagearr.next {left:inherit; right:0;}

/* archives */
main .archives {text-align:center; font-size:0; line-height:1;}
main .archives h2{background:rgba(0,0,0,1); font-size:20px; font-style:italic; letter-spacing:0.15em; line-height:38px; margin:0 20px 20px;}
main .archives a{display:inline-block; width:260px; height:370px; text-align:left; background:#fff; position:relative; background-repeat:no-repeat; background-size:cover; background-position:center top; color:#fff; margin:0 10px;}
main .archives a.new:before{content:''; width:100%; height:50px; position:absolute; left:0; bottom:-22px; background:url(/saga_sg/common/images/archive_new.png) center top no-repeat; z-index:10;}
main .archives a span {display:table; width:260px; height:56px; position:absolute; left:0; bottom:0; background:rgba(0,0,0,0.8);}
main .archives a span strong {font-size:18px; line-height:1.1; font-weight:normal; color:#fff; vertical-align:middle; display:table-cell; padding:0 0 0 56px; background:url(/saga_sg/common/images/archive_arr.png) 23px center no-repeat; letter-spacing:0.1em;}
main .archives a + h2 {margin-top:70px;}
main .archives + .archives {margin-top:70px;}
main .archives a:after{content:''; width:100%; height:100%; background:rgba(255,255,255,0.2); position:absolute; left:0; top:0; opacity:0; transition:0.5s;}
main .archives a:hover:after {opacity:1;}

main .archives.sub h2{margin:0 60px 20px;}
main .archives.sub a{width:170px; height:260px; margin:0;}
main .archives.sub a.new:before{bottom:-19px;}
main .archives.sub a span {width:170px; height:67px;}
main .archives.sub a span strong {font-size:15px; padding:0 0 0 46px; background-size:21px 21px; background-position:14px center;}
main .archives.sub a.wide span strong {background-position:5px center; padding-left:32px;}

/******************************************************************************************************************************

	story

*/
main.story {height:1060px;}
main.story .categoryLabel {left:18px;}
#bg01.story {background:url(/saga_sg/story/images/bg.jpg) center top no-repeat;}
#bg02.story {background:url(/saga_sg/story/images/bg02.png) center top no-repeat; left:-40%; transition:opacity 3s ease-out; opacity:0;}
#bg02.story.anim {opacity:1;}
#bg02.story.end {opacity:0 !important; transition:1s;}
.ie9 #bg02.story {left:-50% !important; opacity:1;}
@media (min-width:1921px){
	#bg01.story{background-size:100% auto; width:100%; left:0;}
}
main.story section {background:rgba(0,0,0,0.8); width:530px; height:1060px; padding:126px 0 0 40px; margin:0; float:right; font-size:0; line-height:1; text-align:left;}
main.story section h3,
main.story section p {font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif;}
main.story section h2 {margin-bottom:35px;}
main.story section h3 {font-size:25px; line-height:34px; letter-spacing:0.15em;}
main.story section p {font-size:16px; line-height:34px; letter-spacing:0.05em;}
main.story section h3 + p {margin-top:30px;}
main.story section p + p {margin-top:37px;}
main.story section p + h3 {margin-top:17px;}
main.story section .tab {position:absolute; left:45px; top:207px;}
main.story section .tab + .tab {display:none;}
main.story section p.toggle {padding:0; cursor:pointer; text-align:center; width:460px;}
main.story section p.toggle a {display:inline-block;}
main.story section p.toggle a img {transition:0.5s;}
main.story section p.toggle a:hover img {opacity:0.8;}
main.story section p + p.toggle {margin-top:52px;}



/******************************************************************************************************************************

	about

*/
main.about {min-height:2630px;}
#bg01.about {background:url(/saga_sg/about/images/bg.jpg) center top no-repeat; position:absolute; top:-35px; height:3000px}
.ie9 #bg01.about {opacity:1; display:block;}

main.about .sec01 {height:1058px; padding-top:129px;}
main.about .sec01 .staff {opacity:0; position:relative;}
main.about .sec01 .staff:before{content:''; background:rgba(125,15,22,0.9); width:200%; height:100%; position:absolute; left:0; top:0; z-index:-1; margin-left:-50%;}
main.about .sec01 .character {margin:-86px 0 0; height:0; opacity:0;}
main.about .sec01 .copy {margin:0; opacity:0;}
.ie9 main.about .sec01 .staff,
.ie9 main.about .sec01 .character,
.ie9 main.about .sec01 .copy {opacity:1; display:block;}

main.about .sec02 {height:895px;}
main.about .sec02:before{content:''; background:url(/saga_sg/about/images/sec02.png) center top no-repeat; height:792px; width:1920px; position:absolute; left:50%; top:-60px; margin:0 0 0 -960px;}
main.about .sec02 p {height:0; position:absolute; left:50%; top:0; margin:0 0 0 -960px;}
main.about .sec02 p.ss01 {top:-126px;}
main.about .sec02 p.ss02 {top:72px;}
main.about .sec02 p.ss03 {top:370px;}
main.about .sec03 {height:630px;}
main.about .sec03 p {height:0; position:absolute; left:50%; top:0; margin:0 0 0 -960px;}
main.about .sec03 .character {top:-92px;}
main.about .sec03 .copy {top:-89px;}
main.about .sec03 .wrap {padding-top:286px;}
main.about .sec03 .wrap p {position:static; padding:0 0 0 246px; margin:0; text-align:left; font-size:0; line-height:1;}
main.about .sec03 .wrap p a {display:inline-block; background:#fff;}
main.about .sec03 .wrap p a img{transition:0.5s;}
main.about .sec03 .wrap p a:hover img {opacity:0.8;}




/******************************************************************************************************************************

	videos

*/
main.videos{ padding-top:170px; padding-bottom:100px; min-height:540px;}
main.videos .categoryLabel {left:21px;}
#bg01.videos {background:url(/saga_sg/videos/images/bg.jpg) center top no-repeat; height:1110px;}
@media (min-width:1921px){
	#bg01.videos{background-size:100% auto; width:100%; left:0;}
}
main.videos .movies {text-align:center; font-size:0; line-height:1;}
main.videos .movies .movie {display:inline-block; vertical-align:top; padding:0 10px; position:relative;}
main.videos .movies .movie:nth-child(n+4) {margin-top:57px;}
main.videos .movies .movie h2 {font-size:16px; line-height:1.3; padding:18px 0 0;}
main.videos .movies .movie a{display:inline-block; background:#fff;}
main.videos .movies .movie a img {transition:0.5s;}
main.videos .movies .movie a:hover img {opacity:0.8;}







/******************************************************************************************************************************

	JS STYLE

*/
.uamobile #sagaSgContents {overflow:hidden;}
.inview{opacity:0;}
.ie9 .inview{opacity:1;}

/*
	modal
*/
#modalMask {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:100000; display:none;}
#modalContent {position:fixed; left:0; top:0; width:100%; height:100%; z-index:100001; display:none;}
#modalContent div.mc {width:1020px; height:654px; position:fixed; left:50%; top:50%; margin-left:0px; margin-top:0; z-index:10; padding:91px 0 0; transition:0.8s ease;
-webkit-transform:scale(0,0); -moz-transform:scale(0,0); -o-transform:scale(0,0); -ms-transform:scale(0,0); transform:scale(0,0);}
#modalContent.view div.mc {-webkit-transform:scale(1,1); -moz-transform:scale(1,1); -o-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1);}
#modalContent div.mc iframe {width:1020px; height:576px; position:relative; z-index:0;}
#modalContent .close {position:absolute; right:0; top:0px; opacity:0; transition:0.3s; z-index:20;}
#modalContent.view .close{opacity:1;}
#modalContent .close a{display:block; width:72px; height:72px; overflow:hidden; text-indent:200%; white-space:nowrap; background:url(/saga_sg/common/images/close.png) center center no-repeat; position:relative; transition:opacity 0.5s;}
#modalContent .close a:hover{opacity:0.5;}
/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:100000; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
User Style:
Change the following styles to modify the appearance of Colorbox.  They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:rgba(0,0,0,0.85);}
#colorbox{outline:0;}
#cboxContent{margin-top:88px; overflow:visible; background:#000;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{background:#000; padding:1px;}
#cboxLoadingGraphic{}
#cboxLoadingOverlay{background:url(/saga_sg/common/images/oval.svg) center center no-repeat #000;}
#cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
#cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:;}

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

#cboxPrevious{background-position:0px 0px; right:44px;}
#cboxPrevious:hover{background-position:0px -25px;}
#cboxNext{background-position:-25px 0px; right:22px;}
#cboxNext:hover{background-position:-25px -25px;}

#cboxClose{background:url(/saga_sg/common/images/close.png) left top no-repeat; width:72px; height:72px; background-size:100% auto; right:0; top:-82px !important; transition:0.5s;}
#cboxClose:hover{opacity:0.7;}

.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
.cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
.cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}

#gridJSBaseTable,
#gridJS,
#gridJSSW {z-index:100000000000 !important;}
#bgmPlayer {position:fixed; left:-9999px; top:-9999px;}
/* Slider */
.slick-slider{position:relative;display:block;-moz-box-sizing:border-box;box-sizing:border-box;
-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;
-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;}
.slick-list{position:relative; display:block; overflow:hidden;  margin:0; padding:0;}
.slick-list:focus{outline:none;}
.slick-list.dragging{cursor:pointer;cursor:hand;}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}
.slick-track{position:relative;top:0;left:0;display:block;}
.slick-track:before,.slick-track:after{display:table;content:'';}
.slick-track:after{clear:both;}
.slick-loading .slick-track{visibility:hidden;}
.slick-slide{display:none;float:left;height:100%;min-height:1px;}
[dir='rtl'] .slick-slide{float:right;}
.slick-slide img{display:block;}
.slick-slide.slick-loading img{display:none;}
.slick-slide.dragging img{pointer-events:none;}
.slick-initialized .slick-slide{display:block;}
.slick-loading .slick-slide{visibility:hidden;}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent;}
.slick-prev ,
.slick-next {display:none !important;}
.slick-dots {text-align:right; font-size:0; line-height:1; padding:10px 0 0; position:relative; right:-2px;}
.slick-dots li{display:inline-block; padding:0 6px;}
.slick-dots li button {width:8px; height:8px; border:1px solid #f7f8f8; border-radius:8px; background:none;text-indent:100%; overflow:hidden; white-space:nowrap; padding:0;}
.slick-dots li.slick-active button {background:#fff; border-color:#fff;}


/*
	pjax box
*/
#pjaxContents {text-align:center; padding:78px 0 0;}
#pjaxContents main {position:relative; z-index:50;}
.heightbase {clear:both; zoom:1;}
.heightbase:after{content:''; clear:both; display:block;}
[data-step='fade1']{opacity:0; transition:1s;}
[data-step='fade1'].show {opacity:1;}
[data-step='fade2']{opacity:0; transition:1s;}
[data-step='fade2'].show {opacity:1;}
.ie9 [data-step='fade1'],
.ie9 [data-step='fade2']{opacity:1;}

#loading {position:fixed; left:50%; top:50%; display:none; width:150px; height:100px; margin:-60px 0 0 -40px; z-index:100000; font-size:0; line-height:1; background-size:90px auto; opacity:0.8; transition:margin 1s ease-out;}
#loading span {display:block; transition:opacity 0.5s ease; background:url(/saga_sg/common/images/loading.gif) center center no-repeat rgba(0,0,0,0.5); height:80px; width:80px;
background-size:40px auto; opacity:1; border-radius:10px;}
#loading span.show {opacity:1;}
#loading.first {margin-top:-50px;}
#loading.in {margin-top:-40px;}
#loading.out {margin-top:-20px;}