@charset "UTF-8";
/* CSS Document */


* {margin:0px; padding:0px;}

@font-face {
	font-family: 'Daniela';
	src:url('../images/fonts/Daniela_Bold.woff') format("woff"),
		url('../images/fonts/Daniela_Bold.ttf') format("truetype"),
		url('../images/fonts/Daniela_Bold.eot') format("embedded-opentype");
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500&display=swap');

body, html {position:relative; font-size:16px; font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:300; overflow-x:hidden; background:#e2e1e3;}
a, input, button {text-decoration:none; outline:none !important;}
a:hover, a:focus, a:active {text-decoration:none; cursor:pointer !important; outline:none !important;}
ul, li {list-style:none;}

.cleardiv {clear:both;}

.font_dan {font-family:'Daniela',Arial,sans-serif !important; letter-spacing:4px !important;}

.se-pre-con { position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;z-index: 9999; background: url(../images/loading.gif) center no-repeat #e2e1e3;}
.back_to_top {display:none; box-sizing:content-box !important; width:50px; cursor:pointer; position:fixed; right:0; bottom:0; z-index:20;}

header {display:block; position:fixed; top:0px; z-index:50; height:50px; width:100%; background:#e2e1e3; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}

header nav .menu {display:block; width:25px; height:auto; position:absolute; top:12px; left:18px; z-index:60;}
header nav .menu img {width:100%; height:auto;}

header nav .logo {display:block; width:30%; max-width:100px; margin:auto; position:relative;}
header nav .logo img {display:block; height:50px; width:auto; margin:auto;}

header nav .shop {display:block; position:absolute; right:4px; top:3px;}
header nav .shop img {height:45px; width:auto;}

#menu_opn {display:block; width:100vw; height:100vh; position:fixed; top:0px; left:-100vw; background:rgba(0, 0, 0, 0.8); z-index:99;}
#menu_opn .opn_lt {display:block; float:left; position:relative; box-sizing:border-box;}
#menu_opn .opn_rt {display:block; position:absolute; top:0px;}
#menu_opn.opn {left:0px;}

#menu_opn .opn_lt {width:calc( 100% - 60px ); max-width:350px; height:100%; background:white; overflow:auto; overflow-x:hidden; padding:30px 0px 50px 0px;}

#menu_opn .opn_rt {height:100%;}
#menu_opn .opn_rt:hover {cursor:pointer !important;}

#menu_opn #closmnu {display:block; width:40px; height:40px; margin-top:15px; margin-left:10px; position:relative; z-index:999;}
/*#menu_opn #closmnu img {width:40px; height:auto;}*/
#menu_opn #closmnu span {display: block;
    position: absolute;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    transform-origin: center center;
    transition: all 0.8s ease-in-out;}
#menu_opn #closmnu span:nth-of-type(1) {transform: rotate(45deg); left: 10%; top: 12px; width: 80%; height: 1px;}
#menu_opn #closmnu span:nth-of-type(2) {left: -10px; opacity: 0; top: 12px; width: 80%; height: 1px;}
#menu_opn #closmnu span:nth-of-type(3) {transform: rotate(-45deg); top: 12px; left: 5px; width: 80%; height: 1px;}
#menu_opn #closmnu::after {content: "CLOSE";
    display: block;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    color: white;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.05em;
    text-align: center;
    transition: all 0.8s ease-in-out;}
    
.arrow {
  width: 15px;
  height: 15px;
  display: inline-block;
  position: relative;
  margin: 0 5px;
}
.arrow span {
  top: 8px;
  position: absolute;
  width: 9px;
  height: 1px;
  background-color: #444;
  display: inline-block;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.arrow span:first-of-type {
  left: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.arrow span:last-of-type {
  right: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.arrow.active span:first-of-type {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.arrow.active span:last-of-type {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.newblock {display: inline-block;
    vertical-align: middle;
    margin: 0 5px 0 0;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    background-color: #444444;
    line-height: 1.4;}
    
    
ul.list_a {display:block; position:relative; padding:0px 20px; margin-bottom:100px;}
ul.list_a li {padding:8px 0px;}
ul.list_a li a {font-size:24px; color:black;}
ul.list_a li.zh a {font-size:22px; font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:300;}

ul.list_b {display:block; position:relative; margin:10px 0px;}
ul.list_b li {padding:8px 0px;}
ul.list_b li a {display:block; width:100%; font-size:20px;}

ul.list_c {display:block; position:relative; padding-left:20px;}
ul.list_c li {padding:10px 0px;}
ul.list_c li a {font-size:16px; font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:400; color:#444;}

ul.list_d {display:block; position:relative; padding-left:20px; margin:5px 0px;}
ul.list_d li {padding:6px 0px;}
ul.list_d li a {font-size:14px; font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:400; color:#444; position:relative;}
ul.list_d li a::before {
    content: "";
    display: block;
    position: absolute;
    right: 8px;
    top: 40%;
    width: 6px;
    height: 6px;
    margin: -2px 0 0 0;
    padding: 0;
    border: 1px solid #444444;
    border-color: #444444 #444444 transparent transparent;
    transform: rotate(45deg);
    transition: all 0.3s ease-out;
}

li.list_e {position:relative;}
li.list_e a {display:inline !important; vertical-align:middle;}
li.list_e a::before {
    content: "";
    display: block;
    position: absolute;
    right: 8px;
    top: 40%;
    width: 6px;
    height: 6px;
    margin: -2px 0 0 0;
    padding: 0;
    border: 1px solid #444444;
    border-color: #444444 #444444 transparent transparent;
    transform: rotate(45deg);
    transition: all 0.3s ease-out;
}

.pd_clor {display:inline-block; vertical-align:middle; margin-right:5px; width:18px; height:18px; border-radius:100px; border:1px solid #E8E8E5;}
.pd_clor span {display:block; width:12px; height:12px; border-radius:100px; margin-top:3px; margin-left:3px;}


footer {position:relative; margin:100px 0px;}
footer .ft_icon {position:relative;}
footer .ft_icon a {display:inline-block; vertical-align:middle; width:40px; height:auto; margin:0px 10px; position:relative;}
footer .ft_icon a img {width:100%; height:auto;}

footer .epaper_row {position:relative; width:90%; max-width:325px; height:50px; margin:30px auto 100px auto; border:1px solid black; border-radius:12px; border-right:0px;}
footer .epaper_row .epaper_input {display:block; float:left; width:65%; max-width:220px; height:50px; border:0px; box-sizing:border-box; padding:10px 15px; background:none; font-size:14px; line-height:50px; font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:300;}
footer .epaper_row .epaper_button {display:block; float:right; width:35%; max-width:115px; height:50px; border:0px; background:black; color:white; text-align:center; font-size:14px; line-height:50px; font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:300; border-top-right-radius:12px; border-bottom-right-radius:12px; cursor:pointer;}

footer .ft_lks {position:relative;}
footer .ft_lks a {display:inline-block; font-size:14px; font-weight:400; color:#888; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
footer .ft_lks a::before {content: " / ";}
footer .ft_lks a:first-child::before {content: "";}
footer .ft_lks a:hover {color:black; cursor:pointer;}

footer .copy {font-size:15px; margin:50px auto; text-align:center; color:black;}


#wrapper {display:block; width:100%; max-width:768px; margin:auto; position:relative;}




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

  /*body, html {width:100vw; height:100vh; overflow-y:scroll;}*/
	
	footer .copy {width:90%; font-size:14px; letter-spacing:2px;}
	
	
}