@charset "utf-8";

/* RESET
--------------------------------------------------------------------------------------*/
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,rem,font,img,ins,kbd,q,s,samp,small,strike,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, figure{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-spacing:0}address{display: inline;font-style: normal;}

*{
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

/* 版型設定 */
.mobile{ display: none;}
.pad{ display: none;}

/* 共用設定 */
img{ width: 100%; height: auto; display: block; font-size: 0.24rem; color: #000000;}
/*iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;}*/
a{ display: block; text-decoration: none; -webkit-transition:all 0.2s; transition: all 0.2s;}
a:hover, a:active, a:focus{ color: inherit;}
@media screen and (max-width: 768px){ a:hover{ color: inherit;}}

.clear:before, .clear:after {content:""; display:table; } 
.clear:after {clear:both; } 
.c{clear: both;}

.wrapper .hide{ display: none;}
.absolute, .inner-absolute > *{ position: absolute;}
.absoluteTL, .inner-absoluteTL > *{ position: absolute; top: 0; left: 0;}
.absoluteTR, .inner-absoluteTR > *{ position: absolute; top: 0; right: 0;}
.absoluteBL, .inner-absoluteBL > *{ position: absolute; bottom: 0; left: 0;}
.absoluteBR, .inner-absoluteBR > *{ position: absolute; bottom: 0; right: 0;}
.relative, .inner-relative > *{ position: relative;}
.overHide{ overflow: hidden;}


/* flex */
.flexBox{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: center; align-content: center;}


/* table */
table, tbody{ width: 100%;} th, td{ vertical-align: middle;}
.table{ width: 100%; display: table;}
.tr{ display: table-row;}
.th, .td{ display: table-cell; vertical-align: middle; position: relative;}
.table.pc{ display: table;}
.table.pad{ display: none;}
.table.mobile{ display: none;}


/* -- pc & mobile -- */
/* inline-block */
.inner-inblock{ font-size: 0;}
.inner-inblock > *{ display: inline-block; vertical-align: middle;}
.inner-inblock .block{ display: block;}
.block{ display: block;}
.inblock{ display: inline-block;}
.inline{ display: inline;}

/* pc */
.pc-none{ display: none;}

/* float設定 */
.float-l{ float: left;}
.float-r{ float: right;}

/* 漸變設定 */
.transition, .transition:before, .transition > *, .transition > * > a, .transition :before{
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

/* 字型樣式及置中設定 */
.bold{ font-weight: bold;}
.normal{ font-weight: normal;}
.margin, .inner-margin > *{ margin-left: auto; margin-right: auto;}
.alignC, .inner-alignC > *{ text-align: center;}
.alignR, .inner-alignR > *{ text-align: right;}
.alignL, .inner-alignL > *{ text-align: left;}
.alignB, .inner-alignB > *{ vertical-align: bottom;}
.alignM, .inner-alignM > *{ vertical-align: middle;}
.alignT, .inner-alignT > *{ vertical-align: top;}

/* loading */
.loading{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; text-align: center; background-color: rgba(255, 255, 255, 0.99); z-index: 99;}
.loading .box{ margin: 5rem auto; font-size: 0.3em; color: #c5a86f; position: relative; -webkit-animation: opac 2s infinite linear; animation: opac 2s infinite linear;}
.loading span{ width: 1.5rem; height: 1.5rem; display: block; position: absolute; top: 50%; left: 50%; 
    margin: -0.8rem auto auto -0.8rem;
    border: 2px solid;
    border-color:  #c5a86f transparent  #c5a86f transparent;
    border-radius: 5rem;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
  100% { -webkit-transform: rotate(359deg); transform: rotate(359deg);}
}
@keyframes spin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
  100% { -webkit-transform: rotate(359deg); transform: rotate(359deg);}
}
@-webkit-keyframes opac { 0% { opacity: 1;} 50% { opacity: 0.4;} 100% { opacity: 1;}}
@keyframes opac { 0% { opacity: 1;} 50% { opacity: 0.4;} 100% { opacity: 1;}}


/* @media 
------------------------------------------------------------------------------------------------*/
/*---------------- pad ----------------*/
@media screen and (max-width: 768px){
	
	
    /* 字型樣式及置中設定 */
    .m-margin{ margin-left: auto; margin-right: auto;}
    .m-alignC{ text-align: center;}
    .m-alignR{ text-align: right;}
    .m-alignL{ text-align: left;}
    .m-alignT{ vertical-align: top;}
    .m-alignM{ vertical-align: middle;}
    .m-alignB{ vertical-align: bottom;}
    .m-bold{ font-weight: bold;}
    .m-normal{ font-weight: normal;}
    
    /* float設定 */
    .m-float-l{ float: left;}
    .m-float-r{ float: right;}
    
    /* 定位 */
    .m-absolute, .m-inner-absolute > *{ position: absolute;}
    .m-absoluteTL, .m-inner-absoluteTL > *{ position: absolute; top: 0; left: 0; right: auto;}
    .m-absoluteTR, .m-inner-absoluteTR > *{ position: absolute; top: 0; right: 0; left: auto;}
    .m-absoluteBL, .m-inner-absoluteBL > *{ position: absolute; bottom: 0; left: 0; right: auto;}
    .m-absoluteBR, .m-inner-absoluteBR > *{ position: absolute; bottom: 0; right: 0; left: auto;}
    .m-relative, .m-inner-relative > *{ position: relative;}
    
    /* m-tableBlock */
    .m-tableBlock, .m-tableBlock .tr, .m-tableBlock .td, .m-tableBlock .th{ display: block;}
    
    /* m-inblock */
    .m-inner-inblock{ font-size: 0; display: block;}
    .m-inner-inblock > *{ display: inline-block; vertical-align: middle;}
    .m-inner-inblock .block{ display: block;}
    .m-inblock{ display: inline-block;}
    .m-block{ display: block;}
    .m-inline{ display: inline;}
    .m-none{ display: none;}
}


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

    /* 字型樣式及置中設定 */
    .s-margin{ margin-left: auto; margin-right: auto;}
    .s-alignC{ text-align: center;}
    .s-alignR{ text-align: right;}
    .s-alignL{ text-align: left;}
    .s-alignT{ vertical-align: top;}
    .s-alignM{ vertical-align: middle;}
    .s-alignB{ vertical-align: bottom;}
    
    /* float設定 */
    .s-float-l{ float: left;}
    .s-float-r{ float: right;}
    
    /* 定位 */
    .s-absolute, .s-inner-absolute > *{ position: absolute;}
    .s-absoluteTL, .s-inner-absoluteTL > *{ position: absolute; top: 0; left: 0; right: auto;}
    .s-absoluteTR, .s-inner-absoluteTR > *{ position: absolute; top: 0; right: 0; left: auto;}
    .s-absoluteBL, .s-inner-absoluteBL > *{ position: absolute; bottom: 0; left: 0; right: auto;}
    .s-absoluteBR, .s-inner-absoluteBR > *{ position: absolute; bottom: 0; right: 0; left: auto;}
    .s-relative, .s-inner-relative > *{ position: relative;}
    
    /* s-tableBlock */
    .s-tableBlock, .s-tableBlock .tr, .s-tableBlock .td, .s-tableBlock .th{ display: block;}
    
    /* m-inblock */
    .s-inner-inblock{ font-size: 0; display: block;}
    .s-inner-inblock > *{ display: inline-block; vertical-align: middle;}
    .s-inner-inblock .block{ display: block;}
    .s-inblock{ display: inline-block;}
    .s-block{ display: block;}
    .s-inline{ display: inline;}
    .s-none{ display: none;}
}