@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
*, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; }

html {height: 100%;}
body {  
	margin: 0 0;
	background:#fff9f9 url(../images/top_bg.png);
	background-position: top center;
  background-size: 100%;
  font-weight: 300;
	overflow-x: hidden;
	font-family: "Arial","Noto Sans TC" , sans-serif;
  line-height: 1.8;
  font-size: 1.1em;
}/*##ffeae3 #ffbf2f */

#gotop {
width:3.8em;
height:3.8em;
text-align: center;
border:1px solid #ddd;
position: fixed;
right: 10px;
bottom: 10vh;
border-radius:50%;
padding:6px 0px;
font-size:0.9em;
background: rgba(0,0,0,0.7);
border: 1px;
color: white;
cursor: pointer;
z-index: 300;
}
@media screen and (max-width:46em){
  body {  
  background:#fff url(../images/top_bgm.png);
  background-position: top center;
  font-weight:300;
}
  #gotop {
  font-size:13px;
  padding-top: 5px;
  bottom:65px;
  }
}

footer {
  position: relative;
  bottom: 0;
  color: #fff;
  padding: 8vh 8vw;
  background-color: rgba(77, 144, 254,1.0);
}
footer h2{
  font-size:1.1em;
  line-height: 1.8;
  margin: 0 0px;
  text-align: left;
}
footer h3 {
  font-size: 1em;
  margin: 0 0;
  padding: 0 0 1vh 0.8vw;
  text-align: left;
}
.win{
  width:38vw;
  display: inline-block;
  vertical-align: top;
  color: #fff;
}
.add{width:100%;color: #fff;}
.add td{padding: 5px 1px;}

footer nav{
  width: 11vw;  
  /*font-weight: 600;*/
  text-align: right;
  display: inline-block;
  vertical-align: top;
  margin: auto 0 auto 2vw;
}
footer a {
  color: #fff;
  text-decoration: none;
}
footer a:hover,
footer a:focus {
  color: #fff;
  text-decoration: none;
}
footer a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
footer nav a{
  color: #fff;
  text-decoration: none;
  line-height: 1.8;
  display: block;
  text-align: left;
}
footer nav a:hover{
  font-weight: 600;
  color: #ffff00;
}
footer span{
  background-color: #fff;
  color: rgba(77, 144, 254,1.0);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
}
.shere{  
  display: inline-block;
  font-size:2.2em;
}
footer i{
  color: #fff;
  margin: auto 1vw;
}
@media (max-width: 68em){
  .win{
  width:50vw;
  display: inline-block;
  vertical-align: top;
}
footer {
  color: #fff;
  padding: 8vh 5vw;
  background-color: rgba(77, 144, 254,1.0);
}
footer nav{
  margin: auto 0 auto 6vw;
}
.add{font-size: 14px;}
}
@media (max-width: 50em){
 .win{
  width: 100%;
  font-size: 14px;
  display: block;
}
footer {
  font-weight: 300;
  color: #fff;
  font-size:13.5px;
  padding:5vh 3vw 10vh 3vw;
  background-color: rgba(77, 144, 254,1.0);
}
footer nav{
  width: 25vw;  
  margin-top: 3vh;
  margin-left:0vw;
  vertical-align: top;
}
.shere{  
  vertical-align: bottom;
  font-size: 1.6em;
}
}

#message{
  color:#333;
  text-align: center;
  padding: 5vh 10vw;
  margin: 0 auto;
}
#message h2{
  font-size: 2em;
  line-height: 1.2;
  margin-top:50px;
  margin-bottom: 5px;
  color:#2196f3;
  font-weight: 600;
  text-align: center;
}
@media screen and (max-width:720px){
#message{  padding: 5vh 5vw;}
#message h3{  font-size: 20px;}
}
@media (max-width: 767px) {.hidden-xs {display: none !important;}}
@media (min-width: 768px) and (max-width: 991px) {.hidden-sm {display: none !important;}}
@media (min-width: 992px) and (max-width: 1199px) {.hidden-md {display: none !important;}}
@media (min-width: 1200px) {.hidden-lg {display: none !important;}}
h1,h2,h3,h4,h5,h6 {padding: 0 0;margin: 0 0;font-weight: normal;}
table {  border-collapse: collapse;  border-spacing: 0px;}
a,a:hover{text-decoration: none;}
  @media (max-width:55em) {.br_d {display: none;}}
  @media (min-width:55em) {.br_s {display: none;}}
/*tossing*/
.linefirend{
  font-size:2.5em;
  animation-name: linefirend;
  -webkit-animation-name: linefirend; 
  animation-duration: 2.5s; 
  -webkit-animation-duration: 2.5s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
@keyframes linefirend {
  0% {transform: rotate(-4deg);}
  50% {transform: rotate(4deg);}
  100% {transform: rotate(-4deg);}            
}
@-webkit-keyframes linefirend {
  0% {-webkit-transform: rotate(-4deg);}
  50% {-webkit-transform: rotate(4deg);}
  100% {-webkit-transform: rotate(-4deg);}        
}
@media (max-width: 767px){
  .linefirend{
  font-size:1em;
  animation-name: linefirend;
  -webkit-animation-name: linefirend; 
  animation-duration: 2.5s; 
  -webkit-animation-duration: 2.5s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
}

/*tossing*/
main {
  background: url(../images/bg.png);

}
.top {
  background: url(../images/bg_pix.png);

}

header{ text-align: center;}
header img {
  width: 55%;
  height: auto;
}
header .h1{
  width: 62%;
  height: auto;
  margin-top: -5vh;
}
header h2 {
  line-height: 1.6;
  font-size: 2em;
  font-weight: 600;
  color: #bf8d80;
  letter-spacing: 2px;

}
#good h1{
  position: relative;
   width: 360px;
  margin-right: auto;
  margin-left: auto;
  color: rgba(117, 34, 1,0.8);
  padding:30px 0px;
  font-size: 36px;
  line-height: 1.3;
  border:1px solid rgba(255, 106, 47,0.8);
  font-weight:600;
  border-radius: 25px;
  background-color: #0066cc;
  text-shadow:1px 1px 1px rgba(255, 255, 255,0.6);
  box-shadow:2px 2px 2px rgba(117, 34, 1,0.5);
  background: -moz-linear-gradient(-45deg, rgba(255, 231, 231, 0.66) 0%, rgba(252,205,77,0.78) 22%, rgba(252,234,187,0.78) 24%, rgba(248,181,0,0.62) 81%, rgba(252,234,187,0.82) 84%, rgba(249,184,17,0.8) 98%, rgba(251,223,147,0.8) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(255, 231, 231, 0.66) 0%,rgba(252,205,77,0.78) 22%,rgba(252,234,187,0.78) 24%,rgba(248,181,0,0.62) 81%,rgba(252,234,187,0.82) 84%,rgba(249,184,17,0.8) 98%,rgba(251,223,147,0.8) 100%);
  background: linear-gradient(135deg, rgba(255, 231, 231, 0.66) 0%,rgba(252,205,77,0.78) 22%,rgba(252,234,187,0.88) 24%,rgba(248,181,0,0.62) 81%,rgba(252,234,187,0.82) 84%,rgba(249,184,17,0.8) 98%,rgba(251,223,147,0.8) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6fceabb', endColorstr='#ccfbdf93',GradientType=1 );
}
#movie {
  background-color:rgba(255, 190, 7, 0.37);
  text-align: center;
  margin: 0 0 5vh 0;
  padding: 0.5vh 0;
}
.movie{
  width: 65vw;
  height: 80vh;
}
.good{
  background:url(../images/index01.png) 100% 0 no-repeat;
  background-position:center top;
  padding-top:30vh;
  text-align: center;
}
.good_bg{
  width:100%;  
  margin:0vh auto 10vh auto;
  background-color:rgba(255,255, 255, 0.8);
  border-radius: 2.5em;
  border:1px solid #fff;
  padding:10vh 2vw 10vh 2vw;
  margin-top: -3vh;
}
.six_bg{
  width:100%;  
  margin:-6vh auto 10vh auto;
  background-color:rgba(255, 255, 255, 0.66);
  padding:10vh 2vw 10vh 2vw;
}
#good, #six{
  font-size:1.8em;
  line-height: 1.8;
  font-weight: 600; 
  padding: 0 10vw 0 10vw;
  font-family:"Noto Sans TC" , sans-serif;
}
#six{
  padding: 0;
  font-size:1.3em;

}
#good ul,#six ul{
  margin: 0 auto 0 auto;
  padding: 0px 0px;
  text-align: center;
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
}
#good ul li,#six ul li{  
    width:45%;
    color:#b56b10;  
    letter-spacing: 1px;
    text-shadow:1px 1px 1px rgba(255,255,255,0.6);
}
#six ul li {
  width:24%;
}
 #good ul p,#six ul p{
    display: inline-block;
    font-size: 1.2vw;
    font-weight: 400;
    padding: 0;
    margin: 1vh 0;
    margin-left: 0.5vw;
    color: #bf8d80;
    
 }
 #good ul li kbd,#six ul li kbd{
    background-color:#ee3020;
    padding: 0.6vh 0.3vw;
    color: #fff;
    font-size:1.15vw;
    font-weight: 400;
    margin-right: 8px;
    font-family: "Arial","Noto Sans TC" , sans-serif;
    text-shadow:0px 0px 0px rgba(255,255,255,0.6);
 }
 #good ul li a,#six ul li a{
  font-size: 1.2vw;
  color: #0033cc;
 }
 #good img, #six img{
  width:3.5vw;
  height: auto;
  margin-bottom: 3px;
}
#six img{
  width:2.2vw;
}
#six h2 {
  position: relative;
   width: 360px;
  margin-right: auto;
  margin-left: auto;
  color: rgba(117, 34, 1,0.8);
  padding:30px 0px;
  font-size: 36px;
  line-height: 1.3;
  border:1px solid rgba(255, 106, 47,0.8);
  font-weight: 600;
  border-radius: 25px;
  background-color: #0066cc;
  text-shadow:1px 1px 1px rgba(255, 255, 255,0.6);
  box-shadow:2px 2px 2px rgba(117, 34, 1,0.5);
  background: -moz-linear-gradient(-45deg, rgba(255, 231, 231, 0.66) 0%, rgba(252,205,77,0.78) 22%, rgba(252,234,187,0.78) 24%, rgba(248,181,0,0.62) 81%, rgba(252,234,187,0.82) 84%, rgba(249,184,17,0.8) 98%, rgba(251,223,147,0.8) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(255, 231, 231, 0.66) 0%,rgba(252,205,77,0.78) 22%,rgba(252,234,187,0.78) 24%,rgba(248,181,0,0.62) 81%,rgba(252,234,187,0.82) 84%,rgba(249,184,17,0.8) 98%,rgba(251,223,147,0.8) 100%);
  background: linear-gradient(135deg, rgba(255, 231, 231, 0.66) 0%,rgba(252,205,77,0.78) 22%,rgba(252,234,187,0.88) 24%,rgba(248,181,0,0.62) 81%,rgba(252,234,187,0.82) 84%,rgba(249,184,17,0.8) 98%,rgba(251,223,147,0.8) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6fceabb', endColorstr='#ccfbdf93',GradientType=1 );
}
.line_3 {
    border-top: dashed 3px rgba(255,155,134,0.8);
    width: 45%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 38px;
}
@media screen and (max-width:65em){
  #good,#six{
    font-size:1.2em;
    line-height: 1.8;
    padding: 0 3vw 0 3vw;  
}
 #good ul p,#six ul p{
  font-size: 1.5vw;
  
 }
  #good ul li,#six ul li{
    width:42vw;
    letter-spacing: 1px;
}
  #good ul li kbd,#six ul li kbd{
  font-size:2vw;
 } 
#six h2,#good h1{
   width: 45vw;
   font-size: 8vw;  
}
 .movie{
  width: 80vw;
  height: 56vh;
}
  #good img,#six img{
    width:45px;
  }
}

@media screen and (max-width:45em){
  .good{
  background:url(../images/index01.png) 100% 0 no-repeat;
  background-size: 68%;
  background-position:center top;
  padding-top:26vh;
  text-align: center;
}
  header img {
  width: 88%;
  height: auto;
  margin:  10vh auto 2vh auto;
}
header .h1{
  width: 95%;
}
  header h2 {
    font-size: 1.5em;
  }
  #good,#six{
    font-size:1.3em;
    padding: 0 3vw 0 3vw;  
}
 #good ul p,#six ul p{
  font-size: 3.2vw;
 }
  #good ul li,#six ul li{
    font-size:1.3em;
    margin-right: auto;
    width: 100%;
    letter-spacing: 1px;
}
  #good img,#six img{
    width:45px;
 }
  #good ul li kbd,#six ul li kbd{
  font-size:3.6vw;
  padding: 3px;

 }
  #good ul li a,#six ul li a{
  font-size:3.8vw;
  color: #0033cc;
 }
 #movie {
  background-color:rgba(255, 190, 7, 0.37);
  text-align: center;
  margin: 0 0 5vh 0;
  padding: 2vh 0;
}
 .movie{
  width: 80vw;
  height: 36vh;
}
#six h2,#good h1{
   width: 80vw;  
}
.good_bg,.six_bg{
  width:100%;  
  margin:0vh auto 10vh auto;
  /* background-color: rgba(255, 255, 255, 0.0); */
  border:0px solid #fff;
  padding:1vh 2vw 0vh 2vw;
  margin-top: 0vh;
}
}
#go { text-align: center; margin: 10vh 0vw; color: #4d90fe;}
#go nav a {
  font-size:1.6em;  
  font-weight: 400;
  background-color: #76ebe6;
  margin: 2vh 1vw;
  padding:48px 15px;
  color: #fff;
  border-radius:50%;
}
#go nav a:hover{
  opacity: 0.6;
}
@media (max-width: 680px){
  #go nav a {
  font-size:1.2em; 
  margin: 2vh 0.2vw;
  padding:42px 15px;
  color: #fff;
  border-radius:50%;
}
}
#sale{
  background-color:rgba(136, 137, 211, 0.62);
  color:#fff;
  line-height: 1.5;
  text-align: center;
  padding:3vw 1vw;
  margin-top:5vh;
}
#sale ul{
  list-style-type: none;
  padding: 0px!important;
  margin: 0px!important;
  text-align: center;
  font-size: 1.45em;
  font-weight: 400;
  color:#6b5d9a;
  /*letter-spacing: -2px;*/
  font-family: "Arial Black" , "Noto Sans TC", sans-serif;
}
#sale ul li{
  display: inline-block;
  vertical-align:middle;
  background-color: #fff;
  border-radius:30px;
  padding: 5vh 2vw;
}
#sale ul li:nth-child(1){
  width: 26vw;
   margin-top: 3vh;
}
#sale ul li:nth-child(2){
  width:26vw;
   margin-top: 3vh;
  }
  #sale ul li:nth-child(3){
  width: 26vw;
   margin-top: 2vh;
  }
#sale ol{
   width: 80vw;
   margin: auto;
   margin-top: 5vh;
   border-radius:30px;
   color: #666;
   font-size: 1.2em;
   line-height: 1.8;
   text-align: left;
}
#sale h2{
  font-size:1.4em;
  font-weight: 400;
  line-height: 2;
  margin-top:0px;
  text-align: center;
  letter-spacing: 3px;
}
#sale h3{
  font-size: 1.8em;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 0px;
}
#sale p{
  font-size: 0.6em;
  line-height: 1.8;
  font-weight: 400;
  padding: 0 0;
  margin:0 0;
  /*color: #000;*/
}
#sale strong {
  color: #f00;
}

@media screen and (max-width: 765px){
#sale {
  padding: 20px;
}
#sale h2{
  font-size: 1.2em;
  letter-spacing: 0px;

}
#sale h3{
  font-size: 1em;
  }

#sale ul{
  font-size:1.35em;
  margin: auto auto;
}
#sale ul li{
  display: inline-block;
  vertical-align:middle;
  border-right: 0px solid #fff;
  border-bottom: 1px solid #fff;
}
#sale ul li:nth-child(1){
  width: 32vw;
   margin-top: 3vh;
   border-left: 0px solid #fff;
}
#sale ul li:nth-child(1),#sale ul li:nth-child(2),#sale ul li:nth-child(3){
  width:90%;
  }
#sale ol{
   width: 100%;
   padding:6vh 8vw 6vh 12vw;
   margin: auto;
   margin-top: 5vh;
   border-radius:30px;
   font-size: 1em;
   font-weight: 300;
}
.line_sa{
  width: 35%;
  border-top: 8px dashed #fff;
  margin: 10px auto 30px auto;
}
}
#go {
  padding: 0;
  margin: auto;
  text-align: center;
  
  
}
#go nav a{
  display: flex;
  flex-wrap: wrap;
}
#go nav a, #go nav a:hover {
  width: 100px;
  height: 100px;
  background-color: #5bc0de;
  color: #fff;
  border-radius: 50%;
  font-weight: 500;

}
#go nav a:hover{
  opacity: 0.8;
}
article {
  padding:5vh 2vw;
  letter-spacing: 0.5px;
  text-align: justify;
}
article h2{
  font-size: 2em;
}
/* 心得 */

#share {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-evenly;
  padding: 0 1vw;
}
#share h2 {
  text-align: center;
  width: 100%;
  margin-top: 5vh;
}
#share>figure {
  width: 24%;
  padding: 3vh 1.5vw;
  vertical-align: top;
  background-color:rgba(255, 255, 255, 0.68);
  margin: 1vh 0.1vw;
  color: #3a3d4a;
  text-align: center;

}
#share>figure:nth-child(2n) {
  background-color:rgb(225,223,255,0.85);
}
#share figure img{
  width: 68%;
  height: auto;
  border-radius: 50%;
  background-color: #ffe3e3;
}
#share h3{
  background-color: #5b389f; 
  padding: 0.2vh 0.5vw;
  color: #fff;
  margin-top: -5vh; 
  position: absolute;

}
#share a,#share a:hover {
  color:#ff9e62;
}
#share h4{
  text-align: right;
  font-size: 95%;
  font-style: italic;
  font-family: "Noto Sans TC" , sans-serif;
  color: #9b452e;
}
#share h4 span:before,
#share h4 span:after {
   content: '\f068';
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  padding:0 0.5vw;
  font-size:12px;
}
#share p {
  text-align: left;
}
#share p strong{
  color: #5857a1;
  font-weight: 600;
}
@media (max-width:65em){
  #share h4 span:before,
  #share h4 span:after {
  font-size:8px;
}
    #share>figure {
  width: 32%;
  font-size: 15px;
  vertical-align: top;
  display: inline-block;
  margin: 1vh 0.2vw;
  padding: 3vh 1.5vw;


}
#share h4{ 
  font-weight: 400;
}
}
@media (max-width: 50em){
  #share>figure {
  width: 48%;
  padding:1vh 1.5vw;

}
}
#about{
  /*background-color:rgb(255 140 100 / 72%);*/
  text-align: center;
  font-size: 1.1em;
  letter-spacing: 1px;
  width: 100%;
  padding:0vh 0vw 10vh 0vw;
  border-radius:3em;
  margin:auto;
  margin-top: -1.5vh;
 
}
#about h1{
  font-size: 15px;
  padding:1vh 0;
  margin: 0 0 5vh 0;
  color: #666;
  border-top: solid 1px #666;
  border-bottom: solid 1px #666;
  letter-spacing:1em;
  font-weight: 400;
}
#about h2{
  font-size: 18px;
  padding:2vh 0;
  margin:5vh 0;
  /* color: #fff #ffe1d6 ; 
   background: url(../images/bg.png); */
  color: #764fb0;
  letter-spacing:1em;
  font-weight: 400;
  border-radius: 1px;
  
}
#about h3,#about h4,#about h5{color: #ad81cf;font-weight: 500;}
#about h3{
 margin-bottom: 0;
 padding: 0;
 font-family: "Noto Sans TC" , sans-serif;
 font-size: 1.5em;
  display: inline-block;
  letter-spacing:2px;
}
#about h4{
  margin:0;
  padding: 0;
  font-size: 1.2em;
  letter-spacing: 1px;
  padding-left: 2vw;
  letter-spacing:0px;
  color: #764fb0;

}

#about h4 span { letter-spacing: 2vw;font-size: 80%;}
#about h4 span:before,
#about h4 span:after {
   content: '|';
   padding: 0 1vw;

}
#about h5{
  font-size: 1em;
  padding-top: 5vh;
}
#about h6{
  margin:0;
  padding: 0;
  text-align: left;
}
#about h6 a,
#about h6 a:hover{
  color: #666;
}
#about p{
  text-align: left;
  margin:5vh auto;
  color: #666;
  padding: 0 0.3vw;
  /* text-indent:2em */
} 
#about p ins {
  color: #764fb0;
  font-weight: 400;
}
#about img{
  width: 100%;
  height: auto;
  background-color:#e1e3ff;
  border-radius: 50%;
  
}

#about ul {
  color: #666;
  text-align: left;
  padding: 0 0.3vw 0 3vw;
  margin:0 0;
  list-style: disc;

}
#about ul li {
  padding: 2vh 0;


}
#about ul ul li {
  list-style: decimal;
}
#about ul ul li {
  padding: 0;
}
#about ul strong {
  color: #764fb0;
  font-weight: 500;
  font-size: 108%;
}
#about a,#about a:hover {
  color: #1240cb;
}
small {
  font-size: 80%;
  opacity: 0.68;
}
.name_st{
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: space-between;
  padding:0vh 6vw 5vh 6vw;

}
.name_st>div {
  width: 68%;
}
.name_st>div:first-child{
  width: 25%;
}
.name_st p {
  margin: 2vh 0 1vh 0;
}
#about strong {
  font-weight: 500;
  color: #764fb0;
  border-bottom: solid 1px;
}
#about p span,#about ul span{
  color: #452d5c;  
  font-weight: 400;
}
#about iframe {
  width: 100%;
  height: 360px;
}
#about>section:nth-child(2n){
  background:  rgba(255, 255, 255, 0.9);
  width: 100%;
  padding:8vh 6vw 10vh 6vw;
  border-radius:5em;
  margin-bottom: 3vh;
}
@media (max-width: 55em){
  main {
      padding: 0;
      margin-bottom: 5vh;
    }

#about {
  font-size: 1.12em;
}
#about h2,#about h3{
  letter-spacing: 0em;

}
#about h4{
  font-size: 1.1em;
}
#about img{
  width:58%;
  height: auto;
}
#about ul {
  padding: 0 0 0 22px;

}
#about ul li {
  padding: 2vh 0;

}
#about h1{
  letter-spacing:0.5em;
}
#st_bg{
  width: 100%;
  padding:5vh 0vw 10vh 0vw;
  border-radius:0px;
  margin-top: 0vh;


}

#st_bg iframe {
  width: 100%;
  height: 268px;
}
#about>section:nth-child(2n){
  background:  rgba(255, 255, 255, 0.8) ;
  width: 100%;
  padding:3vh 6vw 10vh 6vw;
  border-radius:0em;
}
.name_st{
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding:0vh 3vw 5vh 3vw;

}
.name_st>div,.name_st>div:first-child{
  width: 100%;
}
}
.movie_bg{
  background-color:rgba(255, 97, 97, 0.3);
  padding-top: 2vh;
  padding-bottom: 2vh;
  text-align: center;
}
.movie_bg h3{
  color: #fff;
  line-height: 2;
  font-size: 1.1em;
}
.movie {
  display: inline-block;
  width: 32vw;
  height: auto;
  margin: 1vh 0.2vw;
  vertical-align: top;
  
}
.movie_w {
  width: 32vw;
  height: 42vh;
  margin: auto auto;
  border:1px solid rgba(255,255,255,0.9)
}
.movie img  {
  width: 25.5vw!important;
  height: auto;
  margin: auto auto;
  border:1px solid #1dcd00
}
.movie img:hover {
  opacity: 0.6;
}
.movie_ans {
    width:25.5vw;
    height:38vh;
     margin: 1vh 1vw;
    display: inline-block;
    border: 8px solid #fff;
    vertical-align: middle;
    background-color: rgba(0,0,0,0.85);
    color: #fff;
  }
.movie_ans i {
      font-size:5em;
      color: #f00;
    }
@media (max-width:55em){

.movie_bg{
  padding-bottom: 0vh;
}
.movie {
  display: inline-block;
  width: 80vw;
  height: auto;
  margin: 1vh 1vw;
  vertical-align: top;
  
}
.movie_w {
  width: 80vw;
  height: 36vh;
  margin: auto auto;
  border:1px solid #1dcd00
}
.movie img  {
  width: 78vw!important;
  height: auto;
  margin: auto auto;
  border:2px solid #1dcd00
}
.movie img:hover {
  opacity: 0.6;
}
}
  @media (max-width:50em){
    .movie_ans {
    width:80vw;
    height: 36vh;
    margin: 15px auto;
    display:block;
  }
  }
  #go { text-align: center; margin: 10vh 0vw; color: #4d90fe;}
#go nav a {
  font-size:1.6em;  
  font-weight: 400;
  background-color: #76ebe6;
  margin: 2vh 1vw;
  padding:48px 15px;
  color: #fff;
  border-radius:50%;
}
#go nav a:hover{
  opacity: 0.6;
}
@media (max-width: 680px){
  #go nav a {
  font-size:1.2em; 
  margin: 2vh 0.2vw;
  padding:42px 15px;
  color: #fff;
  border-radius:50%;
}
}

.logock h6 {
  margin: 0;
  padding: 0;
}
.logock{
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom: solid 1px #ffffffe7;
    color: #099587;
    letter-spacing: 1px;
    font-weight: 400;
    font-size: 1.5em;
    position: fixed;
    top: 0;
    left: 0;
    padding:3px 0 1px 2vw;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
    z-index: 99;
}


 #socail_icon {
    padding: 0;
  }
  #socail_icon_box a {
    background-color: #1f8bd9;
  }
  #socail_icon a::before {
    content:none;
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      padding-right: 0;
  }
  @media screen and (max-width: 575px) {
    #socail_icon_box {height: 8vh;}
    #socail_icon_box a.bg_line {padding: 0.5em 0.1em 0.4em;}
    #socail_icon {margin-top: 0; background-color: rgba(54, 50, 0, 0)}
    #socail_icon_box a.w100 img {
        pointer-events: none;
        display: block ;
        position: absolute; 
        z-index: 10; 
        width: 40px; 
        height: 40px; 
        top: 18px!important;
        left: 10%!important;
    }
    #socail_icon_box a.bg_line {
        padding: 0.2em 0.15em 0.2em !important;
    }
    #socail_icon_box {
         height: 6.5vh !important;
    }
}

#talk {
    margin: 3vh 0;
    padding: 5vh 5vw;
}
#talk ul {
    display: flex;
    display: -webkit-flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding-bottom:15vh;
    background: url(https://www.easywin.com.tw/AD/114/0206/img/talk.png)no-repeat bottom left;
    background-size:20%;
    color: #0c6252;
}
#talk ul li:nth-child(2) {
    width: 62%;
}
#talk ul li:first-child {
    width: 22%;
    
}
#talk h3 {
    font-size: 1.85em;
    line-height: 1.5;
}
#talk .countySelect, #talk .storeSelect {
    font-size:1.1em;
    color: #666;

}

@media screen and (max-width:65em) {


   #talk ul {
        padding-bottom:18vh;
        background: url(https://www.easywin.com.tw/AD/114/0206/img/talk.png)no-repeat bottom left -3vw;
        background-size:35%;
    }
    #talk ul li:nth-child(2) {
        width: 68%;
    }
    #talk h3 {
        font-size: 2em;
        line-height: 1.5;
    }

}
@media screen and (max-width:40em) {
    #talk ul {
        padding-bottom:6vh;
        background: url(https://www.easywin.com.tw/AD/114/0206/img/talk.png)no-repeat bottom left -5vw;
        background-size:45%;
    }
    #talk ul li:nth-child(2) {
        width: 66%;
    }
    #talk h3 {
        font-size: 1.25em;
        line-height: 1.5;
    }
    #talk h2 {
        font-size:1.35em;
    }
}
footer {
  background: #1aa696;
  color: #fff;
  padding: 5vh 5vw;

}
footer ul {
   display: flex;
    display: -webkit-flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
}
footer ul li {
  width: 20%;
  text-align: center;
    font-size: 1.35em;
}
footer ul li a, footer ul li a:hover {
  color: #fff;
}
  @media screen and (max-width: 55em) {
    footer {
  background: #1aa696;
  color: #fff;
  padding: 5vh 1vw 8vh;

}
    footer ul li {
  width: 32%;
  text-align: center;
    font-size: 1em;
}
  }
#share h2 img,#sale h3 img{
   width:250px;
   font-size: 2em;
   
}
@media screen and (max-width: 55em) {

#share h2 img,#sale h3 img{
   width:150px;
   
}
}
  #leam {
    background:rgba(62, 62, 176, 0.7);
    text-align: center;
    border-radius: 1em;
  }
  #leam p ,#leam h5 {
    font-size: 1.2em;
  }
  #leam p {
    color: #fff;
    padding-bottom: 3vh;
  }
  
  #leam h3,#leam h4 {
    color: #fff;
    font-size: 2em;
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 1vh;
    padding-bottom: 2vh;
    text-align: center;
  }
  #leam h4 {
    margin-bottom: 3vh;
  }
  #leam h4 span{
    border-radius: 15px;
    padding:0.8vh 1vw;
    margin-bottom: 0px;
    font-size:108%;
    background-color: #ff7b9f;
  }
  #leam h4 span:nth-last-child(3){background-color: #ff355e;}
  #leam h4 span:nth-last-child(2){background-color: #1ed3ab;}
  #leam h4 span:nth-last-child(1){background-color: #b89dec;}
  #leam>section {
    display: flex;
    display: -webkit-flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  #leam table {
    width: 50%;
    background-color: #fff;
    border:solid 3px #fff;
    table-layout: fixed;
    color: #6c6391;
    margin-bottom: 5vh;
    line-height: 1.5;
  }
  #leam table caption {
    color: #fff;
    font-size: 1.25em;
    padding: 1vh 1vw;
  }
  #leam table:nth-child(2) {
    background-color: #fff2ea;
  }
  #leam table td ,#leam table th{
    padding: 8px 6px;
    border: solid 1px #6c6391;
    border-top-width: 0px ;
    border-right-width: 0px;
  }
  #leam table ul {
    padding: 2vh 0 3vh 3vw;
    margin: 0;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    list-style: disc;
  }
  #leam table ul li {
    width: 45%;
    text-align: left;
  }
  #hot {
     background:rgba(62, 62, 176, 0.7);
     color: #fff;
     padding: 3vh 1vw;
     text-align: center;
    
  }
  #hot section>div {
     display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  #hot dl {
    width: 31%;
    margin: auto 1vw;
     display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;

  }
  #hot dt{
    width:30%;
    font-size: 1.25em;
    margin:2vh 0vw 3vh;
   
  }
  #hot dt h5 {
    width: 100px;
    height: 100px;
    font-size: 1em;
    line-height: 1.26;
    font-weight: 300;
    padding-top:22px;
    margin: 0;
    text-align: center;
    border: solid 1px;
    border-radius: 50%
  }
  #hot dd{ 
    width: 60%;
    text-align: left;
    padding:  0 2vw 3vh 0;
    margin: 0;
    font-size: 95%;
  }
  #hot dd span {
    color: #ffe100;
  }
  #hot a,  #hot a:hover {
    color: #fff;
  }
  @media screen and (max-width: 55em) {

    #leam {
      background:#4c4276;
      text-align: center;
      padding: 5vh 5vw;
    }
    #leam h3 {
      font-size: 1.5em;
    }
    #leam h4 {
      font-size: 1.25em;
    }
    #leam h4 span{
      border-radius: 15px;
      font-size:100%;
      padding: 1vh 3vw;
    }
    #leam table {
      width: 100%;
      margin-bottom: 3vh;
    }
    #leam table caption {
      color: #fff;
      font-size: 1.15em;
      padding: 1vh 1vw;
    }

    #leam table td ,#leam table th{
      padding: 8px 2px;
      font-size: 0.95em;
    }
    #leam table ul {
      padding: 2vh 0 3vh 8vw;
      margin: 0;
    }
    #leam table ul li {
      width:100%;
      text-align: left;
    } 
    #hot dl {
      width: 100%;
      display: flex;
      display: -webkit-flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      border-bottom: dashed 1px
  
    }
    #hot dt{
      width:30%;
      font-size: 1.25em;
      margin:2vh 2vw 3vh;
     
    }
    #hot dt h5 {
      width: 100px;
      height: 100px;
      font-size: 1em;
      font-weight: 200;
      padding-top:26px;
      margin: 0;
      text-align: center;
  
      border: solid 1px;
      border-radius: 50%
    }
    #hot dd{ 
      width: 65%;
      padding:  3vh 1vw 3vh;
      font-size: 90%;
    }
  }