@charset "utf-8";
/* CSS Document */


#indexbg {
    position: relative;
    width: 100%;
    background-attachment: scroll;
    background-image: url(../images/index_01.jpg), url(../images/mbbg.jpg), url(../index/images/t4bg.png);
    background-repeat: no-repeat, repeat, no-repeat;
    background-position: 50% 0%, 50% 74%, 50% 100%;
    overflow: hidden;
    background-color: #fff;
}

.tlogo {
    padding: 2.7rem 0 0 10%;
}

.lobox {
    width: 35rem;
    margin: 1rem;
}

.lobox img {
    width: 90%;
}

.btbox {
   width: 400px;
   height: 120%;
   /* margin-top: 150px; */
   background: url(../images/btbg.png)no-repeat;
   position: fixed;
   top: 0;
   z-index: 5;
}

.btna {
    width: 100%;
    background: url(../images/btn_01.png)no-repeat;
    background-size: 200% auto;
}

.btnb {
    width: 100%;
    background: url(../images/btn_02.png)no-repeat;
    background-size: 200% auto;
}

.btnc {
    width: 100%;
    background: url(../images/btn_03.png)no-repeat;
    background-size: 200% auto;
}

.btnd {
    width: 100%;
    background: url(../images/btn_04.png)no-repeat;
    background-size: 200% auto;
}

.btne {
    width: 100%;
    background: url(../images/btn_05.png)no-repeat;
    background-size: 200% auto;
}

.btnf {
    width: 100%;
    background: url(../images/btn_06.png)no-repeat;
    background-size: 200% auto;
}

.btna:hover {
    background-position: -400px 0;
    cursor: pointer;
}

.btnb:hover {
    background-position: -400px 0;
    cursor: pointer;
}

.btnc:hover {
    background-position: -400px 0;
    cursor: pointer;
}

.btnd:hover {
    background-position: -400px 0;
    cursor: pointer;
}

.btne:hover {
    background-position: -400px 0;
    cursor: pointer;
}

.btnf:hover {
    background-position: -400px 0;
    cursor: pointer;
}

.btna img {
    width: 100%;
}

.btnb img {
    width: 100%;
}

.btnc img {
    width: 100%;
}

.btnd img {
    width: 100%;
}

.btne img {
    width: 100%;
}

.btnf img {
    width: 100%;
}

.headbox {
    position: fixed;
    right: 0;
    width: 84%;
    /* 150 */
    height: 110px;
    background-color: #07b53b;
    z-index: 1;
}

.conbox {
    background: url(../images/stg1bg.jpg)no-repeat;
    position: relative;
    width: 100%;
    height: 900px;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    overflow: scroll;
}

.conbox2 {
    background: url(../images/stg2bg.jpg)no-repeat;
    position: relative;
    width: 100%;
    height: 900px;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    overflow: scroll;
}

/* {
    width: 100%;
    background: url(../images/stg2bg.jpg)no-repeat;
    background-position: 100% 50%;} */
.conbox3 {
    background: url(../images/stg3bg.jpg)no-repeat;
    position: relative;
    width: 100%;
    height: 900px;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    overflow: scroll;
}

/* {
    width: 100%;
    background: url(../images/stg3bg.jpg)no-repeat;
    background-position: 100% 50%;} */
.conbox4 {
    background: url(../images/stg4bg.jpg)no-repeat;
    position: relative;
    width: 100%;
    height: 900px;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    overflow: scroll;
}

/* {
    width: 100%;
    background: url(../images/stg4bg.jpg)no-repeat;
    background-position: 100% 50%;} */
.conbox5 {
    background: url(../images/stg5bg.jpg)no-repeat;
    position: relative;
    width: 100%;
    height: 900px;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    overflow: scroll;
}

/* {
    width: 100%;
    background: url(../images/stg5bg.jpg)no-repeat;
    background-position: 100% 50%;} */
.conbox6 {
    background: url(../images/stg6bg.jpg)no-repeat;
    position: relative;
    width: 100%;
    height: 900px;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    overflow: scroll;
}




.conm {
    min-height: 200px;
    margin: 0 0 0 400px;
    background-size: 100% auto;
}

.sm-content {
    position: relative;
    top: 10px;
    left: 20px;
    width: 900px;
    height: 100%;
    padding: 20px;
    color: #727171;
    margin-bottom: 130px;
}



.benu {
    background-position: -400px top;
}


.content {
    position: relative;
    width: 100%;
    /* 150 */
    margin: 110px 0 0 0px;
}

.title1 {
    border-bottom: 0.1rem solid #E7E7E7;
    padding: 0rem 0 2rem 0rem;
    font-weight: 600;
    font-family: Arial,
        "微軟正黑體",
        Helvetica,
        sans-serif;
    width: 70%;
    font-size: 3rem;
    color: #4b4b4b;
    margin-bottom: 10px;
}

.title2{
    border-bottom: 0.1rem solid #E7E7E7;
    padding: 2rem 0 2rem 0rem;
    font-weight: 600;
    font-family: Arial,
    "微軟正黑體",
    Helvetica,
    sans-serif;
    width: 70%;
    font-size: 3rem;
    color: #4b4b4b;
    margin-bottom: 10px;
    border-top: 0.1rem solid #E7E7E7;
}

.title3 {
    border-bottom: 0.1rem solid #E7E7E7;
    padding: 2rem 0 2rem 0rem;
    font-weight: 600;
    font-family: Arial,
        "微軟正黑體",
        Helvetica,
        sans-serif;
    width: 70%;
    font-size: 2.6rem;
    color: #4b4b4b;
    margin-bottom: 10px;
    border-top: 0.1rem solid #E7E7E7;
}



.note li {
    list-style-type: decimal;
    font-size: 16px;
    color: #1d1d1d;
}

.min-title {
    font-size: 17px;
    margin: 5px 0px;
    font-weight: bold;
    margin-top: 13px;
    /* color: #ff5500;  */
}

.col-org {
    /* color: rgb(209, 10, 10); */
    color: #ff5500;
}

.col-red {
    /* color: rgb(209, 10, 10); */
    color: #d10a0a;
}

.tab {
    /* border-color:#ff5500 ; */
    border-color: #d2c6c080;
     /* font-size: 16px; */
     color: #000000;
}

.in-p {
    text-align: center;
    color: #d10a0a;
    font-size: 15px;
}



.img {
    margin-top: 20px;
    width: 60%;
    margin-bottom: 20px;
}

.img2{
     margin-top: 20px;
     padding-right: 90px;
     margin-bottom: 20px;
}

.img3{
  margin-top: 20px;
  padding-right: 84px;
  margin-bottom: 20px;
  width: 64%;
  margin-left: 30px;
}
.img4 {
    margin-top: 20px;
    padding-right: 84px;
    margin-bottom: 20px;
    width: 65%;
    margin-left: 30px;
}




.img-sm {
    margin-top: 20px;
    margin-bottom: 20px;
}

.col-blue {
    color: #418ce2;
}


/* 距離的設定 */
.mb1 {
    margin-bottom: 20px;
}

.mb2 {
    margin-bottom: 10px;
}


.mt1{
    margin-top: 15px;
}










/* cy */

footer {
    position: fixed; 
    bottom: 0;
    left: 220px;
    width: 100%;
    padding: 20px 0 17px 0;
    font-size: 12px;
    line-height: 14px;
    color: #ffffff;
    background-color: #0b0b0b;
    text-align: center;
    z-index: 3;
    margin-top: 150px;

    /* margin-top: -4px; */
}

#cy {
    position: relative;
    /* 1200 */
    width: 1480px;
    margin: 0 auto;
    text-align: left;
    overflow: hidden;
}

#cy img {
    display: inline-block;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
}

#cy>div>span,
#cy>div {
    display: block;
}

.cy1 {
    position: relative;
    float: left;
    width: 640px;
    text-align: left;
    top: 5px;
    left: 50px;
}

.cy2 {
    position: relative;
    top: 10px;
    right: -10px;
    float: left;
    /* 250 */
    width: 280px;
    text-align: left;
}

.grf {
    position: relative;
    top: 10px;
    float: left;
    left: -18px;
    color: #706f6f;
    width: 480px;
    padding: 0 45px 0 0;
}

.gameflier,
.wangyuan,
.aurogon,
.grading,
.linepod {
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    background-size: 100% auto;
}

.gameflier,
.wangyuan,
.aurogon {
    display: inline-block;
    height: 42px;
    margin-bottom: 5px;
    overflow: hidden;
}

.linepod{
      display: inline-block;
    height: 50px;
      margin-bottom: 5px;
      overflow: hidden;
}



.gameflier {
    width: 125px;
    background-image: url(../images/gameflier.png);
}

.wangyuan {
    width: 165px;
    background-image: url(../images/wangyuan.png);
}

.aurogon {
    width: 89px;
    background-image: url(../images/aurogon.png);
}

.grading {
    position: absolute;
    width: 41px;
    height: 42px;
    right: 80px;
    background-image: url(../images/15.gif);
    /*bottom:0; */
}
.linepod {
    width: 276px;
    background-image: url(../images/linepod.png);
}

.linepod{
    position: relative;
    top: -5px;
    margin-left: -35px;
   
  
}

/*  */





body{

     overflow: hidden; 
}




@media only screen and (max-width:1790px) {
    .grading {
        right: 120px;
    }
    .grf{
        left: -32px;
    }
    .cy2{
        right: -3px;
    }
    .tlogo{
        margin-left: 20px;
    }
}






@media only screen and (max-width:1200px) {
    .content {
        width: 100%;
    }
}

@media only screen and (max-width:800px) {
    .lobox {
        width: 55%;
        margin-top: 1rem;
        margin: 0 auto;
    }

    #indexbg {
        position: relative;
        width: 100%;
        /*height:2500px;*/
        background-attachment: scroll;
        background-image: url(../images/index800_02.jpg), url(../images/mbbg.jpg), url(../index/images/t4bg.png);
        background-repeat: no-repeat, repeat, no-repeat;
        background-position: 50% 0%, 50% 74%, 50% 100%;
        background-size: 100% auto;
        overflow: hidden;
        background-color: #000;
    }

}


#mid-txt {
    font-size: 18px;
}

.space{
    width: 800px;
    height: 100px;
    background-color: #d10a0a;
    opacity: 0;

}

.f15 {
    font-size: 16px;
    color: #000000;
}
.fz15 {
     font-size: 16px;
     color: #000000;
}