@charset "UTF-8";
/*-----------------font-----------------*/
/*Noto Sans*/ /*DemiLight  500*/
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format('woff2'),
       url(https://fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format('woff'),
       url(https://fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 500;
   src: url(https://fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
}
/*Helvetica*/
.class { 
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif; 
}

/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,iframe,button,a,input{
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  letter-spacing: 0.7px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  line-height: 1em;
  text-decoration: none;
  list-style: none;
}

body {
  color: #81786f;
  background:#fff;
  font: 16px/100% "Noto Sans TC","微軟正黑體",sans-serif;
  font-weight: 300;
}

html, body { height: 100%; }

a{ color:#81786f; text-decoration:none; cursor: pointer; word-wrap: break-word; }
button { color:#81786f; background: none; cursor: pointer; }

h1, h2, h3, h4, h5, h6{ font-weight: 300; font-size: 100%; }

ol, ul {
  list-style: none;
}

table { width:100%; border-collapse: collapse; border-spacing: 0; }
table th ,
table td { padding: 5px 0; vertical-align: middle; }

input, button, textarea,select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  outline: none;
}
::-webkit-input-placeholder { color: #c6c6c6; }
::-moz-placeholder { color: #c6c6c6; }
:-ms-input-placeholder { color: #c6c6c6; }
:-moz-placeholder { color: #c6c6c6; }
/*reset end*/

hr { height: 1px; margin: 30px 0; background: #e7e7e7; border: none; }

.web { display:block; }
.mobile { display:none; }

.fL { float:left; }
.fR { float:right; }

.clr { overflow: auto; clear:both; }

.mC { margin: 0 auto; }
.tL { text-align:left; }
.tR { text-align:right; }
.tC { text-align:center; }
.tB { font-weight:500; }
.tLine { padding-bottom: 2px; border-bottom: solid 1px; }

.midT { font-size: 16px; } 
.smallT { font-size: 14px; } 
.smallerT { font-size: 12px; } 
.bigT { font-size: 18px; } 
.biggerT { font-size: 22px; }
.biggestT { font-size: 26px; }

.botM0 { margin-bottom: 0; }
.botM { margin-bottom: 10px; }
.botM2 { margin-bottom: 20px; }
.botM3 { margin-bottom: 30px; }

/*-----------------color-----------------*/
.red { color: #EE6352; }
.orange { color: #f6923f; }
.black { color: #000; }
.gray { color: #81786F; }

.bg_white { background: #fff; }
.bg_black { background: #aaa; }
.bg_yellow { background-color: #FFF7EA; }
.bg_gray { background-color: #F3F3F3; }

/*-----------------Input-----------------*/
/*Input*/
input[type="text"],
input[type="password"] { width: 100%; height: 42px; line-height: 38px; padding: 0 10px; font-size: 16px; color: #81786f; background: #fff; border: 2px solid #f6923f; border-radius: 10px; }

textarea { width: 100%; min-height: 100px; max-height: 80px; padding: 10px; font-size: 16px; color: #81786f; border: 2px solid #f6923f; border-radius: 10px; resize : none; }

/*select*/
select { -moz-appearance: none; -webkit-appearance: none; appearance: none; outline: none;
  width: 100%; height: 42px; padding: 0 30px 0 10px; vertical-align: middle; font-size: 16px; color: #81786f; background: #fff url(../images/icon_arrow_01.svg); background-repeat: no-repeat; background-size: 16px; background-position: calc(100% - 10px) center; border: 2px solid #f6923f; border-radius: 10px; }
select::-ms-expand { display: none; }
select option { -moz-appearance: none; -webkit-appearance: none; appearance: none; color: #81786f; }
select option:hover { color: #fff; background-color: #666; }

/*radio*/
input[type="radio"] { display: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; opacity: 0; }
input[type="radio"] + span.icon { display: inline-block; width: 14px; height: 14px; line-height: 18px; margin-right: 4px; vertical-align: middle; background: #fff; border: solid 2px #ccc; border-radius: 9px; }
input[type="radio"]:checked + span.icon { background: #f6923f url(../images/icon_radio.svg) center no-repeat; background-size: 14px; border: solid 2px #f6923f;  }

/*checkbox*/
input[type="checkbox"] { display: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; opacity: 0; }
input[type="checkbox"] + span.icon { display: inline-block; width: 18px; height: 18px; line-height: 18px; margin-right: 4px; vertical-align: middle; background: #ccc; border-radius: 9px; }
input[type="checkbox"]:checked + span.icon { background: #f6923f url(../images/icon_check.svg) 2px center no-repeat; background-size: 14px; }

.checklabel { display: block; cursor: pointer; padding: 8px 0; font-size: 18px; line-height: 130%; }
.checklabel span { vertical-align: middle; }



/*-----------------頁面-----------------*/
.wrapper {  }
.container { /*min-height: calc(100vh - 323px);*/ }
.pagesize { width: 800px; max-width: calc(100vw - 40px); height: 100%; margin: 0 auto;}

.header { display: flex; justify-content: space-between; -ms-align-items: center;
align-items: center; height: 100px; padding: 0 30px; border-top: solid 10px #efac00; border-bottom: 1px solid #81786f; }
.header .logo a { display: block; width: 160px; height: 50px; background: url(../images/logo_header.svg); background-size: 100% auto; }
.header_menu {  }
.header_nav { display: inline-flex; }
.header_nav a { margin-left: 25px; font-weight: 500; }
.header_nav a.on { color: #f6923f; }

/*footer*/
.footer { height: 160px; padding: 30px 12px; color: #fff; background: #efac00 url(../images/bg_logo.svg); background-size: auto; }
.footer_menu { display: flex; justify-content: space-between; -ms-align-items: center;
align-items: center; margin: 0 0 20px; padding: 0 0 20px; border-bottom: solid 1px #fff; }
.footer_logo { width: 126px; height: 40px; background: url(../images/logo_footer.svg); background-size: 100% auto; }
.footer_nav { display: flex; }
.footer_nav a { color: #fff; margin-left: 25px; }
.footer_info { display: flex; justify-content: space-between; }
.footer_info p { font-size: 14px; }
.footer_contact span { margin-right: 20px; }

.btn {  }
.btn a { display: block; padding: 10px 15px; text-align: center; color: #fff; background: #f6923f; border-radius: 10px; transition: 0.2s; }
.btn a:hover { background: #efac00; }
.btn a.btn_white { color: #f6923f; background: #fff; border: solid 2px #f6923f; }

.btn.login { display: inline-block; margin-left: 25px; }
.btn.login a { display: none; padding: 10px 15px; color: #fff; border-radius: 10px; }
.btn.login .on { display: inline-block; }


/*menu*/
.pagemenu { display: none; }

/*popup*/
.popup { display: none; }
.popup.open { display: block; }
.popup_bg { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(166,166,166,0.5); z-index: 999; }
.popup_area { position: absolute; top: 120px; left: calc(50% - 300px); width: 600px; box-sizing: border-box; padding: 60px 40px 40px; z-index: 1001; background: #fff;  border: 2px solid #A6A6A6; border-radius: 10px; }
.popup_inner { min-height: 150px; }
.popup_inner p { line-height: 1.3em; }
.popup_close { position: absolute; top: 15px; right: 15px; width: 28px; height: 28px; background: url(../images/icon_close_02.svg) center no-repeat; background-size: 100% }
.popup_area.video{width: 800px; left: calc(50% - 400px);}
/*btn*/
.popup .btn { text-align: center; }
.popup .btn a { display: inline-block; }


@media screen and (max-width: 900px) {
  .header { padding: 0 15px; }
  .header_nav a { margin-left: 10px; }
  .btn.login { margin-left: 15px; }

  /*footer*/
  .footer { padding: 20px 12px; }
  .footer_info { display: block; }
  .footer_info p { margin-bottom: 5px; }
  .footer_nav a { margin-left: 10px; }
	.popup_area.video{width: calc(100% - 20px); left:10px;}
}


/*-----------------小網-----------------*/
@media screen and (max-width: 768px) {
  .web { display: none; }
  .mobile { display: block; }
  
  .pagesize { width: calc(100% - 30px); max-width: 100%; }

  hr { margin: 20px 0; }

  /*header*/
  .header { height: 80px; padding: 0 15px; border-top: solid 8px #efac00; }
  .header .logo a { width: 110px; height: 36px; }
  .btn.login { margin: 0; }
  .btn.login a { font-size: 14px; }
  .header_menu a.btn_pagemenu { display: inline-block; width: 34px; height: 34px; margin-left: 15px; vertical-align: middle; background: url(../images/icon_hamburger.svg) center no-repeat; }

  /*footer*/
  .footer { height: auto; }
  .footer_menu { display: block; padding: 0; }
  .footer_logo { width: 106px; height: 35px; margin-bottom: 15px; }
  .footer_nav { justify-content: space-between; margin-bottom: 20px; }
  .footer_nav a { margin: 0; }
  .footer_contact span { display: block; margin-bottom: 5px; }

  /*menu*/
  .pagemenu { display: block; position: fixed; top: 0; left: -100vw; width: 100vw; height: 100vh; background: #fff; padding: 20px 0; z-index: 999;}
  .pagemenu.open {  }
  .pagemenu ul { display: flex; -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column; 
  position: relative; height: 100%; justify-content: center; padding: 15px; background: #f6923f url(../images/bg_logo.svg); background-size: auto;  }
  .pagemenu ul::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 0 100vw 40px 0; border-color: transparent #fff transparent transparent; }
  .pagemenu ul::after { content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 40px 100vw; border-color: transparent transparent #fff transparent; }
  .pagemenu li { margin-bottom: 35px; }
  .pagemenu li a { display: block; font-size: 20px; font-weight: 500; color: #fff; }
  .pagemenu.open .pagemenu_close { position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; background: url(../images/icon_close.svg) center no-repeat; background-size: 100%; z-index: 1000; }
}

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

  /*footer*/
  .footer_nav { flex-wrap: wrap; margin-bottom: 5px; }
  .footer_nav li { flex: 1 1 33%; margin-bottom: 15px; }
  .footer_nav li:nth-child(3n+2) { text-align: center; }
  .footer_nav li:nth-child(3n) { text-align: right; }
  .footer_nav a { font-size: 14px; }

  /*popup*/
  .popup_area { top: 20px; left: 10px; width: calc(100% - 20px); padding: 50px 20px 20px; }
  .popup_close { top: 10px; right: 10px; }
	.popup_area.video{width: calc(100% - 20px); left:10px;}
}