@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
    background: url("../images/fixedbg.jpg") top -210px center repeat-y, #e1411b;
}
@font-face {    font-family: YuMin;    src: url("https://events.eslite.com/font/YuMinPr6N-M.otf");}
@font-face {    font-family: GaramondPremrPro;    src: url("https://events.eslite.com/font/GaramondPremrPro-Smbd.otf");}


h2, h3, h4, .btn a, .btn p, menu a, p.title, a.kv2, a.kv3,a.kvm2,a.kvm3{ font-family: YuMin;font-weight: 600;}
span{
  font-family: GaramondPremrPro;
  font-weight: 600;
}

/*------------------------------ PC ------------------------------*/
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
    @media screen and ( max-width: 991px ){
        .WRAPPER{ min-width:100%;}
    }
.container { overflow: hidden; }
.topbox { position: relative; width: 1200px; margin: auto;}
.kv_pc {width: 100%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }

/*zero*/

.btn{
  margin: 40px auto;
  padding: 5px 20px;
  /*border:2px solid #ce4f2e;*/
  border-radius: 10px;
  transition: .5s;
  background: #3e4422;
  vertical-align: middle;
}
.btn a, .btn p{
  color: #fff;
  font-size: 2rem;
  line-height: 3rem;
}
.btn:hover{
  background: #ce4f2e;
}
.btn:hover a, .btn:hover p{
  color: #fff;
  transition: .5s;
}

@media screen and ( max-width: 991px ){
  .btn{
    padding: 5px 10px;
    border-radius: 10px;
  }
  .btn a, .btn p{
    font-size: 1.5rem;
    line-height: 3rem;
  }
}

/*color*/


/*title*/
.titleC {
  margin:30px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.titleC h2 {
  position: relative;
  padding: 25px 0;
  color:  #3e4422;
  letter-spacing: 1px;
  background:url("../images/tbg.png") center no-repeat;
  width: 1200px;
  font-size: 2.7rem;
  line-height: 3.5rem;
  text-shadow: 1px 1px 0 #fff, 1px 1px 10px #fff;
}
.titleC h2 span{
  font-size: 3.7rem;
  color: #a3311e;
  font-family: GaramondPremrPro;
  font-weight: 600;
}

p.title{
  font-size: 1.3rem;
  line-height: 2.5rem;
  color:  #3e4422;
  text-align: center;
  padding-top: 20px;
  letter-spacing: 2px;
}

@media screen and ( max-width: 991px ){
  .titleC {
    margin:0px auto;
  }
  .titleC h2 {
      /*background:url("../images/tbg_m.png") center no-repeat;*/
      font-size: 2rem;
      line-height: 3rem;
  }
  .titleC h2 span{
    font-size: 3rem;
  }
  p.title{
    width: 90vw;
    font-size: 1.3rem;
    line-height: 1.8rem;
    padding: 10px 0;
    letter-spacing: 1px;
  }
}

/*bg*/
.sbg{
    width: 1150px;
    margin: 30px auto;
    display: flex;
    flex-direction: column;
    background:#e6c39e;
    border-radius: 30px;
    /*#f7efe7*/
}

/*kv*/
img.kv1{
  top: 331px;
  left: 326px;
}
img.kv2{
  right: 117px;
  top: 506px;
  /*animation: pulse 2s infinite;*/
}
img.kv3{
  right: 117px;
  top: 608px;
  /*animation: pulse 2s infinite;*/
}

a.kv2{
  position: absolute;
  right: 124px;
  top: 526px;
  font-size: 2.3rem;
  /*color: #fff;
  border: 3px #fff solid;*/
  padding: 15px 22px;
  border-radius: 10px;
  transition: .5s;
  background: #fff;
  color: #e1411b;
  box-shadow: 4px 4px #a2311e;
}

a.kv2:hover{
  transition: .5s;
 transform: scale(0.95);
 box-shadow: inset 2px 2px 4px #7d1a00;
}

a.kv3{
  position: absolute;
  right: 124px;
  top: 620px;
  font-size: 2.3rem;
  /*color: #fff;
  border: 3px #fff solid;*/
  padding: 15px 20px;
  border-radius: 10px;
  transition: .5s;
  background: #fff;
  color: #e1411b;
  box-shadow: 4px 4px #a2311e;

}
a.kv3:hover{
  transition: .5s;
  transform: scale(0.95);
  box-shadow: inset 2px 2px 4px #7d1a00;
}
.ap{
  font-size: 1.5rem;

}

.topbox img{position: absolute;animation-fill-mode: backwards;}



a.kvm2{
  position: absolute;
  right: 3vw;
  top: 67vw;
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 5px 16px;
  border-radius: 5px;
  transition: .5s;
  background: #fff;
  color: #e1411b;
  box-shadow: 2px 2px #a2311e;
}
a.kvm3 {
    position: absolute;
    right: 3vw;
    top: 77vw;
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 5px 13.5px;
    border-radius: 5px;
    transition: .5s;
    background: #fff;
    color: #e1411b;
    box-shadow: 2px 2px #a2311e;
}

/*linkbg*/
.linkbg {
  width: 1000px;
  margin: 0 auto;
  padding:70px 0 0 0;
}
.link{
    display: flex;
    justify-content: center;
    justify-content: space-evenly;
    position: relative;
}
.link a{transition: .5s;}

.link a:after{
  content: '';
  width: 269px;
  height: 369px;
  position: absolute;
  bottom:2px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: url("../images/top_hover.png") bottom center no-repeat;
  opacity: 0;
  transition: .5s;
}
.link a:hover::after{
  opacity: 1;
  transition: .5s;
}
.link a:hover{transition: .5s; transform: scale(0.95);}

.linkbg a:nth-child(2){z-index: 11;}

@media screen and ( max-width: 991px ){
  .linkbg {padding: 30px 0 0 0;}
  .linkbg, .link img, .btmbg img{
    width: 100%;
  }
  .link a:after{display: none;}
}

/*section1*/

.box1{
  width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.box1 img{
  width: 90%;
}

table{
  width: 100%;
  border: 1px solid #fff;
  margin: 20px auto;
  
}
thead th{
  width: 20%;
  padding: 10px 0;
  background: #fff;
  color: #333;
  line-height: 16px;
}
td {
  text-align: center;
  color: #333;
  font-size: 14px;
  line-height: 16px;
  padding: 10px 0;
  background: #ffffff90;
}
table.for_pc{
  display: inline-table;
}

@media screen and ( max-width: 991px ){
  .box1{
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
  .box1 img{ 
    width: 97%;
  }
  #a > div.box1 > img:nth-child(3) {
    margin-top: 10px;
  }
  table.for_pc{
    display: none;
  }
}

/*section2*/
.box2{
  width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.box2 img{
  width: 97%;
}

@media screen and ( max-width: 991px ){
  .box2{
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
  .box2 img{
    width: 95%;
  }
}

/*section3*/
.box3{
  width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.box3 img{
  width: 600px;
}

@media screen and ( max-width: 991px ){
  .box3{
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
  .box3 img{
    width:90%;
    margin: 0 auto;
  }
}

/*注意事項縮合*/
.description{
  width:80%;
  margin: 0 auto;
  padding: 0 0 50px 0;
}
.description ol{
  padding-left: 30px;
}
.description li, .description p{
  font-size: 15px;
  line-height: 1.8rem;
  letter-spacing: 1px;
  font-weight: 500;
  text-align: justify;
  list-style: none;
  color: #222; 
}
.description li{ 
  list-style:inherit; 
}
.description li:hover{
  transform: none;
}
.description a{
  color: #a3311e;
}
/*font-family: 'Noto Serif TC', serif;*/

@media screen and ( max-width: 991px ){
  .description{
    width:90%;
  }
  .description li, .description p{
  	font-size: 1rem;
	}
}

/*section4*/
.box4{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.hightlight ul{
  /*flex-direction: column;*/
}
.hightlight li {
  border-radius: 20px;
  min-height: 390px;
}
.hightlight img{
  object-fit: contain;
  border-radius: 20px 20px 0 0;
}
.hightlight .font h4{
  background:#d1a777;
}
ul.p4 {
  display: flex;
  flex-direction: row;
}
ul.p4 li{
  min-height: 360px;
}
@media screen and ( max-width: 991px ){
  .box4 {
    justify-content: center;
    flex-direction: row;
  }
  .hightlight li{
    width: 30.5vw;
    min-height: 220px;
    border-radius: 10px;
  }
  .hightlight .font h4{
    padding: 1vw 0;
    font-size: 1rem;
  }
  .hightlight img{
    width: 30vw;
    height: 30vw;
    border-radius: 10px 10px 0 0;
  }
  ul.p4 li{
    width: 46vw;
    min-height: 220px;
  }
  ul.p4 li img{
    width: 46vw;
    height: 46vw;
    border-radius: 10px 10px 0 0;
  }
}

/*section5*/
.section5{
  justify-content: center;
  align-items: center;
    padding-top: 50px;
}
.mp4{
  width: 930px;
  margin: 0 auto;
  text-align: center;
  height: 524px;
  border-radius: 20px;
}

@media screen and ( max-width: 991px ){
  .movie{
    width: 95vw;
    margin: 0 auto -2px;
    text-align: center;
    height:56vw;
    border-radius: 0px;
    margin: 0 auto;
  }
  .mp4{
    width: 95vw;
    height:56vw;
  }
}

/*section6*/
.box6{
  width: 70%;
  margin: 0 auto;
  position: relative;
  padding-bottom: 50px;
}

.box6 h3{
  text-align: left;
  font-size: 2rem;
  line-height: 3rem;
  color: #3e4422;
  padding-top: 30px;
}  

.toggle-btn{
  color: #3d4422;
  font-size: 1rem;
  line-height: 2rem;
  letter-spacing: 1px;
  background: #efe3d0;
  padding: 10px 30px;
  border-bottom: 1px solid #fff;
}
.toggle-btn:after {
    content: '+';
    color: #3d4422;
    position: absolute;
    right: 30px;
}

.qabox {
  color: #333;
  background: #fff;
  padding: 10px 30px;
  font-size: 1rem;
  line-height: 2rem;
  letter-spacing: 1px;
}
.qabox ol, .qabox ul{line-height: 2rem;}
.qabox li{
  transform: none;
  line-height: 2rem;
  /*list-style:inherit; */
  /*padding-left: 30px;*/
}
.qabox a{
  color: #a3311e;
}

@media screen and ( max-width: 991px ){
  
  .box6{
    width: 90%;
  }
  .toggle-btn{
    padding: 10px 15px;
  }
  .toggle-btn:after{
    right: 10px;
  }
}

/*section7*/
.section7{background: transparent;}
.box7 {
  display: flex;
  border: 1px solid #e0c4a3;
  padding: 50px 0;
  justify-content: center;
}
.box7 h3{
  width: 30%;
  border-right: 1px solid #e0c4a3;
  margin-right: 30px;
  line-height: 5rem;
}
.box7 p{
  width: 60%;
  text-align: justify;
  font-size: 1.1rem;
  letter-spacing: 1px;
  line-height: 1.8rem;
}
.box7 h3, .box7 p{
  color: #fff;
}

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

  .box7 {
    flex-direction: column;
    padding: 30px 0;
  }
  .box7 h3, .box7 p{
    width: 90%;
    margin: 0 auto;
  }
  .box7 h3{
    border-right: 0px solid #e0c4a3;
    border-bottom: 1px solid #e0c4a3;
    margin-bottom: 20px;
  }

}

/* ------------------------------ mobile ------------------------------*/

@media screen and ( max-width: 991px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_m .ap{font-size: 1rem;}
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }

    /*witch auto*/
    h2, .sbg, .titleC, .titleC h2 {width: 100%;}
    .sbg{padding-top: 25px;}

    /*.alternate */
    .alternate .font h4{ /*white-space: break-spaces*/;overflow: inherit;}
    .alternate ul:nth-child(even) {    margin: 0px auto 25px;}
    .alternate ul:nth-child(odd) li:first-child .font h4.t4, .alternate ul:nth-child(even) li:last-child .font h4.t4{ padding: 5px 0;}
}


/*------------------------------ navbar ------------------------------ */

/*for mobile*/
/*menu{display:none;}
    @media screen and ( max-width: 428px ){
        menu{ display:block;}
        .deco_arrows{ width:1vw; }
    }*/
menu ul{
    position:fixed;
    bottom:0;
    /*top: 0;*/
    left:0;
    margin:0;
    width:100%;
    display:flex;
    flex-wrap:wrap;
    list-style: none;
    background:#b2220e;
    background: #efe3d0;

    z-index:1000;
    padding:2px 0;
    border-top:none;
    justify-content: center;
}
menu ul li{
    border-right:1px solid #b2220e60;
    padding:8px 0;
    width:50%;
    box-sizing:border-box;
    text-align:center;
    letter-spacing:1px;
	  background:rgba(169,30,12,1.00);	
}
menu ul li:nth-child(2){
    border-right:none;
	  background:rgba(62,68,34,1.00);
}
menu ul li:nth-child(2):after{
  content:'';
  width: 60px;
  height: 60px;
  position: fixed;
  bottom: 1%;
  background: url("../images/fixedmb.gif");
  background-size: contain;
  /*transform:rotate(90deg);*/
  display: none;
}
menu a{
    font-size:18px;
    color:#fff ;
    text-decoration:none;
}

.coptbtn{
  color: #fff;
  width: 100vw;
  background:rgba(62,68,34,1.00);
  height: 34px;
  line-height: 18px;
  border: 0;
}

/*@media screen and ( max-width: 428px ) {
    .stickym{ padding-top:0px !important;}
}
  .stickym {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-top: 78px;
    z-index: 1111;
}
*/

/*fixed*/

a.fixed1 img, a.fixed2 img{
  width: 80px;
  position: fixed;
  bottom: 140px;
  right: 1%;
  z-index: 11;
}
a.fixed1 img{
  bottom: 230px;
  /*animation:swing 1s infinite;*/
  /*bounce*/
}
@media screen and ( max-width: 430px ) {
  a.fixed1 img, a.fixed2 img{
    display: none;
  }
}

/*--goto top--*/          
#gotop {display: inline-block;background-color: #000;opacity:0.3;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 0px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;opacity: 0;visibility: hidden;z-index: 1000;margin: 30px;}          
#gotop::after {position: absolute;display: block;font-family: FontAwesome;content: '　';font-weight: normal;font-style: normal;font-size: 2em; line-height: 50px;color: #fff;opacity: 0.5;background: url("../images/top.png") center no-repeat;background-size: 50%;background-position: 80% 35%;}         
#gotop:hover {cursor: pointer;background-color: #666;}          
#gotop:active {background-color: #ccc;}          
#gotop.show {opacity: 0.4;visibility: visible;}          
@media screen and ( max-width: 991px ){          
#gotop {bottom: 50px;right: 0;margin: 2vw;}
}         
/*share url*/
#share{display: inline-block;background-color: #000;opacity:0.4;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 50px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;z-index: 1000;margin: 30px;}
#share::after{position: absolute;display: block;font-family: FontAwesome;content: '　';font-weight: normal;font-style: normal;font-size: 2em; line-height: 50px;color: #fff;opacity: 0.5;background: url("../images/share.png") center no-repeat;background-size: 50%;background-position: 80% 35%;}
#share:hover{cursor: pointer;background-color: #666;}
#share:active{background-color: #666;}
@media screen and ( max-width: 991px ){
#share{bottom:95px;right: 0;margin: 2vw;}
}                    
@media screen and ( max-width: 991px ){          
html{padding-bottom: 80px;}          
}