html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-weight:normal;background: transparent;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
audio,canvas,progress,video {display: inline-block;vertical-align: baseline;}
audio:not([controls]) {display: none;height: 0;}
ul, li, dl, dt, dd, ol {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
border{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
a{text-decoration: none; color: inherit;}
a:active,a:hover,button:active,button:hover{outline: 0;}
hr{display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1rem 0;padding: 0;}
input, select {vertical-align: middle;}
button,input,optgroup,select,textarea {color: inherit; font: inherit; margin: 0;}
button{cursor: pointer;overflow: visible;}
input[type="radio"] {vertical-align: text-bottom;box-sizing: border-box;padding: 0;}
input[type="checkbox"] {vertical-align: bottom;box-sizing: border-box; padding: 0; }
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}
.clear{clear: both;}
input,button,select,textarea{outline:none;}
 *:focus {outline: none;}
/*img{max-width: 100%;}*/

/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/


html,body{width: 100%;height: auto;min-width: 320px;}
html{font-family:Helvetica,arial,Microsoft JhengHei,"敺株��迤暺煾��",sans-serif;font-size: 18px;font-weight: bold;color: #fff;}
body{font-size:1rem;background:url(../images/bg.jpg)top center repeat-x; background-color: #f32636;height: 100vh;background-size: contain;}


/*lightbox*/
.lightbox_opping {position: fixed;top:0;left: 0; width: 100%;bottom: 0;
background: rgba(0,0,0,.9);opacity: 1;z-index: 12;overflow: hidden;
}
.lightbox_opping>div{width:90%;max-width: 900px;position:relative;left:50%;top:50%; transform: translate(-50%,-50%);
-moz-transition: ease-in-out 0.5s;
-o-transition: ease-in-out 0.5s;
-webkit-transition: ease-in-out 0.5s;
transition: ease-in-out 0.5s;}


.lightbox-target {position: fixed;top: -100%;left: 0; width: 100%;
background: rgba(0,0,0,.9);opacity: 0;z-index: 4;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  overflow: hidden;
}
.lightbox-target>div{width:90%;max-width: 900px;position:relative;left:50%;top:50%; transform: translate(-50%,-50%);
-moz-transition: ease-in-out 0.5s;
-o-transition: ease-in-out 0.5s;
-webkit-transition: ease-in-out 0.5s;
transition: ease-in-out 0.5s;}
.lightbox-target:target {
  opacity: 1;
  top: 0;
  bottom: 0;
}
.lightbox .close{z-index: 4;position: absolute;top:-20px;right: -30px;}
.lightbox .close img{width: 90%;max-width: 70px;}

.lightbox .rule>img{width: 90%;max-width: 900px;}

.lightbox .item{display:block;height:100%;}
.lightbox .item_main{position:relative;left:50%;top:50%; transform: translate(-50%,-50%);}
.lightbox .item .left_img{padding-top: 0px; max-width:200px;margin-right: 30px;width: 40%;}
#item_box6 .item .left_img{max-width:220px;}
.lightbox .item .right_img{max-width:500px;}


.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;}
.video-container iframe {position: absolute;top:0;left: 0;width: 100%;height: 100%;}



/*index_______PC*/
.pc{display: block;text-align: center;height: auto;}
.pc_logo{position: absolute;left: 20px;top: 20px;z-index: 2;}
.pc_menu{position: absolute;right: 20px;top: 20px;z-index: 2;}
.pc_menu li{display: inline-block;padding:0px 20px;border-right: 1px solid #ffff68;}
.pc_menu li:last-child{border-right: 0px;}
.pc_menu li:hover{color:#ffff68;}

.pc_main{max-width: 1000px;width: 90%;display: block;position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);margin: 0px auto 0px;vertical-align: top;height: 100%;max-height: 550px;}
.pc_main a{display: inline-block;width: 14%;margin-top:0;vertical-align: top;margin: 0 1%;}
.pc_main a:first-child{margin-left:0;}
.pc_main a:last-child{margin-right:0;}
.pc_main img{width: 100%;}
.pc_main .pc_item{z-index: 2;margin-top: 40px;vertical-align: top;position: absolute;}
.pc_main .pc_item a:hover{transform: scale(1.05);}
.pc_main .pc_item a:nth-of-type(odd){animation: item_odd  2s infinite alternate cubic-bezier(0,0.1,0.1,0);}
.pc_main .pc_item a:nth-of-type(even){animation: item_even 2s infinite alternate cubic-bezier(0,0.1,0.1,0);}



@-webkit-keyframes item_odd{
     0% {margin-top: 20px;}
    100% {margin-top: -20px;}
}
@-moz-keyframes item_odd{
     0% {margin-top: 20px;}
    100% {margin-top: -20px;}
}
@-o-keyframes item_odd{
      0% {margin-top: 20px;}
    100% {margin-top: -20px;}
}
@-ms-keyframes item_odd{
      0% {margin-top: 20px;}
    100% {margin-top: -20px;}
}



@-webkit-keyframes item_even{
      0% {margin-top: -20px;}
    100% {margin-top: 20px;}
}
@-moz-keyframes item_even{
      0% {margin-top: -20px;}
    100% {margin-top: 20px;}
}    
@-o-keyframes item_even{
      0% {margin-top: -20px;}
    100% {margin-top: 20px;}
}
@-ms-keyframes item_even{
      0% {margin-top: -20px;} 
    100% {margin-top: 20px;}
}



/*index_______Mobile*/
.mobile{display: none;text-align: center;overflow: hidden;width: 100%;margin: 0 auto;padding: 0 4%;box-sizing: border-box;}
.mobile img{display: block;margin: 0 auto;max-width: 100%;}
.m_logo img:first-child{float: left;margin:20px 0px 10px 0px;width: 100px;}
.m_logo img{float: right;margin: 20px 0px 10px 0px;display: inline-block;width: 90px;}
.m_menu{position: fixed;bottom: 0;background-color: #580004;height: 45px;width: 100%;overflow: hidden;left: 0;z-index: 10;}
.m_menu li{float: left; border-right: 1px solid #ffff68;line-height: 45px;width: 28%;}
.m_menu li:last-child{width: 15%;}
.m_menu li img{display: inline-block;vertical-align: middle;margin: 0 auto;}
.m_menu li:hover{color:#ffff68;}
.m_menu li:last-child{border-right: 0px;}

.m_main{width: 90%;display: block;margin: 40px auto 0px;}
.m_main a.m_down{animation: m_down 1s infinite;display: block;}
.m_main a.m_down img{max-width: 260px;}

@-webkit-keyframes m_down{
     0% {transform: scale(1)}
     50% {transform: scale(.96)}
    100% {transform: scale(1)}
}
@-moz-keyframes m_down{
     0% {transform: scale(1)}
     50% {transform: scale(.96)}
    100% {transform: scale(1)}
}
@-o-keyframes m_down{
     0% {transform: scale(1)}
     50% {transform: scale(.96)}
    100% {transform: scale(1)}
}




.m_item{margin: -35px 0px 30px;}
.m_item img:last-child{margin-top: 15px;}
.m_rule img{margin:30px auto;}
.item_1 img:first-child{margin-bottom:30px;}
.item_1,.item_2,.item_3,.item_4,.item_5,.item_6 img{margin-bottom: 5rem;}


.m_bg{display: none;}


@media screen and (min-height: 511px) and (max-height: 800px){
body{font-size:1rem;background:url(../images/bg.jpg) bottom center repeat-x; background-color: #f32636;height: 100vh;}
/*.lightbox-target>div{width: 40%;}*/

.pc_main{position: static;transform: translate(0%,0%);left:none;top:none;margin: 100px auto 50px;} 
}


@media screen and (orientation: portrait) {
body{font-size:1rem;background:url(../images/bg.jpg) bottom center repeat-x; background-color: #f32636;height: auto;}
.pc_main{position: static;transform: translate(0%,0%);left:none;top:none;margin: 100px auto 50px;} 
}



@media screen and (min-height: 0px) and (max-height: 510px){
.pc{display: none;} 
.mobile{display: block;}
}

@media screen and (max-width: 769px){
body{background:none; background-color: none;height: auto;}
.m_bg{background:url(../images/bg.jpg) top center;background-attachment: initial;
    background-repeat: no-repeat;display: block;width: 100%;height: 100%;position: fixed;top: 0px;left: 0px;content:;z-index:-1;background-size: 230% auto; background-color: #f32636;}    
    
.pc{display: none;}
.mobile{display: block;}
    
.lightbox .close{position: absolute; top:0px; right: 0;max-width: 50px;}

}