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

/*pop_comingsoon start*/
.CLOSE{
	-webkit-transform: scale(0); /* 縮小到消失 */
	opacity:0;
}

.OPEN{
	-webkit-transform: scale(1); /* 放大到原來大小 */
	opacity:1;
}

.pop_comingsoon {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image:url(../img/mobile/noteback.png);
	-webkit-transition:all .1s ease-out; /* 宣告 transition 動畫 */
}


.pop_comingsoon2 {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image:url(../img/mobile/noteback.png);
    -webkit-transition:all .1s ease-out; /* 宣告 transition 動畫 */
}



.picblock_comingsoon {
    width: 600px;
    height: 150px;
	background:url(../images/comingsoon.png) no-repeat;
    position:relative;
	top:50%;
	left:50%;
	margin-top:-75px;
	margin-left:-300px;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

.closebtn_comingsoon {
    position:absolute;
	top: 0%;
	right: 0px;
	width: 100px;
    height: 50px;
	top:50%;
	left:50%;
	margin-top:50px;
	margin-left:-50px;
    background-image:url(../images/closebtn.png);
    background-size: 100% 100%;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}
/*pop_comingsoon end*/




.closebtn_complete {
    position: relative;
    top: 28vh;
    width: 8vw;
    margin: 0 auto 0 auto;
    /* padding: 5px; */
    background-size: 100% 100%;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
    text-align: center;
    font-size: 2vmin;
    font-family: Microsoft JhengHei;
    color: #fff;
    /* background: #8002004d; */
    padding: 0 2vw;
    border: 1px #ffffff solid;
    letter-spacing: 4px;
}


.closebtn_complete:hover {
/*    background:#3e0000cf;*/
    border: 1px #EADA9C solid;
    color: #EADA9C;
}



.closebtn_complete_video {
    position: relative;
    top: 75%;
    width: 10vw;
    margin: 0 auto 0 auto;
    padding: 5px;
    background-size: 100% 100%;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
    text-align: center;
    font-size: 2vmin;
    font-family: Microsoft JhengHei;
    color: #fff0cf;
    /* background: #8002004d; */
    padding: 0 2vw;
    border: .01vw #fff0cf solid;
    letter-spacing: .3vw;
        line-height: 1.5vw;
}



.closebtn_complete_video:hover {
    background: #002b4f86;
}





/*----------------- P ------------------*/



@media screen and (max-width: 1024px) {


.closebtn_complete {
    position: relative;
    top: 87%;
    width: 19vw;
    margin: 0 auto 0 auto;
    padding: 5px;
    background-size: 100% 100%;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
    text-align: center;
    font-size: 3vmin;
    font-family: Microsoft JhengHei;
    color: #fff;
    /* background: #8002004d; */
    padding: 0 12vw;
    border: 1px #ffffff solid;
    letter-spacing: 4px;
}







#main{
	height: auto;
	margin: 0 auto;
	width: 100%;
	background-image: url(../images/bg_m.jpg);
	background-position: top center;
	background-repeat:repeat-y;
	margin: 0;
}




#main_bg{
    width: 100%;
     height: auto;
    margin: 0 auto;
    /* z-index: 1; */
    background-image: url(../images/1920.png);
}


.logo {
display: none;
}


.slogan {
display: none;
}


#section01{
    display: block;
    position: relative;
    height: auto;
    width: 100%;
    background: #000000b8;
}


#section01 img {
	display:block;
	position:relative;
	background:none;
	height:auto;
	width: 100%;
	margin:0px 0 8px 0;
}


.logo_m {
    width: 60%;
    height: auto;
    margin: 0 20%;
    /* top: 578px; */
    /* left: 215px; */
    top: 12%;
    position: absolute;
    /* z-index: 999; */
    /* background-image: url(../images/logo.png); */
}


.gobnt_m{
    /* background-image: url(../images/gobnt.png); */
    /* background: #90505070; */
    height: auto;
    width: 60%;
    margin: 0px 20%;
    position: absolute;
    /* left: 290px; */
    top: 59%;
    transition: all .5s;
    cursor: pointer;
}



#header_web {
	display: none;
}
#header_mobile {
    /* background: #000; */
    width: 100%;
    /* height: 300px; */
    display: block;
    background-attachment: fixed;
    position: fixed;
    top: 0;
    z-index: 0;
    /* margin-bottom: 100px; */
    /* padding-bottom: 300px; */
}


.title_m {
    margin-top: 850px;
    position: relative;
    /* margin: 0; */
    margin-bottom: -4px;
    opacity: 0.7;
    /* padding: 0; */
    display: block;
}


.clue1_bnt {
    display: none;
}

.clue1_bnt_m {
    height: 170px;
    width: 170px;
    position: absolute;
    left: 17%;
    top: 6.5%;
    background: none;
    cursor: pointer;
    z-index: 10;
}

.clue2_bnt {
    height: 170px;
    width: 170px;
    position: absolute;
    left: 60%;
    top: 6.5%;
    background: none;
    cursor: pointer;
    z-index: 10;
}

.clue2_bnt:hover {
    background: none;
}

.clue3_bnt {
    height: 170px;
    width: 170px;
    position: absolute;
    left: 38%;
    top: 15.5%;
    background: none;
    cursor: pointer;
    z-index: 10;
}

.clue3_bnt:hover {
    background: none;
}


.here_bnt {
    width: 420px;
    height: 90px;
/*    background: #FF00C250;*/
    position: absolute;
    top: 64%;
    left: 28%;
    cursor: pointer;
    z-index: 10;
}


.here_bnt:hover {
background: none;
}



.psbox {
    color: #fff;
    font-size: 3vmin;
    width: 86vw;
    height: auto;
    /* margin-top: 2vw; */
    background: #000000bd;
    margin: 3vw auto 0 auto;
    padding: 3vw;
}



}



/*----------------- M ------------------*/



@media screen and (max-width: 640px) {



.logo_m {
    width: 88%;
    height: auto;
    margin: 0 6%;
    /* top: 578px; */
    /* left: 215px; */
    top: 14%;
    position: absolute;
    /* z-index: 999; */
    /* background-image: url(../images/logo.png); */
}


.gobnt_m{
/*background-image: url(../images/gobnt.png); */
    /* background: #90505070; */
    height: auto;
    width: 60%;
    margin: 0 20%;
    position: absolute;
    /* left: 290px; */
    top: 81.5%;
    transition: all .5s;
    cursor: pointer;
}

.title_m {
    margin-top: 650px;
    position: relative;
    /* margin: 0; */
    margin-bottom: -4px;
    opacity: 0.7;
    /* padding: 0; */
    display: block;
}



.clue1_bnt {
    display: none;
}



.clue1_bnt_m {
    height: 90px;
    width: 90px;
    position: absolute;
    left: 16%;
    top: 6.5%;
/*    background: #00F0FF50;*/
    cursor: pointer;
    z-index: 10;
}

.clue2_bnt {
    height: 90px;
    width: 90px;
    position: absolute;
    left: 61%;
    top: 6.5%;
    background: none;
    cursor: pointer;
    z-index: 10;
}

.clue3_bnt {
    height: 90px;
    width: 90px;
    position: absolute;
    left: 39%;
    top: 15%;
    background: none;
    cursor: pointer;
    z-index: 10;
}



.here_bnt {
    width: 225px;
    height: 48px;
/*    background: #FF00C250;*/
    position: absolute;
    top: 64%;
    left: 28%;
    cursor: pointer;
    z-index: 10;
}





.psbox {
    top: 12vw;
    position: relative;
    color: #fff;
    font-size: 3vmin;
    width: 86vw;
    height: auto;
    /* margin-top: 2vw; */
    background: #000000bd;
    margin: 3vw auto 0 auto;
    padding: 3vw;
}



.closebtn_complete {
    position: relative;
    top: 79vh;
    width: 23vw;
    margin: 0 auto 0 auto;
    padding: 5px;
    background-size: 100% 100%;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
    text-align: center;
    font-size: 4vmin;
    font-family: Microsoft JhengHei;
    color: #fff;
    background: #8002004d;
    padding: 0 10vw;
    border: 1px #ffffff solid;
    letter-spacing: 4px;
}



.closebtn_complete_video {
    position: relative;
    top: -8vh;
    left: 15vw;
    width: 23vw;
    margin: 0 auto 0 auto;
    padding: 5px;
    background-size: 100% 100%;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
    text-align: center;
    font-size: 4vmin;
    font-family: Microsoft JhengHei;
    color: #fff;
    /* background: #8002004d; */
    padding: 0px 11vw;
    border: 1px #ffffff solid;
    letter-spacing: 4px;
}



.closebtn_complete_ps {
    position: relative;
    top: 21vh;
    /* right: 3%; */
    width: 23vw;
    margin: 2% auto 0 auto;
    padding: 5px;
    /* height: 50px; */
    /* top: 3%; */
    background-size: 100% 100%;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
    text-align: center;
    font-size: 4vmin;
    font-family: Microsoft JhengHei;
    color: #fff;
    /* font-weight: bold; */
    background: #8002004d;
    padding: 0 11vw;
    border: 1px #ffffff solid;
    /* letter-spacing: 4px; */
}



.content img {
margin: auto;
    position: absolute;
    top: -15%;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 0%;
    max-width: 0%;
    /* border: 1px solid #a79065; */
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    -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;
    max-height: 75%;
    max-width: 90%;
}





}









/*pop_complete start*/
.pop_complete, .pop_complete2, .pop_complete3, .pop_complete4, .pop_complete5, .pop_complete_ps {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
background-color: #000000db;
background-image: url(../images/modal_bg.png);
background-repeat: repeat;
background-position: left top;
    -webkit-transition:all .2s ease-out; /* 宣告 transition 動畫 */
}


.picblock_complete {
    width: 960px;
    height: 650px;
    background:url(../images/completebtn.png) no-repeat;
    position:relative;
    top:50%;
    left:50%;
    margin-top:-325px;
    margin-left:-480px;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}







/*.content {
    position: absolute;
    top: 10%;
    left: 50%;
    margin-left: -480px;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;

}
*/





/*pop_complete end*/