@charset "UTF-8";

/* Global
   ============================================================== */

a:link, a:hover, a:active { text-decoration: none; cursor: pointer; }
body, html { min-height: 100%; }
body { position: relative; padding: 0; margin: 0; font-family: Arial, Microsoft YaHei, Microsoft JhengHei, sans-serif; height: 995px; overflow-x: hidden; background-color: #000; }
::-webkit-input-placeholder { color: #bcbcbc; }
::-moz-placeholder { color: #bcbcbc; }
:-ms-input-placeholder { color: #bcbcbc; }
:-moz-placeholder { color: #bcbcbc; }

[class^="_"] > * { display: inline-block; vertical-align: middle; }
[class*="Btn"] { display: inline-block; cursor: pointer; }

/* PC
   ============================================================== */
.pc { background: url(../img/pbg.jpg) no-repeat center; height: 100%;}
.pc header { position: fixed; top: 0; width: 100%; height: 60px; background: rgba(0,0,0,.8); z-index: 100; }
.pc header .wrap { position: relative; width: 1080px; height: 100%;	margin: 0 auto; }
.pc header .wrap > * { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.pc header .logo { left: 0; }
.pc header .cs-link { right: 0; font-size: 18px; color: #ffe8b0; border: 1px solid #ffe8b0; border-radius: 50px; padding: 5px 15px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; }
.pc header .cs-link >* { display: inline-block; vertical-align: middle; }
.pc header .cs-link i { width: 25px; height: 25px; background: url(../img/pcs_ico.png); background-position: 0 0; margin-right: 3px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; }
.pc header .cs-link:hover { color: #1A1714; background: rgb(246,214,126); background: -moz-linear-gradient(top, rgba(246,214,126,1) 0%, rgba(254,241,199,1) 20%, rgba(245,223,130,1) 45%, rgba(220,167,69,1) 65%, rgba(222,169,71,1) 100%, rgba(220,167,69,1) 100%); background: -webkit-linear-gradient(top, rgba(246,214,126,1) 0%,rgba(254,241,199,1) 20%,rgba(245,223,130,1) 45%,rgba(220,167,69,1) 65%,rgba(222,169,71,1) 100%,rgba(220,167,69,1) 100%); background: linear-gradient(to bottom, rgba(246,214,126,1) 0%,rgba(254,241,199,1) 20%,rgba(245,223,130,1) 45%,rgba(220,167,69,1) 65%,rgba(222,169,71,1) 100%,rgba(220,167,69,1) 100%); }
.pc header .cs-link:hover i { background-position: 0 -25px;  }

.pc content .wrap { width: 1000px; min-width: 1000px; margin: 0 auto; padding-top: 60px; }
.pc .webBox { float: right; width: 488px; height: 425px; margin: 300px 110px 0 0; padding: 45px 0; }
.pc .webBox .webIndex { color: #fce389; font-size: 54px; font-weight: 700; text-shadow: 0 3px 4px rgba(0,0,0,.75); letter-spacing: 0.05em; margin-top: 35px; text-align: center; padding: 13px 0 0; }
.pc .webBox .webIndex a { color: #fce389;}

.pc .btnWrap { text-align: center; margin-top: 65px; }
.pc .goldBtn { position: relative; color: #000; font-weight: 700; box-shadow: 0 8px 11px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,1); transition: .8s; background: rgb(237,184,88); background: -moz-linear-gradient(top, rgba(237,184,88,1) 0%, rgba(254,230,168,1) 20%, rgba(245,214,110,1) 45%, rgba(197,133,50,1) 66%, rgba(222,169,71,1) 100%); background: -webkit-linear-gradient(top, rgba(237,184,88,1) 0%,rgba(254,230,168,1) 20%,rgba(245,214,110,1) 45%,rgba(197,133,50,1) 66%,rgba(222,169,71,1) 100%); background: linear-gradient(to bottom, rgba(237,184,88,1) 0%,rgba(254,230,168,1) 20%,rgba(245,214,110,1) 45%,rgba(197,133,50,1) 66%,rgba(222,169,71,1) 100%); }
.pc .goldBtn:hover { background: rgb(246,214,126); background: -moz-linear-gradient(top, rgba(246,214,126,1) 0%, rgba(254,241,199,1) 20%, rgba(245,223,130,1) 45%, rgba(220,167,69,1) 65%, rgba(222,169,71,1) 100%, rgba(220,167,69,1) 100%); background: -webkit-linear-gradient(top, rgba(246,214,126,1) 0%,rgba(254,241,199,1) 20%,rgba(245,223,130,1) 45%,rgba(220,167,69,1) 65%,rgba(222,169,71,1) 100%,rgba(220,167,69,1) 100%); background: linear-gradient(to bottom, rgba(246,214,126,1) 0%,rgba(254,241,199,1) 20%,rgba(245,223,130,1) 45%,rgba(220,167,69,1) 65%,rgba(222,169,71,1) 100%,rgba(220,167,69,1) 100%); }
.pc .goldBtn.goto { font-size: 40px; padding: 15px 40px; border-radius: 30px; }
.pc .goldBtn.goto::before { content: ''; position: absolute; top: -11px; left: 20%; width: 154px; height: 25px; background: url(../img/pbtn_glow.png); }
.pc .btnWrap > div { margin-top: 30px; }
.pc .btnWrap > div a { font-size: 18px; padding: 12px 8px; width: 38%; }
.pc .btnWrap > div a + a { margin-left: 8px; }

.pc footer { position: fixed; bottom: 0; width: 100%; font-size: 12px; color: #ffdb8e; background: #000; padding: 10px 0; text-align: center; }
.pc footer .simpler { position: absolute; top: -28px; left: 50%; color: #fff; font-size: 18px; font-weight: 700; min-width: 320px; height: 28px; line-height: 28px; padding: 0 60px; background: rgb(55,46,29); background: -moz-linear-gradient(top, rgba(55,46,29,1) 0%, rgba(26,23,20,1) 100%); background: -webkit-linear-gradient(top, rgba(55,46,29,1) 0%,rgba(26,23,20,1) 100%); background: linear-gradient(to bottom, rgba(55,46,29,1) 0%,rgba(26,23,20,1) 100%); transform: translateX(-50%); }
.pc footer .simpler::before,
.pc footer .simpler::after { content: ''; position: absolute; top: 0; width: 28px; height: 28px; background: url(../img/pleft_angle.png); }
.pc footer .simpler::before { left: -27px; }
.pc footer .simpler::after { right: -27px; -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); }

/* MB
   ============================================================== */

.mb .bg { position: fixed; width: 100%; height: 100%; background: url(../img/bg.jpg) no-repeat center; background-size: cover; }
.mb .m-wrapper { position: absolute; top: 12vmin; left: 0; width: 100%; z-index: 10; }

.mb header { position: fixed; top: 0; width: 100%; height: 12vmin; background: rgba(0,0,0,.8); z-index: 100; }
.mb header .wrap { position: relative; width: 90%; height: 100%; margin: 0 auto; }
.mb header .wrap > * { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.mb header .logo { left: 0; }
.mb header .logo img { width: 36.29vmin; height: 8.95vmin; vertical-align: top; }
.mb header .cs-link { right: 0; }
.mb header .cs-link img { width: 8.63vmin; height: 9.68vmin; vertical-align: top; }

.mb content { display: block; width: 100%; text-align: center; }
.mb content .slogan img { width: 89.11vmin; height: 27.74vmin; margin: 10.43vmin 0 6.84vmin; }
.mb .webBox { position: relative; display: inline-block; width: 90.73vmin; height: 80.65vmin; margin: auto 0; padding: 8vmin 0; margin-bottom: 19vmin; background: url(../img/simpler_bg.png) no-repeat; background-size: 100%; }
.mb .webBox .webIndex { color: #fce389; font-size: 10vmin; font-weight: 700; text-shadow: 0 3px 4px rgba(0,0,0,.75); letter-spacing: 0.05em; margin-top: 7.2vmin; text-align: center; }
.mb .webBox::before { content: ''; position: absolute; top: 50%; left: -11vmin; width: 20vmin; height: 18vmin; background: url(../img/dec01.png) no-repeat; background-size: 100%; }
.mb .webBox::after { content: ''; position: absolute; bottom: 20%; right: -4.6vmin; width: 10vmin; height: 11.3vmin; background: url(../img/dec02.png) no-repeat; background-size: 100%; }

.mb .btnWrap { text-align: center; margin-top: 12vmin; }
.mb .goldBtn { position: relative; color: #000; font-weight: 700; box-shadow: 0 8px 11px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,1); transition: .8s; background: rgb(237,184,88); background: -moz-linear-gradient(top, rgba(237,184,88,1) 0%, rgba(254,230,168,1) 20%, rgba(245,214,110,1) 45%, rgba(197,133,50,1) 66%, rgba(222,169,71,1) 100%); background: -webkit-linear-gradient(top, rgba(237,184,88,1) 0%,rgba(254,230,168,1) 20%,rgba(245,214,110,1) 45%,rgba(197,133,50,1) 66%,rgba(222,169,71,1) 100%); background: linear-gradient(to bottom, rgba(237,184,88,1) 0%,rgba(254,230,168,1) 20%,rgba(245,214,110,1) 45%,rgba(197,133,50,1) 66%,rgba(222,169,71,1) 100%); }
.mb .goldBtn.goto { font-size: 7.26vmin; padding: 3.23vmin 8vmin; border-radius: 4.84vmin; }
.mb .goldBtn.goto::before { content: ''; position: absolute; top: -2.2vmin; left: 20%; width: 28.23vmin; height: 4.84vmin; background: url(../img/btn_glow.png); background-size: cover; }

.mb .btnWrap > div { margin-top: 5.65vmin; }
.mb .btnWrap > div a { font-size: 3.63vmin; padding: 2.42vmin 1.2vmin; width: 40%; }
.mb .btnWrap > div a + a { margin-left: 1.6vmin; }

.mb footer { position: fixed; bottom: 0; width: 100%; font-size: 2.2vmin; color: #ffdb8e; background: #000; padding: 2vmin 0; text-align: center; z-index: 100; }
.mb { display: none;}
@media(max-width: 1100px){
	.pc { display: none;}
  .mb { display: inline;}
}