html,body {
margin:0px;
padding:0px;
font-family: 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs;
}

html {
color:#5f5855;
}

.wrap {
scroll-behavior: smooth;
}

.hide ,.none {
display:none;	
}

a,a:hover,a:active {
 text-decoration:none;
 color:inherit;
}

.csr,.ptr {
cursor:pointer;	
}


.relbox {
position:relative;
display:block;
width:100%;
height:100%;	
}

.abs {
position:absolute;	
}


.tleft {
 text-align:left;	
}
.tjustfy {
 text-align:justify;	
}
.tright {
 text-align:right;	
}
.tcenter {
 text-align:center;	
}

.full {
width:100%;
display:block;	
}



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

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

	
  /*disable mobile click select*/	
  button,
  select,
  a:active,a:focus,a:hover{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	tap-highlight-color: transparent;
	outline: none!important;
	  -webkit-touch-callout: none;
	  -webkit-user-select: none;
	  -khtml-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
  }
  
 
  
}
.footer {
background-color:#d6cfb8;		
width:100%;
text-align:center;
height:140px;
display:block;
}


@media screen and (max-width:640px){
	
.footer,.footer .flogo {
height:70px;
}	


}


html,body {
margin:0;
padding:0;

}

body {
width:100%;
display:block;
background-color:#fff;
}


.wmid {
margin:auto;
width:100%;
max-width:1380px;	
box-sizing:border-box;
display:block;
height:100%;
min-height:0;
position:relative;
}

.okiwrap {
display:block;
width:100%;
height:100vh;

}


.wrap {
width:100%;
height:auto;
display:block;
position:absolute;
left:0;
top:0;
}

.bwrap {
position:fixed;
width:100%;
height:100%;
overflow:hidden;
left:0;
top:0;
background-color:#f2f2f2
}





.okiwrap .wbg {
overflow:hidden;
background-color:#fff;
}

.sec {
display:block;
width:100%;
height:100vh;
min-height:660px;
background-position:bottom center;
background-size:cover;
overflow:hidden;
}
.secbg {
background-size:100vw 100vh;
background-position:left center;	
}

/*scrollmsg*/
.scrollmsg {
display:none;
position:fixed;
left:10px;
top:10px;
background:rgba(0,0,0,.8);
color:#fff;
width:auto;
height:auto;	
min-width:100px;
min-height:100px;
font-size:9pt;
padding:20px;
}
.local .scrollmsg {
display:block;
z-index:9999;
}


/*debug */
.local .sec ,.local .wmid  {
border:1px solid #f00;	
box-sizing:border-box;
}
.local .bwrap {
border:1px solid #0f0;	
box-sizing:border-box;	
}


.abtn {display:block}
.abtn img {width:100%;height:100%}
.local .abtn {
background-color:rgba(255,0,0,.6);	
}




header {
display:block;	
position:fixed;
top:0px;
left:0px;
width:100%;
text-align:Center;
height:90px;	
z-index:10;
background-color:#fff;
}
header .wmid{
max-width:1280px;
width:100%;
text-align:left;
}

.show640 {
display:none	
}

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


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

header {
display:block;	
position:fixed;
top:0px;
left:0px;
width:100%;
text-align:Center;
height:45px;	
z-index:10;
background-color:#fff;
}
header .wmid .logo{
height:45px;	
max-height:100%;

}


	
}
@media screen  and (max-width: 640px) {
.show640 {
display:block	
}


	
}
/*oki*/
.okisiema {
box-sizing:border-box;
position:relative;	
}

.okisiema .siema img {
  width: 100%;
}


.okisiema .rb {
xborder:1px solid #f00;	
}

.okisiema .tab{
position:absolute;
top:50%;
width:100px;
height:100px;
display:block;
margin-top:-50px;
z-index:4;
cursor:pointer;
}
.okisiema .tab[class~=tleft]{
position:absolute;
left:0px;
}
.okisiema .tab[class~=tright]{
position:absolute;
right:0px;
}

.okisiema .tab img{
width:100%;
}



.okisiema .siema .relbox {
  position:relative;
}




.okisiema .pagerbox{
position:absolute;
left:0px;
bottom:0px;
height:50px;
display:block;
width:100%;
text-align:center;
z-index:4;
}

.okisiema .pagerbox i{
 width:8px;
 height:8px;
 border:3px solid rgba(0,0,0,0);
 margin:5px;
 display:inline-block;
 border-radius:10px;
 background-color:#999;
 cursor:pointer;
 
}

.okisiema .pagerbox i[class~=on]{
 width:8px;
 height:8px;
 border:3px solid rgba(0,0,0,0);
 margin:5px;
 display:inline-block;
 border-radius:10px;
 background-color:#333;
 cursor:pointer;
 
}

/*
.okisiema .pagerbox i[class~=on]{
 width:10px;
 height:10px;	
 border:3px solid #3DBDBF;
 background-color:#fff;
 xbox-shadow:3px 3px 3px rgba(0,0,0,.6); 
 transform:translateY(1px);
 -webkit-transform:translateY(1px); 
}
*/
/*add fbg*/

.okisiema .siema {
  width: 100%;
  opacity:1;
}

.okisiema .siema[class~=on] {
  width: 100%;
  opacity:1;
  z-index:2;
  position:relative;
}


.okisiema .fbg {
 position:relative;
 z-index:1;
 display:none;
}
/*
.okisiema .fbg img {
 position:absolute;
 left:0px;
 top:0px;
 width:100%;	
 z-index:0;
 opacity:0;
 transition:all .3s;

}


.okisiema .fbg img[class~=on] {
 opacity:1;
 z-index:1;
}
*/

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

.okisiema .tab{
position:absolute;
top:50%;
width:60px;
height:50px;
display:block;
margin-top:-25px;
z-index:4;
cursor:pointer;
}
 
.okisiema .pagerbox{
xdisplay:none;
bottom:0px;
height:30px;
}



.okisiema .pagerbox i{
 width:4px;
 height:4px;
 
 margin:3px;
 display:inline-block;
 border-radius:10px;
 background-color:#999;
 cursor:pointer;
 
}

.okisiema .pagerbox i[class~=on]{
 width:4px;
 height:4px;
 margin:3px;
 display:inline-block;
 border-radius:10px;
 background-color:#333;
 cursor:pointer;
 
}



}
/*oki*/
.okisiema-m {
box-sizing:border-box;
position:relative;	
}

.okisiema-m .siema img {
  width: 100%;
}


.okisiema-m .rb {
xborder:1px solid #f00;	
}

.okisiema-m .tab{
position:absolute;
top:50%;
width:50px;
height:50px;
display:block;
margin-top:-25px;
z-index:4;
cursor:pointer;
}
.okisiema-m .tab[class~=tleft]{
position:absolute;
left:0px;
}
.okisiema-m .tab[class~=tright]{
position:absolute;
right:0px;
}

.okisiema-m .pagerbox{
position:absolute;
left:0px;
bottom:0px;
height:50px;
display:block;
width:100%;
text-align:center;
z-index:4;
}

.okisiema-m .pagerbox i{
 width:8px;
 height:8px;
 border:3px solid rgba(0,0,0,0);
 margin:5px;
 display:inline-block;
 border-radius:10px;
 background-color:#333;
 cursor:pointer;
 
}
.okisiema-m .pagerbox i[class~=on]{
 width:10px;
 height:10px;	
 border:3px solid #3DBDBF;
 background-color:#fff;
 xbox-shadow:3px 3px 3px rgba(0,0,0,.6); 
 transform:translateY(1px);
 -webkit-transform:translateY(1px); 
}

/*add fbg*/

.okisiema-m .siema {
  width: 100%;
  opacity:0;
}

.okisiema-m .siema[class~=on] {
  width: 100%;
  opacity:1;
  z-index:2;
  position:relative;
}


.okisiema-m .fbg {
 position:relative;
 z-index:1;
}
.okisiema-m .fbg img {
 position:absolute;
 left:0px;
 top:0px;
 width:100%;	
 z-index:0;
 opacity:0;
 transition:all .3s;
}
.okisiema-m .fbg img[class~=on] {
 opacity:1;
 z-index:1;
}


@media screen  and (max-width: 640px) {
 
.okisiema-m .pagerbox{
display:none;
}
}
/*=== .ani.css ===*/

/*快至慢transition: .5s all cubic-bezier(.09,.75,.64,1.04)前後回頓cubic-bezier(.66,-0.49,.51,1.49)中間回頓cubic-bezier(.3,1.45,.79,-0.25)跳動@keyframes bounce {  0% { transform: scale(1) ; }  10% { transform: scale(1) ;  }  20% { transform: scale(1)  }  30% { transform: scale(1) }        45% { transform: scale(1.2) ;  }  50% { transform: scale(0.8) ; }  60% { transform: scale(1.1)  }  70% { transform: scale(0.9) }  80% { transform: scale(1.05)  }  90% { transform: scale(0.95) }    100% { transform: scale(1) }}*//*=== .cusplaymsg.css ===*/

/*msg*/	.play-msg {background-color:rgba(0,0,0,.6);position:fixed;top:0;left:0;width:100%;height:100vh;	}	.play-msgbox {position:absolute;top:50%;left:50%;width:90%;max-width:480px;transform:translate(-50%,-50%);}	.play-msgbox .msg {display:block;	position:absolute;top:40%;left:5%;width:90%;height:30%;border:0px solid #f00;font-size:20pt;color:#666666;font-weight:bold;text-align:center;}.play-msgbox .msg .sub{font-size:11pt;}.play-msgbox .btn {display:block;	position:absolute;top:75%;left:25%;width:50%;height:16%;border-radius:10px;border:1px solid #579be2;color:#579be2;text-align:center;background-color:#fff;font-size:14pt;line-height:16%;font-family: "微軟儷黑體", "微軟正黑體", "Arial", "Helvetica", "Geneva", "sans-serifs";cursor:pointer;}/*=== .smooth-scrollbar.css ===*/

[data-scrollbar],[scrollbar],scrollbar{display:block;position:relative}[data-scrollbar] .scroll-content,[scrollbar] .scroll-content,scrollbar .scroll-content{-webkit-transform:translateZ(0);transform:translateZ(0)}[data-scrollbar].sticky .scrollbar-track,[scrollbar].sticky .scrollbar-track,scrollbar.sticky .scrollbar-track{background:hsla(0,0%,87%,.75)}[data-scrollbar] .scrollbar-track,[scrollbar] .scrollbar-track,scrollbar .scrollbar-track{position:absolute;opacity:0;z-index:1;transition:opacity .5s ease-out,background .5s ease-out;background:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-scrollbar] .scrollbar-track.show,[data-scrollbar] .scrollbar-track:hover,[scrollbar] .scrollbar-track.show,[scrollbar] .scrollbar-track:hover,scrollbar .scrollbar-track.show,scrollbar .scrollbar-track:hover{opacity:1}[data-scrollbar] .scrollbar-track:hover,[scrollbar] .scrollbar-track:hover,scrollbar .scrollbar-track:hover{background:hsla(0,0%,87%,.75)}[data-scrollbar] .scrollbar-track-x,[scrollbar] .scrollbar-track-x,scrollbar .scrollbar-track-x{bottom:0;left:0;width:100%;height:8px}[data-scrollbar] .scrollbar-track-y,[scrollbar] .scrollbar-track-y,scrollbar .scrollbar-track-y{top:0;right:0;width:4px;height:100%}[data-scrollbar] .scrollbar-thumb,[scrollbar] .scrollbar-thumb,scrollbar .scrollbar-thumb{position:absolute;top:0;left:0;width:4px;height:8px;background:rgba(0,0,0,.5);border-radius:4px}[data-scrollbar] .overscroll-glow,[scrollbar] .overscroll-glow,scrollbar .overscroll-glow{position:absolute;top:0;left:0;width:100%;height:100%}

/*=== home === in*/

.ctr-home {
  /*ctr-home*/ }
  .ctr-home .s1bc {
    width: 2vw;
    height: 2vw;
    border-radius: 2vw;
    display: block;
    border: 2px solid rgba(255, 255, 255, .8);
    animation-name: s1bbtop;
    animation-duration: 4s;
    animation-iteration-count: infinite; }
  .ctr-home .s1bb {
    width: 35vw;
    max-width: 350px;
    display: block;
    left: 50%;
    top: 200%;
    opacity: 0; }
  .ctr-home .s1bb img {
    opacity: 0.5;
    width: 95%;
    /*	
animation-name:bblr;
animation-duration:2s;
animation-iteration-count:infinite;
*/ }
  .ctr-home .s1ta {
    max-width: 60%;
    max-height: 60vh;
    left: 30%;
    top: 10%;
    opacity: 0;
    transform: translate(-50%, 0%) scale(0.5, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s1ta {
    opacity: 1;
    transform: translate(-50%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.3s; }
  .ctr-home .s1tb {
    max-width: 60%;
    max-height: 60vh;
    left: 30%;
    top: 10%;
    opacity: 0;
    transform: translate(-50%, 30%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s1tb {
    opacity: 1;
    transform: translate(-50%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.6s; }
  .ctr-home .s1tc {
    max-width: 60%;
    max-height: 60vh;
    left: 30%;
    top: 10%;
    opacity: 0;
    transform: translate(-50%, 25%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s1tc {
    opacity: 1;
    transform: translate(-50%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.9s; }
  .ctr-home .s1td {
    max-width: 60%;
    max-height: 60vh;
    left: 30%;
    top: 10%;
    opacity: 0;
    transform: translate(-50%, 20%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s1td {
    opacity: 1;
    transform: translate(-50%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.2s; }
  .ctr-home .s1te {
    max-width: 60%;
    max-height: 60vh;
    left: 30%;
    top: 10%;
    opacity: 0;
    transform: translate(-50%, 15%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s1te {
    opacity: 1;
    transform: translate(-50%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.5s; }
  .ctr-home .s1b {
    width: 28%;
    left: 30%;
    bottom: 20%;
    opacity: 0;
    cursor: pointer;
    transform: translate(-50%, 0%) scale(0.5, 0.5) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s1b {
    opacity: 1;
    transform: translate(-50%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.5s; }
  .ctr-home .s1p {
    height: 100vh;
    right: 25%;
    bottom: -2%;
    opacity: 0;
    transform: translate(60%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s1p {
    opacity: 1;
    transform: translate(50%, 0%) scale(1, 1) rotate(0deg);
    transition: all 1.2s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.6s; }
  .ctr-home .s1logo {
    width: 18%;
    right: 2%;
    top: 3%;
    opacity: 0;
    transform: translate(-20%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s1logo {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.9s; }
  .ctr-home .s1yr {
    width: 11%;
    right: 3%;
    bottom: 65%;
    opacity: 0;
    transform: translate(0%, 0%) scale(0.5, 0.5) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s1yr {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.2s;
    /*.sec-2 ----------------------------------------------------------------*/ }
  .ctr-home .vdobox {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative; }
  .ctr-home .vdobox #video {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%); }
  .ctr-home .s2ta {
    width: 96%;
    max-width: 1320px;
    left: 50%;
    top: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6, 0.6) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s2ta {
    opacity: 1;
    transform: translate(-50%, -60%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.3s; }
  .ctr-home .s2tb {
    width: 96%;
    max-width: 1320px;
    left: 50%;
    top: 50%;
    opacity: 0;
    transform: translate(-20%, -50%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s2tb {
    opacity: 1;
    transform: translate(-50%, -60%) scale(1, 1) rotate(0deg);
    transition: all 0.9s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.9s; }
  .ctr-home .s2tc {
    width: 96%;
    max-width: 1320px;
    left: 50%;
    top: 50%;
    opacity: 0;
    transform: translate(-50%, -20%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s2tc {
    opacity: 1;
    transform: translate(-50%, -60%) scale(1, 1) rotate(0deg);
    transition: all 0.9s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.5s; }
  .ctr-home .s2b {
    max-width: 140px;
    width: 10%;
    left: 50%;
    top: 65%;
    opacity: 0;
    transform: translate(-50%, 20%) scale(0.5, 0.5) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s2b {
    opacity: 1;
    transform: translate(-50%, 20%) scale(1, 1) rotate(0deg);
    transition: all 0.9s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.8s;
    /*.sec-3 ----------------------------------------------------------------*/ }
  .ctr-home .s3pa {
    max-width: 109%;
    max-height: 90%;
    left: 50%;
    bottom: 2%;
    opacity: 0;
    transform: translate(-60%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s3pa {
    opacity: 1;
    transform: translate(-50%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.6s; }
  .ctr-home .s3pb {
    max-width: 109%;
    max-height: 90%;
    left: 50%;
    bottom: 2%;
    opacity: 0;
    transform: translate(-60%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s3pb {
    opacity: 1;
    transform: translate(-50%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.2s; }
  .ctr-home .s3pc {
    max-width: 109%;
    max-height: 90%;
    left: 50%;
    bottom: 2%;
    opacity: 0;
    transform: translate(-60%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s3pc {
    opacity: 1;
    transform: translate(-50%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.5s; }
  .ctr-home .s3pd {
    max-width: 109%;
    max-height: 90%;
    left: 50%;
    bottom: 2%;
    opacity: 0;
    transform: translate(-50%, -20%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s3pd {
    opacity: 1;
    transform: translate(-50%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 2.1s; }
  .ctr-home .s3t1a {
    max-width: 60%;
    max-height: 35%;
    left: 3%;
    top: 3%;
    opacity: 0;
    transform: translate(10%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s3t1a {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.3s; }
  .ctr-home .s3t1b {
    max-width: 60%;
    max-height: 35%;
    left: 3%;
    top: 3%;
    opacity: 0;
    transform: translate(10%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s3t1b {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.6s; }
  .ctr-home .s3t1c {
    max-width: 60%;
    max-height: 35%;
    left: 3%;
    top: 3%;
    opacity: 0;
    transform: translate(10%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s3t1c {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.9s; }
  .ctr-home .s3b {
    width: 16%;
    left: 3%;
    top: 30%;
    opacity: 0;
    transform: translate(0%, 20%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s3b {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.2s; }
  .ctr-home .s3bb {
    left: 50%;
    top: 80%;
    animation-name: bbtop;
    animation-duration: 4s;
    animation-iteration-count: infinite; }
  .ctr-home .s3bb img {
    animation-name: bblr;
    animation-duration: 2s;
    animation-iteration-count: infinite; }
  .ctr-home .s3itm1 {
    width: 22%;
    height: 15%;
    left: 0%;
    bottom: 0%; }
  .ctr-home .s3itm2 {
    width: 23%;
    height: 15%;
    left: 28%;
    bottom: 0%; }
  .ctr-home .s3itm3 {
    width: 46%;
    height: 15%;
    left: 53%;
    bottom: 0%;
    /*.sec-4 ----------------------------------------------------------------*/ }
  .ctr-home .s4b {
    width: 29%;
    left: 35.5%;
    bottom: 5%;
    opacity: 0;
    transform: translate(0%, -10%) scale(0.6, 0.6) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s4b {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.8s; }
  .ctr-home .s4p1 {
    max-width: 29%;
    max-height: 50%;
    left: 18%;
    top: 53%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5, 0.5) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s4p1 {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.9s; }
  .ctr-home .s4p2 {
    max-width: 36%;
    max-height: 60%;
    left: 50%;
    top: 53%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5, 0.5) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s4p2 {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.6s; }
  .ctr-home .s4p3 {
    max-width: 29%;
    max-height: 50%;
    left: 82%;
    top: 53%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5, 0.5) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s4p3 {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.2s; }
  .ctr-home .s4ta {
    max-width: 62%;
    max-height: 20%;
    left: 50%;
    top: 3%;
    opacity: 0;
    transform: translate(-60%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s4ta {
    opacity: 1;
    transform: translate(-50%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.3s; }
  .ctr-home .s4tb {
    max-width: 62%;
    max-height: 20%;
    left: 50%;
    top: 3%;
    opacity: 0;
    transform: translate(-40%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s4tb {
    opacity: 1;
    transform: translate(-50%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.6s; }
  .ctr-home .s4tc {
    max-width: 62%;
    max-height: 20%;
    left: 50%;
    top: 3%;
    opacity: 0;
    transform: translate(-50%, 10%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s4tc {
    opacity: 1;
    transform: translate(-50%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.9s;
    /*.sec-5 regbox----------------------------------------------------------------*/ }
  .ctr-home .s5p {
    width: 15%;
    right: -10%;
    bottom: -10%;
    opacity: 0;
    transform: translate(-20%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s5p {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.9s; }
  .ctr-home .sec-5 {
    color: #fff;
    font-size: 12pt;
    line-height: 22pt;
    overflow: visible;
    height: auto;
    min-height: 100vh; }
  .ctr-home .sec-5 .wmid {
    height: auto;
    padding: 20px 40px; }
  .ctr-home .sec-5 .s5tbox, .ctr-home .sec-5 .btnbox {
    display: block;
    width: 100%;
    padding: 20px 0;
    text-align: center; }
  .ctr-home .s5t {
    max-width: 80%;
    margin: auto;
    display: block; }
  .ctr-home .sec-5 .regbox {
    display: block;
    width: 80%;
    left: 10%;
    min-height: 600px;
    border-radius: 30px;
    padding: 20px 40px;
    text-align: center;
    background-color: rgba(21, 21, 82, .6);
    box-sizing: border-box;
    position: relative; }
  .ctr-home .sec-5 .nbox {
    text-align: center;
    color: #85c2ee;
    padding: 20px 0;
    font-size: 14pt; }
  .ctr-home .sec-5 .chkbox {
    text-align: center;
    color: #fff;
    padding: 20px 0;
    font-size: 10pt; }
  .ctr-home .regbox .tb {
    width: 90%;
    margin-left: 5%; }
  .ctr-home .tb td {
    text-align: left;
    padding-top: 10px;
    vertical-align: top; }
  .ctr-home .tb .cap {
    width: 110px;
    text-align: justify;
    font-size: 16pt;
    margin-top: 10px;
    line-height: 0px;
    word-break: break-all;
    padding-top: 25px;
    padding-right: 10px; }
  .ctr-home .tb .cap:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0px; }
  .ctr-home .tb input[type~=text], .ctr-home .tb input[type~=file] {
    width: 100%;
    border: 1px solid #85c2ee;
    background-color: transparent;
    padding: 5px;
    border-radius: 2px;
    color: #fff;
    font-size: 14pt; }
  .ctr-home .tb input[class~=err] {
    border: 1px solid #f00; }
  .ctr-home .tb input.upcol {
    width: calc(100% - 100px); }
  .ctr-home .tb .rel {
    position: relative; }
  .ctr-home .tb .upimg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    opacity: 0; }
  .ctr-home .tb .upbtn {
    border: 1px solid #85c2ee;
    background-color: #85c2ee;
    color: #152550;
    font-size: 14pt;
    text-align: center;
    width: 90px;
    display: inline-block;
    padding: 5px;
    position: absolute;
    right: -10px;
    top: 10px;
    font-family: "微軟儷黑體", "微軟正黑體", "Arial", "Helvetica", "Geneva", "sans-serifs"; }
  .ctr-home .tb .col-city {
    width: calc(50% - 15px);
    display: inline-block; }
  .ctr-home .tb .col-area {
    width: calc(50% - 10px);
    margin-left: 20px;
    display: inline-block;
    /*.sec-6 ----------------------------------------------------------------*/ }
  .ctr-home .s6p {
    width: 62%;
    right: 6%;
    top: 50%;
    opacity: 0;
    transform: translate(0%, -50%) scale(0.5, 0.5) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s6p {
    opacity: 1;
    transform: translate(0%, -50%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.3s; }
  .ctr-home .s6ta {
    width: 33%;
    left: 6%;
    top: 50%;
    opacity: 0;
    transform: translate(0%, -30%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s6ta {
    opacity: 1;
    transform: translate(0%, -50%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.3s; }
  .ctr-home .s6tb {
    width: 33%;
    left: 6%;
    top: 50%;
    opacity: 0;
    transform: translate(0%, -35%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s6tb {
    opacity: 1;
    transform: translate(0%, -50%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.6s; }
  .ctr-home .s6tc {
    width: 33%;
    left: 6%;
    top: 50%;
    opacity: 0;
    transform: translate(0%, -40%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s6tc {
    opacity: 1;
    transform: translate(0%, -50%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.9s; }
  .ctr-home .s6td {
    width: 33%;
    left: 6%;
    top: 50%;
    opacity: 0;
    transform: translate(0%, -45%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s6td {
    opacity: 1;
    transform: translate(0%, -50%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.2s; }
  .ctr-home .s6te {
    width: 33%;
    left: 6%;
    top: 50%;
    opacity: 0;
    transform: translate(10%, -50%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s6te {
    opacity: 1;
    transform: translate(0%, -50%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.5s; }
  .ctr-home .s6date {
    display: block;
    background: #72c438;
    border-radius: 60px;
    color: #fff;
    width: 19%;
    height: 8%;
    left: 6%;
    top: calc(50% + 180px);
    opacity: 0;
    transform: translate(10%, -50%) scale(0.9, 0.9) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s6date {
    opacity: 1;
    transform: translate(0%, -50%) scale(0.9, 0.9) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.5s; }
  .ctr-home .s6date h3 {
    font-weight: bold;
    text-align: center;
    font-size: 24pt;
    padding: 0;
    margin: 0;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*.sec-7 ----------------------------------------------------------------*/ }
  .ctr-home .sec-7 {
    min-height: 850px; }
  .ctr-home .s7r {
    height: 100%;
    right: 35%;
    bottom: -38%;
    opacity: 0;
    transform: translate(20%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s7r {
    opacity: 1;
    transform: translate(50%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.3s; }
  .ctr-home .s7p {
    width: 43%;
    left: 2%;
    top: 0%;
    opacity: 0;
    transform: translate(20%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s7p {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.6s; }
  .ctr-home .s7s {
    width: 9%;
    left: -3%;
    top: 70%;
    opacity: 0;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s7s {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.9s; }
  .ctr-home .s7ta {
    width: 44%;
    right: 12%;
    top: 3%;
    opacity: 0;
    transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s7ta {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.9s; }
  .ctr-home .s7tb {
    width: 44%;
    right: 12%;
    top: 3%;
    opacity: 0;
    transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s7tb {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.2s; }
  .ctr-home .s7tc {
    width: 44%;
    right: 12%;
    top: 3%;
    opacity: 0;
    transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s7tc {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.4s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.3s; }
  .ctr-home .s7td {
    width: 44%;
    right: 12%;
    top: 3%;
    opacity: 0;
    transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s7td {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.2s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.5s; }
  .ctr-home .s7b {
    width: 36%;
    height: 8%;
    right: 16%;
    top: 170px;
    /*.sec-8 ----------------------------------------------------------------*/ }
  .ctr-home .s8t {
    width: 35%;
    left: 32.5%;
    top: 3%;
    opacity: 0;
    transform: translate(0%, -20%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s8t {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.9s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.6s; }
  .ctr-home .sec-8 .rule {
    opacity: 0;
    transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .sec-8[class~=animated] .rule {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.9s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.9s; }
  .ctr-home .sec-8 {
    color: #fff;
    font-size: 12pt;
    line-height: 22pt;
    overflow: visible;
    height: auto;
    min-height: 100vh; }
  .ctr-home .sec-8 .wmid {
    height: auto;
    padding: 40px;
    padding-top: 230px; }
  .ctr-home .sec-8 table, .ctr-home .sec-8 ul.sec-8 ol {
    width: 100%; }
  .ctr-home .sec-8 table td {
    padding: 10px 0px;
    text-align: left;
    vertical-align: top; }
  .ctr-home .sec-8 table td:nth-of-type(1) {
    width: 30px; }
  .ctr-home .sec-8 li {
    padding-bottom: 10px; }
  .ctr-home .sec-8 .s8logobox {
    display: block;
    width: 100%;
    text-align: right; }
  .ctr-home .sec-8 .s8logo {
    width: 100%;
    max-width: 160px;
    margin-top: 40px;
    /*.sec-win ----------------------------------------------------------------*/ }
  .ctr-home .sec-win {
    overflow: visible;
    height: auto;
    min-height: 10vh; }
  .ctr-home .sec-win .mb {
    display: none; }
  @media screen and (max-width: 1380px) {
  .ctr-home .s1t {
    max-width: 50%;
    max-height: 40vh; }
  .ctr-home .s1p {
    height: 90vh; }
  .ctr-home .sec-2 {
    height: 70vw;
    min-height: auto; }
  .ctr-home .sec-3 {
    height: 65vw;
    min-height: auto; }
  .ctr-home .s3pa, .ctr-home .s3pb, .ctr-home .s3pc, .ctr-home .s3pd {
    max-width: 95%; }
  .ctr-home .s3itm1 {
    left: 3%; }
  .ctr-home .sec-4 {
    height: 65vw;
    min-height: auto; }
  .ctr-home .sec-6 {
    height: 66vw;
    min-height: auto; }
  .ctr-home .s6date {
    top: 69%; }
  .ctr-home .sec-7 {
    height: 66vw;
    min-height: auto; }
  .ctr-home .s7s {
    width: 5%;
    left: 1%; }
  .ctr-home .s6date h3 {
    font-size: 3vw; }
  .ctr-home .s7b {
    top: 19%; }
  .ctr-home .sec-8 .wmid {
    height: auto;
    padding-top: 25vw; }
  .ctr-home .sec-8 .rule {
    padding: 0 15px; } }
  .ctr-home .mobile {
    display: none; }
  .ctr-home .mbr {
    display: none; }
  @media screen and (max-width: 640px) {
  .ctr-home {
    /*width:640px*/ }
    .ctr-home .mbr {
      display: block; }

    .ctr-home .mobile {
      display: block;
      width: 100%;
      height: 100%; }

    .ctr-home .pc {
      display: none; }

    .ctr-home .pc .s1ta, .ctr-home .pc .s1tb, .ctr-home .pc .s1tc, .ctr-home .pc .s1td, .ctr-home .pc .s1te {
      max-width: 50%; }
      .ctr-home .pc .s1b {
        left: 18%;
        bottom: 60%; }
      .ctr-home .pc .s1yr {
        bottom: none;
        top: 20vw; }

    .ctr-home .sec-4 {
      height: 100vw;
      min-height: auto; }

    .ctr-home .s4ta, .ctr-home .s4tb, .ctr-home .s4tc {
      max-width: 90%;
      top: 8vw; }

    .ctr-home .s4b {
      width: 80%;
      left: 10%; }

    .ctr-home .s5t {
      max-width: 100%;
      margin: auto;
      display: block; }

    .ctr-home .s5p {
      right: 0%;
      bottom: 0px; }

    .ctr-home .sec-5 .wmid {
      padding: 10px; }

    .ctr-home .sec-5 .nbox {
      padding: 10px 0;
      font-size: 12pt; }

    .ctr-home .sec-5 .regbox {
      width: 100%;
      margin-left: 0px;
      padding: 10px;
      left: 0px; }

    .ctr-home .sec-5 .regform {
      margin: 0;
      padding: 0px; }

    .ctr-home .tb input[type~="text"] {
      font-size: 10pt; }

    .ctr-home .regbox .tb {
      width: calc(100% - 20px);
      margin-left: 0px; }

    .ctr-home .tb .cap {
      width: 80px;
      font-size: 12pt;
      margin-top: 10px; }

    .ctr-home .btnbox .sendbtn {
      width: 90%; }

    .ctr-home .sec-8 {
      font-size: 10pt;
      line-height: 20pt; }

    .ctr-home .sec-8 .wmid {
      height: auto;
      padding: 0px;
      padding-top: 40vw;
      padding-bottom: 20vw; }

    .ctr-home .s8t {
      width: 80%;
      left: 10%;
      top: 40px;
      /*mobile-----------------------------------------------*/ }

    .ctr-home .sec-1, .ctr-home .sec-3, .ctr-home .sec-4, .ctr-home .sec-6, .ctr-home .sec-7 {
      height: 100vh;
      min-height: 200vw; }

    .ctr-home .sec-1 {
      height: 100vh;
      min-height: 175vw;
      max-height: 200vw; }

    .ctr-home .sec-4 {
      text-align: center;
      height: 100vh;
      min-height: 270vw; }

    .ctr-home .sec-4 .mobile {
      background-size: cover;
      background-position: center bottom;
      padding-top: 5vw; }

    .ctr-home .sec-6 {
      height: 100vh;
      min-height: 155vw;
      max-height: 180vw; }

    .ctr-home .sec-7 {
      height: 100vh;
      min-height: 160vw;
      max-height: 180vw;
      /*sec-1*/ }

    .ctr-home .s1b {
      width: 49%;
      left: 25.5%;
      bottom: 5%;
      opacity: 0;
      transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s1b {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 1.2s; }

    .ctr-home .s1lb {
      width: 20%;
      right: 10%;
      top: 20%;
      opacity: 0;
      transform: translate(0%, 0%) scale(0.5, 0.5) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s1lb {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 1.4s; }

    .ctr-home .s1t {
      width: 46%;
      left: 27%;
      top: 1%;
      opacity: 0;
      transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s1t {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.9s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 0.5s; }

    .ctr-home .ms1p {
      width: 100%;
      left: 0%;
      bottom: 0%;
      opacity: 0;
      transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .ms1p {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 0.6s; }

    .ctr-home .s1t2 {
      width: 67%;
      left: 16.5%;
      bottom: 14%;
      opacity: 0;
      transform: translate(0%, -10%) scale(1, 1) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s1t2 {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.9s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 0.9s;
      /*sec-3*/ }

    .ctr-home .s3t {
      width: 100%;
      left: 0%;
      top: 2vw;
      opacity: 0;
      transform: translate(0%, 15%) scale(1, 1) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s3t {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 0.6s; }

    .ctr-home .s3b {
      width: 26%;
      left: 37%;
      top: 35vw;
      opacity: 0;
      transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s3b {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 1.1s; }

    .ctr-home .s3p1 {
      width: 100%;
      left: 0%;
      top: 55vw;
      opacity: 0;
      transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s3p1 {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 1.5s; }

    .ctr-home .s3p2a {
      width: 50%;
      left: 0%;
      top: 140vw;
      opacity: 0;
      transform: translate(10%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s3p2a {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 1.7s; }

    .ctr-home .s3p2b {
      width: 50%;
      right: 0%;
      top: 140vw;
      opacity: 0;
      transform: translate(-10%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s3p2b {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 1.9s; }

    .ctr-home .s3itm1 {
      width: 30%;
      height: 6%;
      left: 15%;
      bottom: none;
      top: 180vw; }

    .ctr-home .s3itm2 {
      width: 30%;
      height: 6%;
      left: 55%;
      bottom: none;
      top: 180vw; }

    .ctr-home .s3itm3 {
      width: 70%;
      height: 6%;
      left: 15%;
      bottom: none;
      top: 120vw;
      /*sec-4*/ }

    .ctr-home .s4a {
      width: 63%;
      left: 18.5%;
      opacity: 0;
      transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s4a {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 0.3s; }

    .ctr-home .s4b {
      width: 63%;
      left: 18.5%;
      top: 0%;
      opacity: 0;
      transform: translate(0%, 0%) scale(0.5, 0.5) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s4b {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 0.6s; }

    .ctr-home .s4bg {
      width: 100%;
      left: 0%;
      top: 0%;
      opacity: 0;
      transform: translate(0%, 0%) scale(0.5, 0.5) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s4bg {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 0.9s; }

    .ctr-home .s4btn {
      width: 63%;
      left: 18.5%;
      top: 0%;
      opacity: 0;
      transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s4btn {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 1.5s; }

    .ctr-home .s4c {
      width: 63%;
      left: 18.5%;
      top: 0%;
      opacity: 0;
      transform: translate(0%, 0%) scale(0.5, 0.5) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s4c {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 0.9s; }

    .ctr-home .s4d {
      width: 63%;
      left: 18.5%;
      top: 0%;
      opacity: 0;
      transform: translate(0%, 0%) scale(0.5, 0.5) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s4d {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 1.2s;
      /*sec-5*/ }

    .ctr-home .tb .col-city {
      width: 44%;
      display: inline-block; }

    .ctr-home .tb .col-area {
      width: 44%;
      margin-left: 8%;
      display: inline-block;
      /*sec-6*/ }

    .ctr-home .s6a {
      width: 90%;
      left: 5%;
      top: 15vw;
      opacity: 0;
      transform: translate(0%, -10%) scale(1, 1) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s6a {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 0.3s; }

    .ctr-home .s6b {
      width: 90%;
      left: 5%;
      top: 15vw;
      opacity: 0;
      transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s6b {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 0.7s; }

    .ctr-home .s6c {
      width: 90%;
      left: 5%;
      top: 15vw;
      opacity: 0;
      transform: translate(0%, 0%) scale(0.6, 0.6) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s6c {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 1s; }

    .ctr-home .s6d {
      width: 90%;
      left: 5%;
      top: 15vw;
      opacity: 0;
      transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s6d {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 1.2s; }

    .ctr-home .s6e {
      width: 90%;
      left: 5%;
      top: 20vw;
      opacity: 0;
      transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s6e {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 1.6s; }

    .ctr-home .s6date {
      width: 40vw;
      height: 10vw;
      left: 30vw;
      top: 132vw;
      opacity: 0;
      transform: translate(0%, 0%) scale(0.5, 0.5) rotate(0deg);
      transition: all 0.1s;
      transition-delay: 0s; }

    .ctr-home .animated .s6date {
      opacity: 1;
      transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
      transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      transition-delay: 1.4s; }

    .ctr-home .s6date h3 {
      font-size: 5vw;
      /*sec-7*/ }

    .ctr-home .s7r {
      width: 90%;
      height: auto;
      top: auto;
      right: 55%;
      bottom: 25vw;
      z-index: 1; }

    .ctr-home .s7p {
      left: 55%;
      width: 60%;
      height: auto;
      top: auto;
      bottom: 0vw;
      z-index: 2; }

    .ctr-home .s7s {
      width: 15vw;
      left: 5%;
      top: auto;
      bottom: 10vw; }

    .ctr-home .s7ta, .ctr-home .s7tb, .ctr-home .s7tc, .ctr-home .s7td {
      width: 90%;
      left: 5%; }

    .ctr-home .s7b {
      top: 27vw;
      width: 90%;
      left: 5%; }

    .ctr-home .sec-win .mb {
      display: block; }

    .ctr-home .sec-win .pc {
      display: none; } }

@keyframes fire {
  0% {
    opacity: 0;
    transform: scale(0, 0); }

  25% {
    opacity: 1;
    transform: scale(0.2, 0.2); }

  90% {
    opacity: 1;
    transform: scale(1, 1); }

  100% {
    opacity: 0;
    transform: scale(1, 1); } }

@keyframes firebb {
  0% {
    opacity: 0;
    filter: blur(2px) brightness(1); }

  25% {
    opacity: 0.5; }

  75% {
    opacity: 0.5; }

  100% {
    opacity: 0;
    filter: blur(7px) brightness(2);
    transform: scale(1.3, 1.3) rotate(0deg); } }

@keyframes bblr {
  0% {
    transform: translate(-60%, 0%); }

  50% {
    transform: translate(60%, 0%); }

  100% {
    transform: translate(-60%, 0%); } }

@keyframes bbtop {
  0% {
    top: 110vh; }

  100% {
    top: -30vh; } }

@keyframes bbtop {
  0% {
    top: 110vh; }

  100% {
    top: -30vh; } }

@keyframes s1bbtop {
  0% {
    top: 150%; }

  100% {
    top: -50%; } }