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

body {  
  margin: 0 0; 
  background:#f4e6c9 url(img/bg.jpg) no-repeat;
  background-position: top center;
  font-weight: 300;
  overflow-x: hidden;
  font-family: "Arial","Noto Sans TC" , sans-serif;
  /*#fdf07a */
}
#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;

}
#hot {
width:5em;
text-align: center;
border:1px solid #ddd;
position: fixed;
right: 10px;
bottom:145px;
border-radius:10px;
padding: 5px 0px;
font-size: 0.8em;
background: #fff;
border: 2px solid #ff0000;
color: #ff0000;
cursor: pointer;
z-index: 200;

}
@media screen and (max-width:46em){
  #gotop {
  font-size:13px;
  padding-top: 5px;
  bottom:65px;
  }
  body {  
    font-weight: 300;
}
#hot {
  font-size:13px;
  bottom: 160px;
  }
}

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: 2.2em;
  line-height: 1.2;
  margin-top:50px;
  margin-bottom: 5px;
  color:#0033cc;
  font-weight: 600;
  text-align: center;
}
table {border-collapse: collapse;border-spacing: 0;}
@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;}}
a {text-decoration: none;}
.red {color: #F00;font-weight: 600; font-family: "Arial Black" , "Noto Sans TC", sans-serif;}
.r_bg{
  background-color: #f00;color: #fff;padding: 5px 10px;border-radius: 20px;
}
.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropup .dropdown-menu{margin-top:0;margin-bottom:.125rem}.dropup .dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropright .dropdown-menu{margin-top:0;margin-left:.125rem}.dropright .dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-bottom:.3em solid transparent;border-left:.3em solid}.dropright .dropdown-toggle:empty::after{margin-left:0}.dropright .dropdown-toggle::after{vertical-align:0}.dropleft .dropdown-menu{margin-top:0;margin-right:.125rem}.dropleft .dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:""}.dropleft .dropdown-toggle::after{display:none}.dropleft .dropdown-toggle::before{display:inline-block;width:0;height:0;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropleft .dropdown-toggle:empty::after{margin-left:0}.dropleft .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid #e9ecef}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:#16181b;text-decoration:none;background-color:#f8f9fa}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#007bff}.dropdown-item.disabled,.dropdown-item:disabled{color:#6c757d;background-color:transparent}.dropdown-menu.show{display:block}

/*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*/
.top {
  background-image: url(img/bg.png) repeat;
  background-position: center;
  background-repeat: no-repeat;
}
header {
  text-align: center;
  
}
.titile_img{
  width:55vw;
  height:auto;
  margin:auto auto;
  margin-top:5vh;

}
.t1_img{
  width:28vw;
  height:auto;
  position: relative;
  margin-top: -5vh;
  z-index: 3;
}
header nav{
  margin-top:-2vh;
  font-size: 1.52em;
  z-index: 99;
  position: relative;
}

header nav a {
  color: #fff;
  text-decoration: none!important;
  padding: 10px;
   border: 1px solid #fff;
   border-radius: 5px;
   margin:auto 5px ;
   background-color:  #2d95ff;
}
header nav a:hover{
  opacity: 0.6;
  font-weight: 300;
}
@media (max-width:720px){
  .titile_img {
  width:68vw;
  height:auto;
  margin:60px 0px 0px 0px;
}
}
@media (max-width:460px){
  .titile_img {
  width:92vw;
  height:auto;
  margin:60px 0px 0px 0px;   
}
.t1_img{
  width:85vw;
  height:auto;
  position: relative;
  margin-top: -2vh;
}
header nav{
  font-size: 1.6em;
}
header nav a{
     margin:auto 5px;
     font-weight: 300;
     line-height: 3;
}
}
header h1 {
  font-size: 2em;
  font-weight: 400;
  line-height: 2;
  text-align: center;
  border-radius: 2em;
  letter-spacing: 1px;

}
header p{
  font-size: 1.2em;
  line-height: 1.5;
  text-align: center;
  font-weight: 500;
  letter-spacing: 1px;

}
@media (max-width: 980px){
header h1{
  font-size: 32px;
  line-height: 1.5;

}
header p {
	font-size: 16px;
}
header h1,header p {
	margin: 0 0;
	line-height: 1.8;
}
}
#happy{
  background:url(img/bg2.png);
  background-repeat:repeat-x;
  background-position:top center;
  /*background-size: cover;*/
  text-align: center;
  font-size: 1em;
  line-height: 1.8;
  color: #1dcd00;
  margin-top: -10vh;
}
.titleimg{
  width: 26vw;
  height: auto;
  text-align: center;
  padding-top:20vh;
}
#happy p{
  font-family: "Baloo" ,"Noto Sans TC", sans-serif;
  font-weight: 600;
  font-size: 1.6em; 
  color:#1dcd00;
}
@media (max-width:55em){
#happy{
  margin-top: -20vh;
}
.titleimg{
  width: 76vw;
  height: auto;
  margin-top: 0vh;
  text-align: center;
}
}
#one{
  text-align: left;
  position: relative;
  padding:6vh 2vw 10vh 2vw;
  font-size: 1.15em;

}
#op{
  background: rgba(253, 225, 145, 0.58) ;
  text-align: center;
  padding:10vh 0vw 10vh 0vw;
  font-size: 1.15em;
  margin-top: -12vh;

}
.one_bg{
  background-color: rgba(255,255,255,0.65);
  padding: 8vh 2vw 10vh 2vw;
  border-radius:3.8em;
  margin-top: -6vh;
  text-align: center;
}
.one img{
  width: 100%; 
  height: auto;
}
.one,.op{
  width: 20vw;
  height: auto;
  margin: 1vh 1vw;
  display: inline-block;
}
.op {
  background-color: rgba(255, 118, 40, 0.32);
  border:solid 5px rgba(255, 255, 255, 0.32);
  border-radius: 2em;
  padding: 2vh 2vw;
  text-align: left;
  color: #fff;


}
.super {
  width:76%;
  height: auto;
  margin: auto;
  padding-top: 10vh;
  padding-bottom: 5vh;
  color: #9A5513;
}
.super strong {
  color: #09f;
  font-weight: 400;
}
.super h3 {
  text-align: left;
}
.super ul {
  background-color: rgba(255, 255, 255, 0.62);
  list-style: none;
  margin: 0 0;
  padding: 5vh 5vw;
  border-radius: 2em;
  border:1px solid  rgba(255, 118, 40, 0.32);
  line-height: 1.8;

}
.super ul li {
  text-align: left;
}
#one h2,#op h2,#five h2,#seven h2,#food_exma h2,#seven h2{
  letter-spacing: 3px;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 1.45;
}
#one h3,#five h2,#seven h2,#food_exma h2,#five h3,#seven h2  {color: #09f;}
#op h3{border-bottom: dashed 1px;padding-bottom: 2vh;}
#one p{color:#333;}
#one h3,#op h3,#five h3{
  font-size: 1.25em;
  font-weight: 400;
  text-align: center;
}
#one p,#op p,#five p{
  font-weight: 300;

}
#one p strong,#five p strong{
  border-bottom: solid 1px #eee;
  padding-bottom: 1vh;
  letter-spacing: 2px;
  font-weight: 400;
  font-size: 1.2em;
}
#five{
  text-align: left;
  position: relative;
  padding:8vh 12vw 5vh 12vw;
  font-size: 1.15em;

}

.five_bg{
  background-color: rgba(255,255,255,0.65);
  padding: 8vh 6vw 10vh 6vw;
  margin-top:8vh;
  border-radius: 3em;
  text-align: center;
}
#five ul {
  text-align: left;
  line-height: 1.8;
  color: #666;
}
#five ul li {
  padding-bottom: 1vh;
  padding-top: 1vh;
  border-bottom: dashed 2px #ffd9d8;
}
.vs {
  width: 100%;
  color: #666;
  text-align: center;
  border:solid 2px #ffd9d8;
  background-color: #fff;

}
.vs td,.vs th{
  padding: 1vh 2vw;
  border-right: solid 1px #ffd9d8;
  border-bottom: solid 1px #ffd9d8;

}
.vs th {
  background-color: #ffd9d8;
  font-weight: 400;
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
}
.vs td:nth-last-child(1){
  border-right: solid 0px;
  color: #f00;
  font-weight: 400;
}
.vs tr:nth-last-child(1) td{
    border-bottom: solid 0px #ffd9d8;
}
.vs td:nth-child(1) {
  background-color: #ffd9d8;
  border-bottom: solid 1px #fff;

}
@media screen and (max-width: 765px){
#one{
  padding:6vh 8vw 10vh 8vw;
  font-size: 1.05em;
  text-align: center;

}
#op{
  text-align: center;
  padding:20vh 8vw 10vh 8vw;
  font-size: 1.15em;
  margin-top: -20vh;

}
.one_bg{
  padding: 5vh 3vw 10vh 3vw;
  border-radius:3em;
  margin-top: -6vh;
  text-align: center;
}
#op h2,#one h2.,#five h2,#seven h2{
  line-height: 1.8;
}
#five h2,#seven h2{
  font-size: 1.2em;
  letter-spacing: 0;

}
#food_exma h2{
  letter-spacing: 0;
}
.one,.op{
  width: 100%;
  height: auto;
  margin: 1vh auto;
  display: block;
}
.op {
  background-color: rgba(255, 118, 40, 0.32);
  border:solid 5px rgba(255, 255, 255, 0.32);
  border-radius: 2em;
  padding: 2vh 5vw;
  text-align: left;
  color: #fff;


}
.super {
  width: 100%;
  height: auto;
  margin: auto;
  margin-top: 10vh;
  padding-top:0vh;
  padding-bottom: 5vh;

}
.super strong {
  color: #09f;
  font-size: 112%;
  font-weight: 400;
}

.super ul {
  padding: 5vh 5vw; 
  border-radius: 2em;
  line-height: 1.6;
}
.super ul li {
  text-align: left;
  padding-bottom: 3vh;
}
.super ul li:nth-last-child(1) {
  padding-bottom: 0vh;
}
#one h2,#op h2{
  letter-spacing: 3px;
  font-weight: 400;
  font-size: 1.2em;
}
#one h3{color: #09f;}
#op h3{border-bottom: dashed 1px;padding-bottom: 2vh;}
#one p{color:#333;}
#one h3,#op h3{
  font-size: 1.25em;
  font-weight: 400;
  text-align: center;
}
#one p{
  font-size: 15px;

}
#one p strong {
  border-bottom: solid 1px #eee;
  padding-bottom: 1vh;
  letter-spacing: 2px;
  font-weight: 400;
  font-size: 1.2em;
}
#five{
  padding:8vh 5vw 5vh 5vw;
  font-size: 15px;
}
#five ul{
  padding: 0 0 0 21px;

}
.super ul li {
  line-height: 1.5;
  margin-bottom: 2vh;
}
.five_bg{
  padding: 6vh 8vw 5vh 10vw;
  margin-top:5vh;
  border-radius: 2em;
}
}
#sale{
  background: #ffc556 url(img/bg.png) repeat;
  background-position: top center;
  color: #925514;
  line-height: 1.8;
  text-align: left;
  padding:6vh 12vw 10vh 12vw;
  font-size: 1.15em;
}
.sale_bg{
  background-color: rgba(255,255,255,0.65);
  padding: 12vh 6vw;
  border-radius:3.6em;
  margin-top: -15vh;
}
#sale ul {
	text-align: left;  
  list-style: none;
}
#sale ul li{
  border-bottom: 1px dashed #ffc556;
  padding: 3vh 0;
  color: #925514;
}
#sale ul li:nth-last-child(1){
  border-bottom: 0px dashed #ffc556;
}
#sale ul img {
  width:60px;
  height: auto;
  padding-right: 1vw;
}
#sale ul ol img {
  width:45px;
  height: auto;
  padding-right: 1vw;
}
#sale ul ol {
  padding: 0 0 0 85px;
  list-style: none;
}
#sale ul ol li{
  border-bottom: 0px dashed #ffc556;
  padding: 0 0;  
}
#sale h2{
  font-size:1.2em;
  font-weight: 400;
  line-height: 2;
  margin-top:0px;
  text-align: center;
  letter-spacing: 3px;
  color: #925514;
}
#sale h3{
  font-size: 1.5em;
  line-height: 2;
  margin: 0 0;
  font-weight: 300;
  color:#ffb65f;
  display: inline-block;
}
#sale ul p,#sale ul h4{
  padding: 0 0 0 85px;
  margin:0 0;

}
#sale ul p span {
  color: #1dcd00;
  font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
  font-weight: 800;
  font-size: 1.25em;
  margin-left: 0.3vw;
}
#sale strong {
  color: #f00;
}
@media screen and (max-width: 765px){
#sale{
  padding:6vh 3.8vw 10vh 3.8vw;
  font-size: 1em;
}
#sale ul img {
  width:35px;
  text-align: center;
}
#sale ul ol img {
  width:25px;
  height: auto;
  padding-right: 0.6vw;
}
#sale ul{
  padding:6vh 0vw;
  list-style: none;
}
#sale ul li{
  border-bottom: 1px dashed #ffc556;
  padding: 3vh 0;
  color: #666;
}

#sale ul ol {
  padding: 0 0 0 0px;
}
#sale h2{
  letter-spacing: 0px;
}
#sale h3{
  display: block;
  font-size:1.5em;
  line-height: 1.5;
}
#sale ul p{
  font-weight: 300;
  padding: 0 0 0 0px;
  display: block;

}
#sale ul h4{
  display: block;
  margin: 0 0;
  font-weight: 300;
}
}

#student{
  color:#666;
  text-align: center;
  padding: 0vh 12vw;
  margin: 0 auto;
}
#student h2 {
    font-size:2em;
    color:#09f;
  font-weight: 400;
  line-height: 2;
  text-align: center;
  letter-spacing: 5px;
}
.student_bg {
  width: 100%;
  margin:5vh auto;
  font-size:1.2em;
  line-height: 1.8;
  background-color: rgba(255, 255, 255,0.65);
  padding:12vh 5vw;
  border: 1px solid #fff;
  border-radius:3em;
}
#student ul {
  margin: 0px 0px;
  padding: 0 0 20px 0px;
  list-style-type: none;
}
#student ul li {
  margin-bottom: 10px;
  text-align: left;
}

.stimg {
  border-radius: 50%;
  width:150px;
  height:150px;
  margin-left:30px;
  vertical-align: top;
  background-color: rgba(253, 173, 156,0.2);
}
#student h3 {
  font-size:1.5em;
  color: #09f;
  line-height: 1.5;
  font-weight: 400;
  margin:0px 10px 0px 0px;
  display: inline-block;
  text-align: left;

}
#student h3 span {
  background-color: #09f;
  color: #fff;
  padding: 1vh 1vw;
  border-radius: 3em;
  margin: 0.5vw;
  font-size: 68%;
  letter-spacing:2px;
}
#student p{
  text-align: left;
}
#student strong {
  color: #09f;
}
#student a{
  color: #1dcd00;
  font-weight: 400;
  font-size: 1.2em;
}
.name_st{
  width: 72%;
  margin-left:35px;
  display: inline-block;

}
.how{
  width: 100%;
  padding-top: 5vh;
  margin-right: right;
  margin-left: auto;
}
@media (max-width: 68em){
  #student{
  text-align: center;
  padding: 0vh 5vw;
  margin: 0 auto;
}
.student_bg {
  width: 100%;
  font-size:1em;
  line-height: 1.8;
  padding:10vh 3vw;
  border: 1px solid #fff;
  border-radius:2em;
  font-weight: 300;
  margin-top: 0;
}
#student ul {
  margin: 0px 0px;
  padding: 0 0 20px 0px;
  list-style-type: none;
}
#student ul li {
  margin-bottom: 10px;
  text-align: left;
}


  #student h3 {
  font-size:22px;
  text-align: center;
  margin: 0px 0px 0px 0px;
  display: block;

}
  #student h3 span {
    display: block;
    letter-spacing: 0;
  }
 #student h4{
  font-size: 18px;

}
.stimg {
  width:150px;
  height:150px;
  margin-left:0px;
  margin-bottom: 20px;
}
.name_st{
  width: 90%;
  margin-left:0px;
  display: inline-block;
  text-align: center;
/*margin-left: 20px;
margin-top: 20px;*/
}
.how{
  width: 100%;
}
}
.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;
}
#try{
  background-color: rgba(253, 234, 141, 0.42);
  text-align: center;
  padding: 15vh 3vw;
  font-size: 1em;
  line-height: 1.8;
  color: #67390b;

}
#try h2{
  font-size: 1.6em;
  padding-bottom: 1vh;
  margin-top: 15vh;
  margin-bottom: 0.5vh;
  font-weight:400;
  text-align: left;
  border-bottom: solid 1px rgba(255,255,255,0.6);

}
#try h3{
  margin: 0 0;
  line-height: 2;
  font-weight: 400;
  font-size: 1em;
  text-align: left;
}
#try p {
  margin: 0 0;
  padding-left: 1.8vw;
  font-size: 85%;
  text-align: left;
}
#try h4{
  font-family: "Baloo" ,"Noto Sans TC", sans-serif;
  font-weight: 600;
  font-size: 1.2em; 
  text-align: center;
  margin-top: 0;
}
#try h5{
  font-size: 2em;
  padding: 0 0;
  margin: 0 0;
  text-align: center;
  font-weight:400;

}
#try .movie a,#try .movie a:hover{
	background-color: #f00;
	color: #fff;
	padding: 1vh 1vw;
	font-weight: 400;
	border-radius: 10px;
}
#try ul {
  padding: 0 0;
  margin: 0 0;
  list-style: none;
  text-align: center;
}
#try ul li{
  display: inline-block;
  margin: 0vh 1.2vw 5vh 1.2vw;
  width: 5.5em;
  height: 5.5em;
  line-height: 1.3;
  background-color:#1dcd00;
  padding-top: 1.6em;
  color: #fff;
  font-family: "Baloo" ,"Noto Sans TC", sans-serif;
  border-radius: 50%;
  font-weight: 400;
}
#try ul li a,
#try ul li a:hover {
  color: #fff;
}
#try ul li:hover{
 opacity: 0.6; 
 font-weight: 600;   
}

.movie {
  display: inline-block;
  width: 22vw;
  height: auto;
  margin-top: 1vh;
  vertical-align: top;
  
}
.movie_w {
  width: 22vw;
  height: 28vh;
  margin: auto auto;
  border:1px solid rgba(255,255,0,0.3);
}

@media (max-width:55em){
.movie_bg{
  padding-bottom: 0vh;
}
.movie {
  display: inline-block;
  width: 80vw;
  height: auto;
  margin:2vh 1vw;
  vertical-align: top;
  
}
.movie_w {
  width: 80vw;
  height: 26vh;
  margin: auto auto;
}
#try{
  padding: 6vh 0vw;
  font-size: 1em;
  line-height: 1.8;
  text-align: center;
}
#try h2,#try p{
	margin-top:2vh;
  text-align: center;
}

#try h3{
  padding: 0 0;
  margin:0 0;
}
#try h5{
  margin:0 0;  
  font-size: 1.4em;
}

#try ul li{
  display: inline-block;
  margin: 0vh 1vw 5vh 1vw;
}
}
#good {
  background-color: rgba(163, 72, 42, 0.53);
  padding: 2vh 5vw 0vh 5vw;
  color: #fff;
}
@media (max-width:55em){
  #good {
  background-color: rgba(163, 72, 42, 0.53);
  padding: 2vh 12vw 0vh 12vw;
  color: #fff;
  text-align: center;
}
}
#food_exma {
  background-color: rgba(255, 186, 191, 0.52);
  margin-bottom: 5vh;
  padding:10vh 0vw;
  color: #666;
  text-align: center;
  font-size: 1.1em;
  line-height: 1.8;
  font-weight: 200;
}
#food_exma h3 {
  font-weight: 400;
  color: #07f;
  font-size: 1.5em;
}
#food_exma h5{
  font-size: 0.8em;
  font-weight: 400;
  margin: 0 0;
  color:#09f;

}
#food_exma a,
#food_exma a:hover{
  color: #007fff;
}
#food_exma a:hover{
  font-weight: 600;
  opacity: 0.6;
}

.exma {
  width: 31vw;
  padding: 2vh 0.5vw;
  display: inline-block;
  vertical-align: top;
  margin: 0 auto;

}
.exma strong {
  background-color: #ff0;
  padding: 2px 0px;
  margin-left: 3px;
  font-weight:500;
}
.exma_c {color:#38cef0;font-weight: 400;}
.exma_f {color: #007fff;font-weight: 400;}
.exma_n {color: #ffbcbc;font-weight: 400;}
.exma_c_bg {background-color:#38cef0;color: #fff;font-size: 120%;line-height: 1.5;}
.exma_f_bg {background-color: #007fff;color: #fff;font-size: 120%;line-height: 1.5;}
.exma_n_bg {background-color: #ffbcbc;color: #fff;font-size: 120%;line-height: 1.5;}
.exma_tb {
  width: 100%;
  background-color: #fff;
  border: solid 3px #fff;

}
.exma_tb td,.exma_tb th {
  padding: 2vh 1vw;
  border-right: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
}
.exma_tb th {
  font-weight: 400;
}
.exma_tb td:nth-last-child(1){
  text-align: left;
}
.exma_tb td:nth-last-child(1){
  border-right: solid 0px #ddd;
}
.exma_tb tr:nth-last-child(1) td{
  border-bottom: solid 0px #ddd;
}
@media (max-width:55em) {
 .exma {
  width:100%;
  margin:0vh auto;
  display:block;
}
}
#friend {
  text-align: center;
  color:#1dcd00;
  font-weight: 400;
}
#friend p,#friend ul {
  display: inline-block;
}
#friend ul {
  padding: 0 0;
  margin: 0 0;
  list-style: none;
  text-align: center;
}
#friend ul li{
  display: inline-block;
  margin: 0vh 1.2vw 5vh 1.2vw;
  width: 5.5em;
  height: 5.5em;
  line-height: 1.3;
  background-color:#1dcd00;
  padding-top: 1.6em;
  color: #fff;
  font-family: "Baloo" ,"Noto Sans TC", sans-serif;
  border-radius: 50%;
  font-weight: 400;
}
#friend ul li:hover{
 opacity: 0.6; 
 font-weight: 600;   
}
#friend ul a,
#friend ul a:hover {
  color: #fff;
}
@media (max-width: 55em){
#food_exma {
  padding:5vh 8vw;
}
  #friend p,#friend ul {
  display: block;
}
}
#seven{
    text-align: left;
  position: relative;
  padding:8vh 0vw 0vh 0vw;
  font-size: 1.2em;
}
  #seven h2 {
    color: #fff;
  }
#seven h3 {
  color:#ff8b83;
  font-size: 1.5em;
  margin: 0 0;
  font-weight: 400;
}
#seven h3 span {
  font-size: 150%;
  font-weight: 600;
}
#seven kbd {
  background-color: #ffebbd;
  font-weight: 400;
  font-size: 1.2em;
  padding: 2px 5px;

}
#seven svg{
  color: #14aabf;
  padding: 0px 2px;
  font-size: 150%;
}
#seven p {
  font-size: 90%;
  color: #666;
  line-height: 1.8;
}
.seven_bg{
  background-color: rgb(255,191,78);
  padding: 8vh 6vw 10vh 6vw;
  margin-top: -12vh;
  text-align: center;

}
#seven ul {
  padding: 0 0;
  margin: 0 0;
  list-style: none;
}
#seven ul li {
  width: 18vw;
  height: auto;
  display: inline-block;
  vertical-align: top;
  padding:5vh 1vw 3vh;
  margin: 0vh 0.5vw;
  background-color: rgba(255,255,255,0.85);
  border-radius: 2em;
}

@media (max-width: 55em){
  #seven ul li {
  width: 100%;
  margin: 5vh 0vw;
  height: auto;
  display: block;
  padding:5vh 2vw 2vh;
   border-radius: 1em;
  vertical-align: top;
}
 #seven h2  {
  font-size: 1.5
 }
}
.sp {
  width: 85%;
  background-color: rgba(255, 227, 125, 0.92);
  margin:auto;
  color: #000;
  border-radius:2em;
  border-spacing: inherit;
  border-collapse: inherit;
  padding: 3vh 2vw;
  border: solid 1px #fff;
}
.sp td{
  border-bottom: solid 1px rgba(255, 162, 154, 0.75);
  border-right: solid 1px rgba(255, 162, 154, 0.75);
  padding: 3vh 1vw;
}
.sp td:nth-last-child(1){
    border-right: solid 0px rgba(255, 162, 154, 0.75);
}
.sp tr:nth-last-child(1) td{
  border-bottom: solid 0px rgba(255, 162, 154, 0.75);
}

.sp span {
  font-size: 3em;
  font-weight: 600;
  color: #f00;
}
@media (max-width: 55em) {
  .sp {
  width: 100%;
}