@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
A:link { FONT-STYLE: normal; TEXT-DECORATION: none; color: #2182ac; transition:0.3s;} 
A:visited { FONT-STYLE: normal; TEXT-DECORATION: none; color: #2182ac} 
A:active { FONT-STYLE: normal; TEXT-DECORATION: none; color: #2182ac} 
A:hover {FONT-STYLE: normal;  TEXT-DECORATION: none; opacity:.7;}
html {font-size: 62.5%; height: 100%;}
body {
	margin:0px; padding:0px; height: 100%;
	font-size: 1.6rem;
	color:#333;
	line-height: 1.5;
  font-family:Arial, Helvetica,'Noto Sans TC', 微軟正黑體, sans-serif; }
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.c_white{ color: #fff;}
.c_black{color: #000; font-size: 24px;}
.both{clear: both;}
.send{ text-align:center;}
.send input{font-size:2.2rem;color:#fff; border:0; border-radius: 3px; letter-spacing: 5px; padding: 10px 50px; margin: 30px 0; background-color:#2182ac;}
.send input:hover{background-color:#aaa;}
select, input, textarea{font-family:Arial, Helvetica,'Noto Sans TC', 微軟正黑體, sans-serif;
	border-radius: 5px;padding: 10px; background-color: #f5f5f5; border: 1px solid #e7e7e7;}
.navigation {
  position: relative;
  display: table;
  width: 100%; }

.logo {
  position: relative;
  display: inline-block;
  float: left;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;margin: 0 20px; }
.logo img {
  height: 70px;
  transition: all 0.3s ease-in-out; }
.nav-dpdown.navbar-show .logo img { height: 50px;}
.navmu{
	position: relative;
  display: inline-block;
  float: right;
    margin-top: 8px;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
}
.navbar-show .navmu{margin-top: 0px;}
/*nav*/
#nav_bgbk .nav-pull {
	display: none!important;
  color: #333;
	padding: 22px 20px;
	border: 0;
	outline: 0;
    background-color: transparent;
}
#nav_bgbk .nav-pull.nav-close{display: block!important;animation: cls_show 1s forwards;opacity: 0;}
@keyframes cls_show {
  100% {opacity: 1;
	transition: opacity 1s;
  }
}
#nav_bgbk .nav-pull.nav-close.collapsed{display: none!important;}
#nav_bgbk .icon_close::before,
#nav_bgbk .icon_close::after {
  background-color: #333;
}
#nav_bgbk.nav-org, #nav_bgbk .nav-dpdown-mb{background: rgba(255,255,255,1);opacity: 1;}
#nav_bgbk.navbar{}
#nav_bgbk.navbar-show {
  background: #fff; opacity: .8;
}

.nav-dpdown {
  left: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.45s ease;
  z-index: 1030; }

  .nav-dpdown.nav-org.opacity {
    /*background: none !important; */}
  .nav-dpdown .nav-close {
    left: 0.6875rem;
    position: fixed;
    top: 0.75rem;
    z-index: 1000; }
  .nav-dpdown .icon_hamburger {
    content: "";
    width: 16px;
    -webkit-box-shadow: 0 -6px 0 1px,0 0 0 1px,0 6px 0 1px;
    -moz-box-shadow: 0 -6px 0 1px,0 0 0 1px,0 6px 0 1px;
    box-shadow: 0 -6px 0 1px,0 0 0 1px,0 6px 0 1px; }
  .nav-dpdown .icon_close {
    position: relative;
    width: 21px;
    height: 21px;
    overflow: hidden; }
    .nav-dpdown .icon_close::before, .nav-dpdown .icon_close::after {
      content: '';
      position: absolute;
      height: 2px;
      width: 100%;
      top: 50%;
      left: 0;
      margin-top: -1px; }
    .nav-dpdown .icon_close::before {
      transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg); }
    .nav-dpdown .icon_close::after {
      transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg); }

.nav-dropdown {
	float: right;
  display: table !important;
  font-size: 0.75rem;
  font-weight: 700;
  height: auto !important; 
	margin: 0 20px 0 0;
	padding: 0;}
  .nav-dropdown .nav-item {
    display: table-cell;
    float: none;
	  font-size: 16px;
    vertical-align: middle; }
.nav-dropdown .nav-item a{ display: block; font-size: 2rem; padding: 10px 20px; }
.nav-dropdown .nav-item a:hover{ }
.btn_tel{ text-align: center;}
.nav-dropdown .nav-item.btn_tel a{ color: #2182ac;font-size: 1.6rem; border-radius: 50px;border: 1px solid #2182ac; padding: 10px 20px;}
.nav-dropdown .nav-item.btn_tel a:hover{ color: #fff; background-color: #2182ac;}

/*mb-size*/
.nav-dropdown.nav-cutover-xl {
  bottom: 0;
  display: none;
  left: 0;
  overflow-x: hidden;
  position: fixed;
  top: 0;
  transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  width: 18.75rem;
  z-index: 999; }
@media (max-width: 767px) {
  .nav-dropdown.nav-cutover-sm {
    bottom: 0;
    display: none;
    left: 0;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    width: 60%;
    z-index: 999; } }

.nav-dpdown-mb {
  display: block !important;
  overflow-x: hidden;
  overflow: auto;
  padding-top: 8rem; }
  .nav-dpdown-mb::after {
    content: "";
    display: block;
    height: 3rem;
    width: 100%; }
  .nav-dpdown-mb.collapse.in ~ .nav-close {
    display: block !important; }
  .nav-dpdown-mb.collapsing, .nav-dpdown-mb.collapse.in {
    transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out; }
  .nav-dpdown-mb.collapsing[aria-expanded="false"] {
    transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%); }

/*all*/
#bg_main{ margin-top: 44px;}
#bg_main img{max-width: 100%;}
.pic{text-align: center;}
.pic img{}

/*contact*/
.tit{ display: table; border-bottom: 2px solid;font-size: 3rem; font-weight: bolder; letter-spacing: 2px; text-align: center; margin: 40px auto;}
.con{width: 100%; margin: 100px auto 0; padding: 20px 10%; background-color: #ffff;}
.con_form{float: left; width: calc(100%/2 - 0%); margin: 0 0 20px 0;}
.con_content{width: 100%; margin-bottom: 20px;}
.contact_form{width:90%;}
.con_content .contact_form{width: 97%;}
.con_form label{ font-size: 2rem;margin-top: 20px;}
.agree{text-align: center;}
.popup_tel{text-align: center; font-size: 2.4rem;width: 360px;}
a.pop_telno{display: block; color: #fff;font-size: 2rem;background-color: #233d52; margin: 10px; padding: 10px; }

/*agree*/
#twzipcode select{display: block; font-size: 1.6rem;width: 90%;margin:10px 0 20px 0;padding: 14px;}
form .check_radi {
    padding-left: 36px;
    line-height: 22px;
    text-align: left;
    width: auto;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
form .check_radi .checkmark, form .check_radi input {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
}
form .check_radi input {
    opacity: 0;
    cursor: pointer;
    z-index: 5;
}
form .check_radi .checkmark {
    background-color: #fff;
    border: 1px solid #e5e5e5;
}
form .check_radi .checkmark:after {
    content: "";
    position: absolute;
    top: -5px;
    left: 5px;
    display: none;
    width: 24px;
    height: 24px;
    background: url(../images/check.png) no-repeat 50%/contain;
}
form .check_radi input:checked~.checkmark:after {
    display: block;
}


/*footer*/ 
.fot_add .map { width: 100%; height: 380px;}
.fot_block{display: flex; flex-wrap: wrap;  width: 90%; margin: 20px auto 150px;}
.fot_logo img{ width: 200px;}
.fot_logo{width: 50%; font-size: 1.8rem; color: #999;line-height: 2;}
.fot_logo ul{padding-left: 20px;}
.fot_logo ul li{list-style: none;}
.fot_logo ul li strong{color: #000;font-size: 3rem;}
.fot_add{position: relative; min-height: 1px; ; width: 50%;
-webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 95%; margin: auto;}
#footer{position: fixed;display: flex; z-index: 99; bottom: 0; flex-wrap: wrap; color: #fff; font-size: 1.8rem; width: 100%;}
#footer div{width: 33.33%; text-align: center;}
#footer div a{ display: block; padding: 15px; }
#footer div a:hover{opacity: 1;}
#footer .tel a{color: #fff; background-color: #e56a33;}
#footer .tel a:hover{ background-color: #f48451;}
#footer .fb a{color: #fff; background-color: #3b5998;}
#footer .fb a:hover{background-color: #5678bf;}
#footer .message a{color: #fff; background-color: #0084ff;}
#footer .message a:hover{background-color: #00c6ff;}


/*  rwd table  */
.rwd-table {border-collapse: collapse;}
.rwd-table th, td {}
@media screen and (max-width: 480px) {
.rwd-table tr { border: 1px solid #d0d0d0;}
.rwd-table th { display: none;}
.rwd-table td { display: block; border: none;text-align: left;}
.rwd-table td:before {content: attr(data-th) " ";  float: left;  font-weight: bold; margin-left: 10px; min-width: 100px;}
}

/*RWD Youtube 以及 Vimeo*/
.video-container{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed{position:absolute;top:0;left:0;width:100%;height:100%;}

@media (max-width: 767px) {
#nav_bgbk.nav-org, #nav_bgbk.navbar-show{background: rgba(255, 255, 255, 0.8);}
#nav_bgbk .nav-dpdown-mb.in {background: rgba(255,255,255,1);
	-moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.3);
-webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.3);
box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.3);}
.logo img {height: 40px;}
.nav-dpdown.navbar-show .logo img {  height: 40px;}
#nav_bgbk .nav-pull {display: block!important;}
.nav-dropdown .nav-item{display: block;border-bottom: 1px solid #eee;}
.nav-dropdown .nav-item.btn_tel{border-bottom: 0;}
.nav-dropdown .nav-item.btn_tel a{ width: 90%;  margin: 30px auto;}
#nav_bgbk.navbar-show {opacity: 1;}
.pic img{width: 100%;}
.con {width:100%;}
.con_form{width:100%;}
.contact_form{width:100%;}
.con_content .contact_form {width: 100%;}

.add_list{display: inline-block;float: none;text-align: center;width: 100%;margin: 0 0 20px 0;}
}

@media (max-width: 640px) {
.fot_block{display: block;}
.fot_logo, .fot_add{width: 100%;font-size: 1.6rem;}
.fot_logo ul li strong{font-size: 2rem;}
#footer div {line-height: 1;}
}
@media (max-width: 440px) {
.tel i{display: block;}
#footer .fa { display: block;}
}