/* RESET All ELEMENT */
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
html, body, div, span, table, caption, tbody, tfoot, thead, tr, th, td, font, img, small, strong, sub, sup, p, a, dl, dt, dd, ol, ul, li, form, label {
  vertical-align: baseline;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  outline: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

/* SPECIAL RESET */
ol, ul {
  list-style: none;
}

/*th,td{font-weight:normal;text-align:left;}*/
table {
  border-collapse: separate;
  border-spacing: 0;
}

:focus {
  outline: none;
}

/*============================================
=                    Base                    =
============================================*/
html * {
  max-height: 1000000px;
  /*-webkit-text-size-adjust: 100%;*/
}

a {
  color: #535353;
  text-decoration: none;
}

a, area {
  outline: none;
  hlbr: expression(this.onFocus=this.blur());
}

img {
  vertical-align: top;
}

/*iframeRwd*/
/*=============================================
=                  All setting               =
=============================================*/
/*=============================================
=                   custom                    =
=============================================*/
.btn, .btn_more, .btn_search {
  position: relative;
  display: inline-block;
  padding: 10px 0 12px;
  line-height: 1.2;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  letter-spacing: 1px;
  -webkit-transition: all .6s;
  transition: all .6s;
  font-size: 18px;
}

.btn:hover, .btn_more:hover, .btn_search:hover {
  -webkit-transition: all .6s;
  transition: all .6s;
}

.btn_more {
  width: 100%;
  display: block;
  border: 1px solid #efefef;
  color: #545454;
  font-weight: 600;
}

.btn_more p, .btn_more .icon {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.btn_more .icon {
  width: 15px;
  height: 15px;
  background: #545454;
  border-radius: 100%;
  margin: 3px 5px 0;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.btn_more .icon:before, .btn_more .icon:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 1px;
  background: #fff;
}

.btn_more .icon:before {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg);
}

.btn_more .icon:after {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.btn_more:hover {
  border: 1px solid #FFB197;
  color: #000;
}

.btn_more:hover .icon {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transition: all .3s;
  transition: all .3s;
  background: #FFB197;
}

.btn_close {
  display: block;
  position: absolute;
  top: 40px;
  right: 10px;
  width: 20px;
  height: 20px;
  background: #E53333;
  border-radius: 100%;
  z-index: 11;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: all .3s;
  transition: all .3s;
}

.btn_close:before, .btn_close:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: #fff;
}

.btn_close:before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}

.btn_close:after {
  -webkit-transform: translate(-50%, -50%) rotate(135deg);
          transform: translate(-50%, -50%) rotate(135deg);
}

.btn_close:hover {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transition: all .3s;
  transition: all .3s;
  background: #c20000;
}

.btn_search {
  width: 100%;
  color: #fff;
  background: #0066CC;
  margin: 1rem auto;
  border-radius: 7px;
}

.btn_search .icon, .btn_search p {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.btn_search .icon {
  width: 15px;
  height: 15px;
  margin: 0 5px;
  background: url(../img/icon2.svg) 50% 50% no-repeat;
}

.btn_search:hover {
  background: #3a8ee2;
}

.btn_popMore {
  position: relative;
  color: #545454;
  font-weight: 400;
  display: inline;
  border-bottom: 2px solid #545454;
  padding-bottom: 2px;
  letter-spacing: .5px;
  font-size: 18px;
  line-height: 1.7;
  -webkit-transition: all .6s;
  transition: all .6s;
}

.btn_popMore .liDec {
  position: relative;
  display: inline-block;
  margin: 0 5px;
}

.btn_popMore .liDec i {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(45deg) skew(10deg, 10deg);
          transform: rotate(45deg) skew(10deg, 10deg);
  margin: 0 auto;
  -webkit-animation: arrowAni1 1s infinite;
          animation: arrowAni1 1s infinite;
}

.btn_popMore .liDec i:nth-child(1) {
  -webkit-animation-delay: .6s;
          animation-delay: .6s;
}

.btn_popMore .liDec i:nth-child(3) {
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}

@-webkit-keyframes arrowAni1 {
  0% {
    opacity: 1;
  }
  80% {
    opacity: .3;
  }
}

@keyframes arrowAni1 {
  0% {
    opacity: 1;
  }
  80% {
    opacity: .3;
  }
}

.selectWrap {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 3rem auto 1.5rem;
}

.selectBar {
  position: relative;
  display: inline-block;
  width: 100%;
  -webkit-transition: all .6s;
  transition: all .6s;
}

.selectBar .option {
  position: relative;
  display: block;
  font-weight: 600;
  margin: 10px 0;
  text-align: left;
  font-size: 18px;
  line-height: 1.2;
}

.selectCont {
  position: relative;
  display: inline-block;
  float: left;
  width: 100%;
}

.selectCont_35 {
  width: 35%;
  margin: 0 .8% 0 0;
}

.selectCont_20 {
  width: 20%;
  margin: 0 .8%;
}

.selectCont_20:nth-child(4) {
  margin: 0 0 0 .8%;
}

.selectResult {
  position: relative;
  display: inline-block;
  width: 100%;
  color: #E53333;
  text-align: center;
  font-weight: 600;
}

.ss-main {
  border: 1px solid #adadad;
  padding: 8px 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 40px;
}

.ss-main:focus {
  border: 2px solid #FFB197;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: all .6s;
  transition: all .6s;
}

.ss-main .ss-values .ss-single {
  color: #000;
  font-weight: 700;
}

.ss-main .ss-values .mainOpt {
  position: relative;
  display: block;
  width: 100%;
}

.ss-main .ss-values .subOpt {
  display: none;
}

.ss-content {
  font-family: 'Noto Sans TC','Ubuntu';
}

.ss-content .ss-search {
  color: #545454;
  font-weight: 700;
}

.ss-content .ss-search input {
  border-radius: 0;
  padding: 8px 5px 6px 20px;
  line-height: 1.2;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.ss-content .ss-search input:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.ss-content .ss-search input::-webkit-input-placeholder {
  color: #e0e0e0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.ss-content .ss-search input:-ms-input-placeholder {
  color: #e0e0e0;
  box-shadow: none;
}

.ss-content .ss-search input::-ms-input-placeholder {
  color: #e0e0e0;
  box-shadow: none;
}

.ss-content .ss-search input::placeholder {
  color: #e0e0e0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.ss-content .ss-list .ss-option {
  font-weight: 700;
  color: #000;
  display: block;
}

.ss-content .ss-list .ss-option b {
  font-size: 12px;
}

.ss-content .ss-list .ss-option:hover, .ss-content .ss-list .ss-option:focus {
  background: #adadad;
}

.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
  background: #adadad;
}

.ss-content .ss-list .ss-option .mainOpt {
  position: relative;
  display: block;
  width: 100%;
}

.ss-content .ss-list .ss-option .subOpt {
  position: relative;
  font-size: 12px;
  letter-spacing: -1px;
  color: #545454;
  display: inline-block;
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text {
  color: #adadad;
  border-bottom: 1px solid #adadad;
  padding-bottom: 5px;
  font-size: 12px;
  padding: 10px 0 3px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.tableWrap.hide {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .6s;
  transition: all .6s;
  margin-top: 100px;
}

.tableWrap.on {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 1s;
  transition: all 1s;
  margin-top: 0;
}

.tableForm {
  position: relative;
  margin: 3% auto;
}

.tableForm .tableCus, .tableForm .table th, .tableForm .table tr, .tableForm .table td {
  width: 50%;
  text-align: center;
  padding: 8px 17px 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-weight: 600;
  border-bottom: 4px solid #fff;
}

.tableForm .table {
  position: relative;
  width: 100%;
  height: auto;
  background: #fff;
  z-index: 2;
  font-size: 18px;
  line-height: 1.5;
  overflow: hidden;
  color: #000;
  -webkit-transition: all .6s;
  transition: all .6s;
}

.tableForm .table tbody {
  width: 100%;
}

.tableForm .table .selectTab {
  position: relative;
  display: inline-block;
  padding: 0 25px;
  font-weight: 800;
}

.tableForm .table th {
  background: #FFB197;
}

.tableForm .table tr:nth-child(even) {
  background: #f7f7f7;
}

.tableForm .table tr:nth-child(odd) {
  background: #efefef;
}

.tableForm .table .tbR::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.5px;
  height: 70%;
  background: #000;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.tableForm .table .tbL::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 70%;
  background: #000;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.tableForm .table.popHead {
  width: 100%;
  background: #FFB197;
  font-weight: 600;
}

.tableForm .table .Tlist {
  position: relative;
  display: inline-block;
}

.tableForm .table .modify {
  font-size: 14px;
  min-width: 35px;
  margin: 0 8px;
}

.tableForm .table .modify .icon_type, .tableForm .table .modify .up .icon, .tableForm .table .modify .fall .icon, .tableForm .table .modify .equal .icon {
  position: relative;
  display: inline-block;
  margin: 5px 2px 2px;
}

.tableForm .table .modify .icon_dec:before, .tableForm .table .modify .up:before, .tableForm .table .modify .fall:before, .tableForm .table .modify .equal:before {
  content: '(';
  display: block;
  position: absolute;
  top: 50%;
  left: -5px;
  width: 2px;
  height: auto;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.tableForm .table .modify .icon_dec:after, .tableForm .table .modify .up:after, .tableForm .table .modify .fall:after, .tableForm .table .modify .equal:after {
  content: ')';
  display: block;
  position: absolute;
  top: 50%;
  right: 2px;
  width: 2px;
  height: auto;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.tableForm .table .modify .up {
  color: #E53333;
}

.tableForm .table .modify .up .icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 8px 5px;
  border-color: transparent transparent #E53333 transparent;
}

.tableForm .table .modify .fall {
  color: #0066CC;
}

.tableForm .table .modify .fall .icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #0066CC transparent transparent transparent;
}

.tableForm .table .modify .equal {
  color: #adadad;
}

.tableForm .table .modify .equal .icon {
  width: 5px;
  height: 1px;
  background: #adadad;
  margin: 0 8px 4px;
}

.tableForm .table .modify .new .icon {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: -5px 5px -3.5px;
  background: url(../img/icon1.svg) 50% 50% no-repeat;
  background-size: auto 100%;
}

.popForm {
  padding: 60px 10px 30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #adadad;
  border-radius: 5px;
  background: #fff;
}

.popForm .list {
  position: relative;
  display: inline-block;
  padding: 0 1rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  list-style: none;
  color: #adadad;
  font-size: 16px;
}

.popForm .list p {
  position: relative;
  display: inline-block;
  text-align: center;
  font-size: 20px;
  margin: 8px auto 15px;
}

.popForm .list li {
  text-align: left;
  line-height: 1.5;
}

.popForm .list li span {
  position: relative;
  display: inline-block;
  margin: 0 5px 0 0;
}

.popForm .list ol {
  position: relative;
  display: block;
  margin-left: 35px;
}

.popForm .list ol li {
  list-style: disc;
}

.popOpen {
  position: fixed;
  right: 2%;
  bottom: 22%;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 1px solid #f7f7f7;
  color: #f7f7f7;
  padding: 7px 9.5px 12px;
  -webkit-transition: all .6s;
  transition: all .6s;
  z-index: 9;
  background: #FFB197;
  font-size: 12px;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  text-align: center;
  font-family: 'Noto Sans TC','Ubuntu';
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
}

.popup.on {
  width: 100%;
  z-index: 9;
  opacity: 1;
  visibility: visible;
  overflow-y: scroll;
  -webkit-transition: opacity 1s, z-index 2s,visibility 3s;
  transition: opacity 1s, z-index 2s,visibility 3s;
}

.popup.on .popInner {
  z-index: 9;
  -webkit-transition: all .6s;
  transition: all .6s;
  margin-top: 0;
}

.popup.on .popBg {
  -webkit-transition: all .6s;
  transition: all .6s;
  background: rgba(255, 255, 255, 0.7);
}

.popup.hide {
  -webkit-transition: opacity 10s, z-index 10s,visibility 10s ease-in-out;
  transition: opacity 10s, z-index 10s,visibility 10s ease-in-out;
  z-index: 0;
  opacity: 0;
  overflow-x: hidden;
  -webkit-transition-delay: z-index 2s;
          transition-delay: z-index 2s;
}

.popup.hide .popInner {
  -webkit-transition: all .6s;
  transition: all .6s;
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}

.popup.hide .popBg {
  -webkit-transition: all .6s;
  transition: all .6s;
  background: rgba(255, 255, 255, 0);
  -webkit-transition-delay: all .3s;
          transition-delay: all .3s;
  visibility: hidden;
}

.popInner {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
  margin-top: 200px;
  vertical-align: middle;
  padding: 3rem 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.popBg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 2;
  background: rgba(255, 255, 255, 0);
}

.popBg.hide {
  -webkit-transition: all .6s;
  transition: all .6s;
  background: rgba(255, 255, 255, 0);
  -webkit-transition-delay: visibility 3s;
          transition-delay: visibility 3s;
  visibility: hidden;
  opacity: 0;
}

.popBg.on {
  -webkit-transition: all .6s;
  transition: all .6s;
  background: rgba(255, 255, 255, 0.7);
  -webkit-transition-delay: .2s;
          transition-delay: .2s;
  visibility: visible;
  opacity: 1;
}

.popCont {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.popCont.on {
  display: inline-block;
}

.popCont.hide {
  display: none;
}

.popMore {
  position: relative;
  margin: 1rem auto;
}

.popMore li {
  text-align: center;
}

.sch, .schBox, .schBox .icon, .schTag {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.schWrap {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 1.5rem auto;
}

.schBox {
  width: 22%;
  height: auto;
  font-size: 16px;
  padding: 8px 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(10%, #FFB197), to(#FFCC33));
  background-image: linear-gradient(90deg, #FFB197 10%, #FFCC33 100%);
  border-radius: 50px;
  min-width: 230px;
  margin: 1% .5%;
  background-size: 100% 100%;
  -webkit-box-pack: center;
  -moz-box-align: center;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.schBox .icon {
  width: 42px;
  height: 35px;
  margin: 0 5px;
  background: url(../img/icon3.svg) 50% 50% no-repeat;
}

.schBox:hover {
  background-size: 500% 300%;
  background-position: 100% 0;
  -webkit-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
}

.schTag {
  font-size: 16px;
  font-weight: 800;
  color: #000;
}

/*=============================================
=                     RWD                     =
=============================================*/
@media screen and (min-width: 1500px) {
  .selectBar .option {
    font-size: 20px;
    margin: 15px 0;
    -webkit-transition: all .6s;
    transition: all .6s;
  }
  .selectResult {
    font-size: 20px;
    margin: 30px auto;
  }
  .ss-main {
    padding: 12px 8px;
    min-height: 55px;
  }
  .ss-main .ss-values .ss-placeholder {
    font-size: 20px;
  }
  .ss-main .ss-values .ss-single {
    font-size: 20px;
  }
  .ss-content .ss-list .ss-option {
    font-size: 18px;
    line-height: 1.5;
  }
  .ss-content .ss-list .ss-option .subOpt {
    font-size: 16px;
  }
  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text {
    font-size: 14px;
  }
  .ss-content .ss-search input {
    padding: 12px 8px 12px 22px;
    font-size: 18px;
  }
  .btn, .btn_more, .btn_search {
    padding: 13px 0 15px;
  }
  .btn_search .icon {
    width: 20px;
    height: 20px;
  }
  .btn_close {
    width: 25px;
    height: 25px;
    top: 45px;
  }
  .btn_close:before, .btn_close:after {
    width: 15px;
  }
  .btn_more .icon {
    width: 20px;
    height: 20px;
    margin: 0 5px;
  }
  .btn_more .icon:before, .btn_more .icon:after {
    width: 10px;
  }
  .tableForm .table th, .tableForm .table tr, .tableForm .table td {
    padding: 12px 17px 10px;
    font-size: 20px;
  }
  .tableForm .table .modify {
    font-size: 16px;
  }
  .popCont {
    max-width: 1100px;
    -webkit-transition: all .6s;
    transition: all .6s;
  }
  .popForm {
    padding: 80px 10px 30px;
  }
}

@media screen and (max-width: 768px) {
  .popCont {
    max-width: 80%;
  }
  .selectCont_35 {
    width: 47%;
    margin: 1% 5% 1% 0;
  }
  .selectCont_20 {
    width: 47%;
    margin: 1% 5% 1% 0;
  }
  .selectCont_20:nth-child(2), .selectCont_20:nth-child(4) {
    margin: 1% 0;
  }
  .tableForm .table th, .tableForm .table tr, .tableForm .table td {
    font-size: 16px;
  }
  .main .page .block .title {
    font-size: 18px;
  }
}

@media screen and (max-width: 414px) {
  .header .menuBox .block .navBtn {
    font-size: 20px;
  }
  .popMore li {
    text-align: left;
  }
  .popForm .list {
    padding: 0 .5rem;
  }
  .popForm .list p {
    font-size: 12px;
  }
  .popForm .list li {
    text-indent: -7.5px;
    margin-left: 10px;
    font-size: 12px;
  }
  .popForm .list ol {
    margin-left: 10px;
  }
  .popForm .list ol li {
    text-indent: 0;
    margin-left: 8px;
  }
  .btn_search {
    font-size: 18px;
  }
  .btn_search .icon {
    width: 20px;
    height: 20px;
  }
  .btn_more {
    font-size: 14px;
    padding: 8px 0 10px;
  }
  .selectCont_35 {
    width: 100%;
    margin: 0;
  }
  .selectCont_20 {
    width: 100%;
    margin: 0;
  }
  .tableForm {
    margin: 3% auto 10%;
  }
  .tableForm .table th, .tableForm .table tr, .tableForm .table td {
    font-size: 14px;
  }
  .tableForm .table .modify {
    font-size: 12px;
  }
  .tableForm .table .modify .icon_type, .tableForm .table .modify .up .icon, .tableForm .table .modify .fall .icon, .tableForm .table .modify .equal .icon {
    margin: 5px 2px 1px;
  }
  .tableForm .table .modify .icon_dec:before, .tableForm .table .modify .up:before, .tableForm .table .modify .fall:before, .tableForm .table .modify .equal:before {
    left: -2px;
  }
  .tableForm .table .modify .icon_dec:after, .tableForm .table .modify .up:after, .tableForm .table .modify .fall:after, .tableForm .table .modify .equal:after {
    right: 3px;
  }
  .tableForm .table .modify .fall .icon {
    border-width: 6px 4px 0 4px;
  }
  .tableForm .table .modify .up .icon {
    border-width: 0 4px 6px 4px;
  }
  .tableForm .table .modify .equal .icon {
    margin: 0 2px 3px;
  }
  .tableForm .table .modify .new .icon {
    width: 20px;
    height: 20px;
  }
  .tableForm .table .tdRank {
    width: 45%;
    text-align: center;
  }
  .tableForm .table .tdSch {
    width: 55%;
  }
  .main .page h3 {
    font-size: 20px;
  }
}
/*# sourceMappingURL=custom.css.map */