body { font: 20px "Century Gothic", Arial, 'Microsoft JhengHei', "蘋果儷中黑", "儷黑 Pro", "新細拗╴?", "sans-serif"; color: #000; min-width: 1050px; }
a { text-decoration: none; }
:focus { outline: none; }
i { font-style: normal; }
.header, .footer { width: 100%; margin: auto;}
.hd_pc { width: 100%; }
.hd_m, footer { display: none; }
.M_menu_wrap { display: none; }
/*main*/
.main { background: url(../images/kv_bg.png) no-repeat top,url(../images/bg_paper.png) repeat center; position: relative; width: 100%; z-index: 1; overflow: hidden; background-color: #bdec9d;}
.kv { width: 1200px; height: 650px; margin: auto; position: relative; }
.kv_slogan1 { position: absolute; left: 0px; top: 32px; z-index:1; }
.kv_slogan2 { position: absolute; left: 45px; top: 135px; z-index:1; }
.kv_slogan3 { position: absolute; left: 490px; top: 130px; z-index:2; }
.kv_slogan4 { position: absolute; right: -80px; top: -20px; z-index:1;
              animation: upDown_animation 1s ease-in-out infinite alternate;}
/**.kv_slogan5 { position: absolute; left: 365px; top: 510px; z-index:2; }**/
.kv_slogan5 { position: absolute; left: 180px; top: 490px; z-index:2; }
.kv_slogan6 { position: absolute; left: 40px; top: 510px; z-index:2; }

.block_01, .block_02, .block_03{
  width: 1200px;
  margin: auto;
  position: relative;
  margin-top: 0px;
}

.step{
  position: relative;
  width: 1200px;
  margin: auto;
}

/**but**/
.but{
  position: absolute;
  /**left: 215px;**/
  left: 355px;
  bottom: 50px;
  width: 1200px;
  z-index: 100;	
}

.but ul li a{
  display: inline-block;
  float: left;
  margin-right: 20px;
  transition: .3s linear;	
}

.but ul li a:hover{
  /**filter: brightness(120%);**/
  transform: translateY(-8px);
  cursor: pointer;	
}

/*container*/
.container {width:1100px; margin: 0 auto; padding-top: 20px;}
h1 { border-bottom:solid 5px #939393; padding: 10px; font-size: 40px; font-weight: bold; color:#000; margin: 0 auto; }
h1 span { font-size: 25px; color: #939393; font-weight: lighter; }
.flip span { font-size: 18px; color: #939393; }

.container li {  padding-bottom: 20px; }

/*標題hover*/
.flip { 
width:1070px;	
margin:0 auto;
padding:15px;
text-align:left;
border-bottom:dotted 2px #4a6639; 
font-size: 25px;
font-weight: 700;
color: #4a6639;	
position: relative;
transition: .2s ease-in-out;
    z-index: 1;
    cursor: pointer
}


.flip:hover, .flip:focus, .flip:active {
color: #2f2f2f;
}

/*隱藏內容*/
div.panel{ 
	width:960px;
	height:0; 
	overflow: hidden;
	background-color: #fff;
    transition: .5s linear height;
}
.active div.panel{
    height: 500px;
    overflow-y: auto;
    padding: 50px;
    margin: 20px;
}

/*展開收合的按鈕*/
.open, .close, .open01, .close01{
border-radius: 30px;	
border: 1px solid #2f2f2f;
color: #2f2f2f;
display: inline-block;/*可以設定長寬*/
padding: 6px 10px;
font-size: 10px;
line-height: 12px;
position: relative;
float: right;
left: 0px;	
transition: .3s ease-in-out;
cursor: pointer;	
}
.close{
	display: none;
}

.open01 {
	display: none;
}

.flip:hover .open, .flip:hover .close{
background-color: #2f2f2f;	
color: white;
}


/**js有添加active的時候open要關起來**/
.active .open01{
display: block;
}

/**js有添加active的時候close要開起來**/
.active .close01{
display: none;
}

/**js有添加active的時候open要關起來**/
.active .open{
display: none;
}

/**js有添加active的時候close要開起來**/
.active .close{
display: block;
}


.panel h2, .panel01 h2 { text-align: center; font-size: 30px; font-weight: bold; }

.panel h3, .panel01 h3{ 
border-radius:30px; 
border: 1px solid #bb0000; 
color: #bb0000; 
display: inline-block; 
margin-bottom: 10px; 
margin-top: 35px;
padding: 5px 15px; 
font-size: 22px;
font-weight: 600;	
line-height: 26px;	
}

.panel p, .panel01 p { text-align: left; font-size: 18px; line-height: 25px; }
.panel ol, .panel01 ol { padding-left: 50px; }
.panel li, .panel01 li { 
font-size: 18px; 
color: #333;
line-height: 32px;
list-style: disc;
margin-left: -25px;	
}
 
.panel .list li, .panel01 .list li{
list-style: decimal;
margin-left: -25px;	
}

.panel .list02 li, .panel01 .list02 li{
list-style-type: lower-alpha; 
margin-left: -25px;	
}

.panel .list02 li, .panel01 .list02 li{
list-style-type: circle; 
margin-left: -25px;	
}

.panel span, .panel01 span { font-size: 18px; color:#000; }

/**footer-bg**/
.footer-bg{
	width: 100%;
	height: 190px;
	background-image: url(../images/bottom.png);
	background-position: center;
	
}


.pc_mode{ display: block;}
.m_mode{ display: none;}

/*heartbeat*/
.zoominzoomout-play { 
	-webkit-animation-duration: 0.5s;  
	animation-duration: 0.5s; 
	animation-delay:-1s;  
	-webkit-animation-name: zoominzoomout-play;  
	animation-name: zoominzoomout-play;  
	-webkit-animation-iteration-count: infinite;    
	animation-iteration-count:infinite;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
}


	@-webkit-keyframes zoominzoomout-play {   
		0%  { -webkit-transform: scale(1); transform: scale(1);  } 
		100%{ -webkit-transform: scale(0.9); transform: scale(0.9);}
		}
	@keyframes zoominzoomout-play { 
		0%  { -webkit-transform: scale(1); transform: scale(1);  } 
		100%{ -webkit-transform: scale(0.9); transform: scale(0.9); }
	}


/***prod***/
.prod_wrapper {
	position: relative;
	padding: 10px 0 0px;
}
.prod_container {
	position: relative;
	z-index: 100;
	overflow: hidden
}

/**rule**/
.rule .prod_wrapper {
	margin-top: 0;
}
.rule_wrapper {
	margin: auto;
	padding: 24px;
	width: 1122px;
	border-radius: 20px;
	background: #bdec9d;
	font-size: 18px;
	line-height: 26px;
    margin-bottom: 100px;
}

.rule_wrapper h2 {
	display: inline-block;
	margin: 10px 0px 10px 20px;
	padding: 5px 20px;
	border-radius: 20px;
	background: #4a6639;
	color: #fff;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
}

.rule_wrapper p {
	margin-left: 26px;
}

.rule_wrapper h3 {
	color: #e46255;
	font-weight: bold;
	font-size: 18px;
	font-size: 20px;
	color: #000;
}

.check{
	display: block;
	margin: auto;
	width: 280px;
	padding: 10px 20px;
}

a.btn_back {
	display: block;
	margin: auto;
	padding: 10px 20px;
	width: 300px;
	border-radius: 20px;
	background-color: darkred;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 20px;
	transition: linear .2s;
}
a.btn_back:hover, a.btn_back:focus, a.btn_back:active {
	background-color: tomato;
}


/**float**/
.float_wrapper { position: fixed; top: 250px; right: 30px; z-index: 250; display: none; }
.float_hd{position: relative; top: 20px; right: -5px; z-index: 99;}
.group_leftmenu { margin: auto;}
.group_leftmenu:after { content: '';display: table;clear: both;}
.group_leftmenu li { position: relative; padding: 13px 13px; text-align: center; font-size: 20px; background-color: #2f2f2f; margin: 8px auto; border-radius: 50px; line-height: 20px;}
.group_leftmenu li a { position: relative; z-index: 500; color: #fff; cursor: pointer; font-weight: bold; transition: .3s ease-in-out;}
.group_leftmenu li.highlight { border-radius: 50px; line-height: 40px; background-color: #7e8488; }
.group_leftmenu li a:hover, .group_leftmenu li a:focus, .group_leftmenu li a:active {color:#f3ff35;}

/**float
.float_wrapper { position: fixed; top: 250px; right:0; z-index: 250; display: block; }
.float_main { width: 138px; opacity: 0.6; filter: alpha(opacity=90);}
.go_top { display: block;cursor: pointer;}
.group_leftmenu { margin: auto; border: 15px solid #275493; border-radius: 30px 0 0 30px; opacity: 0.95; }
.group_leftmenu:after { content: '';display: table;clear: both;}
.group_leftmenu li { position: relative; padding: 10px 0 10px; text-align: center; font-size: 17px;  }
.group_leftmenu li { background: #275493; }
.group_leftmenu li a { position: relative; z-index: 500; color: #fff; cursor: pointer; font-weight: bold; }
.group_leftmenu li { padding-left: 2px; color: yellow; font-weight: bold; border-bottom: 1px dotted #fff; }
.group_leftmenu li.highlight0 {padding-left: 2px; border-bottom: 1px dotted #fff; }
.group_leftmenu li.highlight0 a {color: #ff726b; font-weight: bold;}
.group_leftmenu li.highlight1 {padding-left: 2px; border-bottom: 1px dotted #fff; }
.group_leftmenu li.highlight2 {font-size: 22px; padding: 12px 0 0 2px;  border-bottom:none;}
.group_leftmenu li a:hover, .group_leftmenu li a:focus, .group_leftmenu li a:active {color:#fbc900;}
.group_leftmenu li:after {position: absolute;right: 51%;bottom: 0;left: 51%;z-index: 1;height: 2px;background: #fbc900;content: "";-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: left, right;transition-property: left, right;}
.group_leftmenu li:hover:after, .type_leftmenu li:focus:after, .type_leftmenu li:active:after {right: 0%;left: 0%;}
.triangle-up { margin-left: 28px;  height: 7px;  width: 7px; border-width: 2px 0 0 2px; border-color: #fff; border-style: solid; transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);}
**/

/*others*/
#doyoo_panel { display: none!important; }

@media screen and (max-width:767px) {
body { width: 100vw; min-width: inherit; font-size: 14px; }
* { box-sizing: border-box;  }
#doyoo_panel { display: none!important; }
.header, .footer { width: 100vw;}
.footer, .hd_pc { display: none; }
.hd_m, footer { display: block; }
.main { background-size: 166vw; padding-bottom: 50px;}
.kv {width: 100vw; height: 56vw;}
.kv img{ width:100%;}	
.kv_slogan1 { display: none;}
.kv_slogan2 { width:67vw; left:-2vw; top:6.5vw; }
.kv_slogan3 { width:13vw; left:52.5vw; top:8vw; }
.kv_slogan4 { width:48vw; right:-3vw; top:1.5vw; }
/**.kv_slogan5 { width:48vw; left:51vw; top:49vw; }**/
.kv_slogan5 { width:48vw; left:29vw; top:49vw; }
.kv_slogan6 { width:48vw; left:2vw; top:49vw; }    
	
.block_01, .block_02, .block_03{
	width: 100vw;
	margin-top: 20px;
	margin-bottom: 20px;
}
    
.step{
    width: 100vw;
}    
.step img {
    width: 100%;    
}    
	
.block_01 img,.block_02 img ,.block_03 img{
	width: 100%;
}	
    
/**but**/
.block_02 .but{
  /**left: 13vw;**/
  left: 33vw;    
  bottom: 4.5vw;
  width: 100vw;
}

.block_02 .but ul li a{
  width: 37vw;    
  margin-right: 10px;	
}
    
.block_02 .but ul li a img{
  width: 100%; 
}    

	
/*container*/
/*標題hover*/
.flip { width:90vw; font-size: 16px; padding: 7px;}
.text_wrapper{ width:95vw!important;}	
.container { width:95vw; margin-bottom: 20px; margin-top: 10px;}
div.panel{width:90vw; margin: 0 auto;}
.active div.panel {
    padding: 20px;
    margin: 0 auto;
}
/*展開收合的按鈕*/
.open, .close, .open01, .close01{
	left: 0vw;	
}	
/**footer-bg**/
.footer-bg {
	display: none;
}
	
.rule_wrapper {
	padding: 10px;
	width: 100vw;
	border-radius: 15px;
	font-size: 14px;
	line-height: 24px;
}
.rule_wrapper h2 {
	font-size: 16px;
	margin: 10px 0px 10px 10px;
}
	
.rule_wrapper p {
	margin-left: 4.5vw;
}	
	
.rule_wrapper a {
	word-wrap: break-word;
}	
	
.float_wrapper {
    display: none; 
    left: 100%;
}
    
/**M_menu_wrap**/    
.M_menu_wrap { 
    position: fixed; 
    bottom: 0; 
    z-index: 200; 
    display: block; 
    font-size: 15px; 
}
.M_menu_block { 
    width: 100vw; 
    height: 110px; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555), color-stop(100%, #111)); 
    box-shadow: 0px -1px 1px #333; 
}
.M_menu_block:after { 
    clear: both; 
    display: table; 
    content: '';
}
    
.M_menu_block ul { 
    overflow: hidden; 
    list-style: none;
}
.M_menu_block li { 
    float: left;  
    padding-top: 7px; 
    width: 25vw; 
    height: 55px; 
    border-top: 1px solid #999; 
    border-right: 1px solid #666; 
    border-left: 1px solid #222; 
    text-align: center; 
}
    
.M_menu_block li.highlight{
    width: 100vw;
}    
    
.M_menu_block li a { 
    color: #fff; 
    display: inline-block; 
    font-size: 18px; 
    line-height: 20px; 
    font-weight: 700;
}
.M_menu_block li.highlight a { 
    color: #ff726b;
    line-height: 37px;
}	
.m_but {
    background-color: #910002;
}
.bk_mask { 
    position: fixed; 
    top: 0; 
    z-index: 100; 
    display: none; 
    width: 100vw; 
    height: 100vh; 
    background: rgba(0,0,0,.8); 
}

.pc_mode{ display: none; }
.m_mode{ display: block; }	
	
}