ˋ@charset "utf-8";

/*STYLE CLEAR*/
h4#btn_menu{ display: none;}

#rwd_nav { display: none;}

#normal_nav{ /*pc*/
    display: block;}

#off{
    display: none;
}


/*共用*/

.MarginAuto {
 margin:0 auto;
}
.ClearBoth {
 clear:both;
}
.floatLeft {
 float:left;
}
.floatRight {
 float:right;
}
.DisplayInBlock {
 display:inline-block; margin-bottom: 30px
}

.red{color:#ff0000;}
.blue{color:#1785e9;}
.orange{color:#cc6600;}
.red span{color:#ff0000;font-size:1.55em;font-weight:bolder;line-height: 260%;}
.blue span{color:#1785e9;font-size:1.55em;font-weight: bolder;line-height: 260%;}
.gray{ color:#999; margin-left: 30px}
.gray2{ color:#999; margin: auto 2% }
.fs{ font-size: 60%}
.txt_left{text-align: left !important; display: block; padding: 0px 5px}
.oldblue{color:#768da4 !important;}
.title {color:#768da4 !important;margin-top: 30px; margin-left: 0.8em; line-height: 160%; margin-right: 0.8em; letter-spacing: 0px }

article h2{font-weight:700;color:#252525;margin:0.8em auto 0.8em;}
article section{width:100%;margin: auto;}
section h3{font-weight:bold;color:#252525;margin:2.0em auto 0em;padding:10px 15px;background:#f7f7f7;border-radius: 2px; line-height: 140%}
section h3.second{background:none;}

section h4 {
    color: #252525;
    font-size: 120%;
    font-weight:500;
    padding-left: 15px;
    margin: 10px 0 10px 2%;
    background-image: url(../images/icon_arrow-gray.png);
    background-repeat: repeat-y
}

article h2 span, article h3 span {font-size:0.8em;font-weight:normal;}


section ul{width:95%;margin:20px auto;}
section ul li{margin-left:5%;line-height:160%;list-style-type:decimal;}
section ul li img{clear:both;display:block;}


section ol{ width:100%;margin:10px auto;}
section ol li{line-height:200%;list-style-type:decimal;}
section ol li img{clear:both;display:block;}

section img {
    width: 100%;
    display: block;
    height: auto;
    margin: 0 auto;
    
}

section a{ color: #314da5; text-decoration: underline;}
section a:visited{ color: #314da5;}
section a:hover{ color: #414da5;}
section a:active{ color: #dd4b39;}


.topbanner{margin:1.5% auto 0;max-width:1280px;width:100% !important}

 /*----------------------------------
    INDEX
----------------------------------*/


 /*---------------
    contact
---------------*/
.contact{
    width:100%;
    background: #fff !important
}
.contact h2{
    margin:35px auto 20px;
    font-size: 2.4em;
    font-weight: 500 !important;
    line-height: 160%;
    color:#768da4;
    text-align: center; 
}

.contact p{
    margin:30px auto 30px;
    font-size: 1.2em;
    line-height: 220%;
    letter-spacing:1px;
    text-align: center; 
}
.contact ul{
  width: 100%;
  display: flex;
  margin: 30px auto;
  overflow: hidden;
  flex-wrap: wrap;
  list-style: none

}
.contact ul li {
  width:32.3%;
  float:left; 
  text-align:center;    
  border: 1px solid #768da4;
  margin:5px;
  list-style: none;
  display: block
}

.contact ul li a{ display:block;background-color:#fff;color:#4b4a4a;
    position:relative;
    text-decoration: none;
    margin-left: 0px !important;
    list-style: none
    }

.contact ul li:hover {
 /* border: 2px solid #586a7c; */
 box-shadow: 0px 0px 0px 2px rgba(118,141,164,1);
 -webkit-box-shadow: 0px 0px 0px 2px rgba(118,141,164,1);
 -moz-box-shadow: 0px 0px 0px 2px rgba(118,141,164,1);
}

.contact ul li:last-child{
    margin-right:0;
}
.box:nth-child(3n-1){
    margin-left:1.5%;
}

.box:nth-child(3n+1){
    margin-right:1.5%;
}
.contact .bill,.contact .contract,.contact .card,.contact .mail,.contact .more{
    padding: 40px 10px;
}

.contact .error{
    padding: 40px 10px;
}

.contact .pwpw,.contact .ipip{
    padding: 30px 10px 20px;
    
}
.contact dl.bill::before {
  background: url(../images/member/icon_bill.png) no-repeat center center;
  content: "";
  width: 97px;
  height: 97px;
  position: absolute;
  margin-top: -25px;
  margin-left: -150px;
}
.contact dl.contract::before {
  background: url(../images/member/icon_contract.png) no-repeat center center;
  content: "";
  width: 97px;
  height: 97px;
  position: absolute;
  margin-top: -25px;
  margin-left: -150px;
}
.contact dl.card::before {
  background: url(../images/member/icon_card.png) no-repeat center center;
  content: "";
  width: 97px;
  height: 97px;
  position: absolute;
  margin-top: -25px;
  margin-left: -150px;
}

.contact dl.mail::before {
  background: url(../images/member/icon_mail.png) no-repeat center center;
  content: "";
  width: 97px;
  height: 97px;
  position: absolute;
  margin-top: -25px;
  margin-left: -150px;
}
.contact dl.error::before {
  background: url(../images/member/icon_error.png) no-repeat center center;
  content: "";
  width: 97px;
  height: 97px;
  position: absolute;
  margin-top: -30px;
  margin-left: -150px;
}

.contact dl.pwpw::before {
  background: url(../images/member/icon_pw.png) no-repeat center center;
  content: "";
  width: 97px;
  height: 97px;
  position: absolute;
  margin-top: -20px;
  margin-left: -150px;
}

.contact dl.ipip::before {
   background: url(../images/member/icon_ip.png) no-repeat center center;
  content: "";
  width: 97px;
  height: 97px;
  position: absolute;
  margin-top: -18px;
  margin-left: -150px;
}

.contact dl.more::before {
  background: url(../images/member/icon_more.png) no-repeat center center;
  content: "";
  width: 97px;
  height: 97px;
  position: absolute;
  margin-top: -25px;
  margin-left: -150px;
}


.contact dl{
    margin:0px auto; background: #fff !important
}
.contact dt,.contact dd{
    margin-left:57px;
}
.contact dl h3{
    margin:auto;
    margin-left: 10px;
    margin-top: 0px;
    padding-bottom: 5px;
    font-size: 1.3em;
    font-weight:600;
    line-height: 120%;
    letter-spacing:3px;
    color:#768da4;
    background: #fff !important
}
.contact dd{    
}
.contact dd span{font-size:0.6125em;font-weight:normal;color:#768da4;}



 /*---------------
    contact2
---------------*/

.contact_v2{
    width:100%;
    background: #fff !important
}
.contact_v2 h2{
    margin:auto;
    font-size: 2.4em;
    font-weight: 400 !important;
    line-height: 160%;
    letter-spacing:3px;
    color:#768da4;
    text-align: center; 
}
.contact_v2 ul{
  width: 100%;
  display: flex;
  margin: 30px auto;
  overflow: hidden;
  flex-wrap: wrap;

}
.contact_v2 ul li {
  width:42%;
  float:left;  text-align:center;   
  border: 1px solid #768da4;
  margin:5px 3.5%;
  list-style:  none
}


.contact_v2 ul li a{ display:block;
    background-color:#fff;
    color:#4b4a4a;
    position:relative;
    text-decoration: none;
    }

.contact_v2 ul li a:hover{
         /* border: 2px solid #586a7c; */
 box-shadow: 0px 0px 0px 2px rgba(118,141,164,1);
 -webkit-box-shadow: 0px 0px 0px 2px rgba(118,141,164,1);
 -moz-box-shadow: 0px 0px 0px 2px rgba(118,141,164,1);
}
.contact_v2 ul li:last-child{
    margin-right:0;
}
.box:nth-child(3n-1){
    margin-left:1.5%;
}
.box:nth-child(3n+1){
    margin-right:1.5%;
}
.contact_v2 .bank,.contact_v2 .post,.contact_v2 .pwpw2,.contact_v2 .mailorder{
    padding: 30px 10px;
}


.contact_v2 dl.bank::before {
  background: url(../images/member/icon_bank.png) no-repeat center center;
  content: "";
  width: 97px;
  height: 97px;
  position: absolute;
  margin-top: -25px;
  margin-left: -150px;
}
.contact_v2 dl.post::before {
  background: url(../images/member/icon_post.png) no-repeat center center;
  content: "";
  width: 97px;
  height: 97px;
  position: absolute;
  margin-top: -25px;
  margin-left: -180px;
}
.contact_v2 dl.pwpw2::before {
  background: url("../images/member/icon_pw.png") no-repeat center center;
  content: "";
  width: 97px;
  height: 97px;
  position: absolute;
  margin-top: -25px;
  margin-left: -150px;
}
.contact_v2 dl.mailorder::before {
  background: url(../images/member/icon_mail2.png) no-repeat center center;
  content: "";
  width: 97px;
  height: 97px;
  position: absolute;
  margin-top: -25px;
  margin-left: -180px;
}

.contact_v2 dl{
    margin:0px auto; background: #fff !important
}
.contact_v2 dt,.contact dd{
    margin-left:57px;
}
.contact_v2 dl h3{
    margin:auto;
    margin-left: 10px;
    margin-top: 5px;
    padding-bottom: 0px;
    font-size: 1.3em;
    font-weight:600;
    line-height: 160%;
    letter-spacing:3px;
    color:#768da4;
    background: #fff !important
}
.contact_v2 dd{ 
}
.contact_v2 dd span{font-size:0.6125em;font-weight:normal;color:#768da4;}



 /*---------------
    contact3
---------------*/

.contact_v3{
    width:100%;
    background: #fff !important
}
.contact_v3 h2{
    margin:auto;
    font-size: 2.4em;
    font-weight: 400 !important;
    line-height: 160%;
    letter-spacing:3px;
    color:#768da4;
    text-align: center; 
}
.contact_v3 ul{
  width: 100%;
  display: flex;
  margin: 30px auto;
  overflow: hidden;
  flex-wrap: wrap;

}
.contact_v3 ul li {
  width:42%;
  float:left;  text-align:center;   
  border: 1px solid #768da4;
  margin:5px 3.5%;
  list-style:  none
}


.contact_v3 ul li a{ display:block;
    background-color:#fff;
    color:#4b4a4a;
    position:relative;
    text-decoration: none;
    }

.contact_v3 ul li a:hover{
     /* border: 2px solid #586a7c; */
 box-shadow: 0px 0px 0px 2px rgba(118,141,164,1);
 -webkit-box-shadow: 0px 0px 0px 2px rgba(118,141,164,1);
 -moz-box-shadow: 0px 0px 0px 2px rgba(118,141,164,1);
}

.contact_v3 ul li:last-child{
    margin-right:0;
}

.contact_v3 dl{
    margin:0px auto; background: #fff !important;
    padding: 15px 10px

}
.contact_v3 dt,.contact_v3 dd{

}
.contact_v3 dt h3{
    margin:auto;
    font-size: 1.3em;
    font-weight:600;
    line-height: 160%;
    letter-spacing:3px;
    color:#768da4;
    background: #fff !important;
    margin: 0px !important;
    padding: 0px !important
}
.contact_v3 dd{ font-size:1.0em;font-weight:normal;
}



 /*---------------
    contract
---------------*/
.contract{
    width:100%;
    background: #fff !important
}
.contract h2{
    margin:35px auto 0px;
    font-size: 2.4em;
    font-weight: 400 !important;
    line-height: 160%;
    letter-spacing:3px;
    color:#768da4;
    text-align: center; 
}

.contract p{
    margin:30px auto 30px;
    font-size: 1.2em;
    line-height: 220%;
    letter-spacing:1px;
    text-align: center; 
}
.contract ul{
  width: 100%;
  display: flex;
  margin: 30px auto;
  overflow: hidden;
  flex-wrap: wrap;
  list-style: none

}
.contract ul li {
  width:32.3%;
  float:left;  text-align:center;   
  margin:5px;
  list-style: none
}

.contract ul li a{ display:block;background-color:#fff;color:#4b4a4a;
    position:relative;
    text-decoration: none;
    margin-left: 0px !important;
    list-style: none
    }

.contractul a:hover{
    border:0px solid #768da4;
    margin-left: -10px
}
.contract ul li:last-child{
    margin-right:0;
}
.box:nth-child(3n-1){
    margin-left:1.5%;
}
.box:nth-child(3n+1){
    margin-right:1.5%;
}



.contract dl{
    margin:0px auto; background: #fff !important
}
.contract dt,.contact dd{
    margin-left:57px;
}
.contract dl h3{
    margin:auto;
    margin-left: 10px;
    margin-top: 5px;
    padding-bottom: 0px;
    font-size: 1.3em;
    font-weight:600;
    line-height: 160%;
    letter-spacing:3px;
    color:#768da4;
    background: #fff !important
}
.contract dd{   
}
.contract dd span{font-size:0.6125em;font-weight:normal;color:#768da4;}



.index_box{
    width: 100%;
    display: block;
    margin: 0px auto 30px
}
.index_box dl img{ width:80%; height: auto;margin: 8% auto
}
.index_box dl{
    line-height: 200%;
    text-align: left;
    float: left;display: block;
    width: 100%; height:auto;  margin-bottom:50px; position:relative;
}

.index_box dl{
    background: #efefef;
}


.member_login
{
    display: block;
    width: 100%;
    margin: 0px auto 30px;
    line-height: 160%;
    display: block;
    float: left;
    height: auto; 
    border: 1px solid #768da4;
    padding: 2% 2% 0px
}

.login_box
{
    line-height: 160%;
    font-size: 1em;
    text-align: center;
    float: left; 
    display: block;
    width: 30%; height:auto;
    margin:0 auto 5%; 
}
.login_box h2
{
    line-height: 160%;
    font-size: 2.4em;
    text-align: left;
    float: left; 
    display: block;
    margin:0 auto ; 
    clear: both
}
.login_box h3
{
    line-height: 160%;
    font-size: 1.2em;
    text-align: left;
    float: left; 
    display: block;
    margin:0 auto ; 
    clear: both;
    background: #fff;
    padding: 0;
    color:#768da4;
    font-weight: bold
}

.login_box h3 a
{
   text-decoration: none;
   color:#768da4
}

.login_box h3 a:hover
{
   text-decoration: underline;
}

.member_login dt h4
{  
   
  margin-top: 0.4em !important;
  margin-bottom: 0.2em !important

}
.member_login dd
{  margin: 0 0 0 5%

}

.member_login dd h2
{  font-size: 2.8em;
   color:#768da4;
   

}

.member_login dl
{
    line-height: 160%;
    font-size: 1em;
    text-align: left;
    float: right; 
    display: block;
    width: 70%; height:auto;
    margin:0 auto 3%;  
}

.center_box{text-align: center} 

.right_more{ float: right;color:#768da4;}
.right_more a{ text-decoration: none}

.right_more2{ float: right; font-size: 50% !important;color:#768da4;}
.right_more2 a{ text-decoration: none}

.space{ padding-bottom: 30px}


hr.style1{
    border: 1px dashed #999999;
}

.txt_L{font-size: 200%; color:#768da4; padding: 5%; padding-right: 0 !important}

.arrow {
  border: solid #768da4;
  border-width: 0px 3px 3px 0;
  display: inline-block;
  padding: 3px; 
  transform: rotate(-45deg);
  vertical-align: 2px
}



.use
{
    display: block;
    width: 49%;
    margin: 30px auto;
    line-height: 160%;
    float: left;
    height: auto; 
    border: 1px solid #768da4;
    padding: 2%
}

.use:last-child
{float: right
}

.use p
{   
    width: 95%;
    margin: 0 auto 3%
}


.use dt img
{  
}

.use dt h2
{  font-size: 2.8em;
   color:#768da4;
    margin-top: 0.4em !important;
    margin-bottom: 0.2em !important

}

.use dd h2
{  font-size: 2.8em;
   color:#768da4;
    margin-top: 0.4em !important;
    margin-bottom: 0.2em !important

}

.use dl
{
    line-height: 160%;
    font-size: 1em;
    text-align: center;
    float: left; 
    display: block;
    width: 100%; height:auto;
    margin:5% auto; 
}


.service
{
    display: block;
    width: 100%;
    margin: 10px auto;
}

.service p
{
    line-height: 160%;
    margin: 10px;
}

.service dt img
{   width:100%;
    height: auto;
}

.service dt h2
{
    padding-top: 3%;
    font-size: 1.2em;
    font-weight: normal
}



.service dl
{
    line-height: 160%;
    display: flex;
    float: left;
    width: 25%;
    height: auto;
    margin-top: 3%;
    margin-bottom: 3%;
    text-align: center;  justify-content:space-around;
}



.remind_plan{ margin: 0 auto; margin-bottom:5%}
.remind_plan li{ line-height: 200% !important; list-style-type: decimal !important; margin-left: 2.0em}





/*----------------------
    download.html
-----------------------*/


.download_box{
    width: 100%;
    display: block;
    margin: 0 auto 8%;
    padding: 0 auto
}

.download_box img{ width: 4%; height: auto;
    margin-right: 1%;
    float: left;
    padding-top: 5px
}

.download_box ul{
    
}

.download_box li{
    border-bottom: 1px dotted #768da4;
    list-style: none;   
    padding: 2% 3% 1%;
    line-height: 300%;
    font-size: 1.13em;
    
}
.download_box li a{
    text-decoration: none   ;
    letter-spacing: 1px
}

.download_box li a:hover{
    text-decoration: underline;
}

.download_box li:last-child{
    border-bottom: 1px dotted #fff;
}


/*----------------------
    more.html
-----------------------*/


.more_menu
{
   width: 100%;
    display: block;
    margin: 0 auto 5%;
    padding: 0 auto
}

.more_menu:last-child
{float: right
}

.more_menu p
{   
    width: 95%;
    margin: 0 auto 3%
}


.more_menu dt
{  margin-bottom: 5px
}

.more_menu dt h3
{  font-size: 1.2em;
   color:#768da4;
   margin-top: 0px
}

.more_menu dd
{  line-height: 220%;
    font-size: 1.13em;
    padding-left: 3%;
    
}

.more_menu dd a
{
   text-decoration: none;
   color:#252525
}

.more_menu dd a:hover
{
   text-decoration: underline;
}


.more_menu dl
{
    font-size: 1em;
    text-align: left;
    float: left; 
    display: block;
    width: 32%; height:auto;
    margin:0 0.5%; 
}

.more_arrow {
  border: solid #999;
  border-width: 0px 3px 3px 0;
  display: inline-block;
  padding: 2px; 
  transform: rotate(-45deg);
  vertical-align: 2px;
    float:right;
    margin-top: 14px;
    margin-right: 12px
}



.transfer_box{
    width: 100%;
    display: block;
    margin: 8% auto;
    padding: 0 auto
}


.transfer_box h4{
   float: left;
   color: #252525;
   font-size: 1.05em;
   font-weight:bolder!important;
   padding-left: 0;
   margin: 0 auto;
   background-image: none;
}


.transfer_box img{ 
}

.transfer_box ul{
    
}

.transfer_box li{
    list-style-type: disc;
    line-height: 240%;
    font-size: 1.13em;  
}


.merge_box{
    width: 100%;
    display: block;
    margin: 0 auto ;
    padding: 0 auto;
    color:#252525
}

.merge_box p{
    line-height: 200%;
    font-size: 1.13em;  
    margin: 2.5% auto 0;
    width: 90%
}


.merge_box h4{
   float: left;
   color: #252525;
   font-size: 1.05em;
   font-weight:bolder!important;
   padding-left: 0;
   margin: 0 auto;
   background-image: none;
}


.merge_box img{  width: 70%; margin: 25px auto 5px
}

.merge_box ul{ 
    margin: 10px auto !important;
}

.merge_box li{
    list-style-type: disc;
    line-height: 200%;
    font-size: 1.13em;  
}

.merge_box ul li ul{
    list-style-type: none;
    padding-left: 0;
    margin: 0
}

.merge_box ul li ul li{
    list-style-type: square;
    line-height: 180%;
    font-size: 100%;
    margin-left: 3%
}

.ip_box
{
    display: block;
    width: 90%;
    margin: 20px 5%;
    line-height: 160%;
    display: block;
    float: left;
    height: auto; 
    border: 1px solid #768da4;
    padding: 2% 2%
}

.ip_box img
{
    margin: 2% auto;
    width: 50%;
    text-align: center
}

.ip_box ul
{
    list-style: none;
}

.ip_box li
{
    list-style: none;
    font-size: 1.4em;
    line-height: 180%;
    margin-left: 2% 
}

/*----------------------
    step
-----------------------*/

.step_box {
    width:90%;
    margin: 2% auto 4%
}
 .step_box ul {
 list-style: none;  /* 取消默认样式 */
 display: flex; /* 使用flex */
 counter-reset: steps;
 }
  .step_box ul  li {
flex-grow: 1;
display: flex;
justify-content: center;
position: relative;
align-items: center;
margin-left: 0;
}

 .step_box ul  li::before {
width: 5rem;  /* 步骤圆的宽 */
height: 5rem; /* 步骤圆的高 */
background:  #B5B5B5; /* 里面的小圆 */
/*box-shadow: 0 0 0 0.5rem  #B5B5B5, 0 0 0 1rem transparent; /* 两层投影 改变投影颜色就可以实现步骤的不同状态 这里默认未完成状态 */
border-radius: 50%; /* 设置形状为原型 */
margin: 1rem; /* 没有设置margin的话，会位置不正确，因为投影不占用位置，而这里投影确实需要占用，所以手动给margin */
display: block; /* 需要设置为块级 不然不生效*/
counter-increment: steps; /* 使 steps 自增 */
content: counter(steps); /* 修改content的内容为steps的值 */

/* 使 步骤数字水平垂直居中，并设置字号 */
display: flex;
color: white;
justify-content: center;
align-items: center;
font-size: 1.5rem;
 position: relative;
 z-index: 1;
}

 .step_box ul li:nth-child(n+2):after {
content: '';
 height: .3rem;
 width: 100%;
background:  #B5B5B5;
 position: absolute;
 left: -50%;
}

  .step_box ul li div {
  color: black;
 }
  .step_box ul li:first-child div:before {
 /*---content: "第"counter(steps)"步";-----------*/
 content:"設備檢測" ;
 color: inherit;
 position: absolute;
 bottom: -2rem;
 left: 50%;
 transform: translateX(-50%);font-size: 1.2em;color: #737373
}
  .step_box ul li:nth-child(2) div:before {
 /*---content: "第"counter(steps)"步";-----------*/
 content:"線上排除" ;
 color: inherit;
 position: absolute;
 bottom: -2rem;
 left: 50%;
 transform: translateX(-50%);font-size: 1.2em;color: #737373
}
  .step_box ul li:last-child  div:before {
 /*---content: "第"counter(steps)"步";-----------*/
 content:"進行報修" ;
 color: inherit;
 position: absolute;
 bottom: -2rem;
 left: 50%;
 transform: translateX(-50%);font-size: 1.2em;color: #737373
}

 .step_box ul  li.active:nth-child(n+2)::after {
 background:  #B5B5B5;
}

 .step_box ul  li.active::before {
background: #B5B5B5;
/*box-shadow: 0 0 0 0.5rem rgb(255 255 255), 0 0 0 1rem #B5B5B5;*/
}


/*----------------------
    notice
-----------------------*/


.notice { margin-top: 3%}


.notice_item{
    display: table;
  width: 100%;
}

.notice_item2{
    display: table;
  width: 100%;
    font-weight: bold
}


.notice ul{
    margin: 0px !important
    
}

.notice li{
    margin-left: 0px !important;
    border-bottom: 1px solid #ccc;
    padding: 15px 0 !important;
    list-style: none;
    font-size: 1.2em;
    text-align: center

}

.notice_date {
    display: table-cell !important;
  width: 25% !important;
    text-align: center
}


.notice_txt {
    clear: both
}

.flip{margin:0px;padding:5px;cursor:pointer;}
.panel{margin:0px;padding:10px 5px 5px;;border-top:dotted 3px #768da4;display:none; color:#768da4;text-align: left}
.flip1{margin:0px;padding:5px;cursor:pointer;}
.panel1{margin:0px;padding:10px 5px 5px;;border-top:dotted 3px #768da4;display:none; color:#768da4;text-align: left}




/*----------------------
    table
-----------------------*/

table
{
    font-size: 1em;

    width: 94%;
    margin: 10px auto 20px;

    border-spacing: 0;
    border-collapse: collapse;

    text-align: center;

    border: 0;
}
table td,
table th
{
    margin: 0;
    padding: 10px;
}
table thead
{
    font-weight: 600; 

    background-color: #eceeee;
}

table thead th
{
    font-size: 1.2em;
    line-height: 150%;

    padding: 15px 10px;

    vertical-align: middle;
    text-align: center;

    border-left: 1px solid #fff;
}
table thead th span
{
    font-size: .875em;
    font-weight: normal;

    display: block;

    width: 100%;
    margin: auto;
}
table tbody
{
    line-height: 160%;

    border-right: 1px solid #e4e4e4;
    text-align: center;
}
table tbody tr td
{
    color: #666;
    border-bottom: 1px solid #e4e4e4;
    border-left: 1px solid #e4e4e4;
    text-align:center;
}
table tbody tr td span.white-space
{
    white-space: nowrap;
}
table tbody tr:hover td
{
    color: #494a5f;
    background-color: #eff8fb;
}
table img
{
    max-width: 100%;
}

table a
{
    transition: all .5s;
    text-decoration: underline;
}

table a:visited
{
    color: #c50303;
}


table a:hover
{
    text-decoration: none;
}
table .row_headers
{
    font-weight: 600;
}



/*----------------------
    table_v2
-----------------------*/


.table_v2 h2
{  font-size: 2.8em;
   color:#768da4;
    margin-top: 0.4em !important;
    margin-bottom: 0.4em !important

}

.table_v2 
{  font-size: 1.13em;
    margin-top: 0.4em !important;
    margin-bottom: 0.2em !important;
    line-height: 180%

}

.table_v2  p
{   
    width: 50%;
    margin: 1% auto;
    display: block;
    clear: both;
    text-align: center;
    font-size: 1.13em;
    line-height: 160%;
    padding: 3px;
    border:1px solid #999
}.table_v2  p
{   
    width: 50%;
    margin: 1% auto;
    display: block;
    clear: both;
    text-align: center;
    font-size: 1.13em;
    line-height: 160%;
    padding: 3px;
    border:1px solid #999
}


.table_v2  dt h2
{  font-size: 2.8em;
   color:#768da4;
}

.table_v2  dd
{  
}

.table_v2  dl
{
    line-height: 160%;
    font-size: 1em;
    text-align: center;
    float: left; 
    display: block;
    width: 100%; height:auto;
    margin:3% auto 2%; 
}


.table_v2
{
    width: 100%
}



.table_v2 table
{
    font-size: 1em;

    width: 100%;
    margin: 0px auto 20px !important;

    border-spacing: 0;
    border-collapse: collapse;

    text-align: center;

    border: 0;
}
.table_v2 table td,
.table_v2 table th
{
    margin: 0;
    padding: 10px;
}
.table_v2 table thead
{
    font-weight: 600; 

    background-color: #fff !important;
}

.table_v2 table thead th
{
    font-size: 1.2em;
    line-height: 150%;
    vertical-align: middle;
    text-align: center;

    border-left: 1px solid #fff;
}
.table_v2 table thead th span
{
    font-size: .875em;
    font-weight: normal;

    display: block;

    width: 100%;
    margin: auto;
}
.table_v2 table tbody
{
    line-height: 160%;

    border-right: 1px solid #e4e4e4;
    text-align: center;
}
.table_v2 table tbody tr td
{
    color: #666;
    border-bottom: 1px solid #e4e4e4;
    border-left: 1px solid #e4e4e4;
    text-align:left;
}
.table_v2 table tbody tr td span.white-space
{
    white-space: nowrap;
}
.table_v2 table tbody tr:hover td
{
    color: #494a5f;
    background-color: #eff8fb;
}
.table_v2 table img
{
    max-width: 100%;
}

.table_v2 table a
{
    transition: all .5s;
    text-decoration: underline;
}

.table_v2 table a:visited
{
    color: #c50303;
}


.table_v2 table a:hover
{
    text-decoration: none;
}
.table_v2 table .row_headers
{
    font-weight: 600;
}

/*----------------------
    table_v3
-----------------------*/


.table_v3 h2
{  font-size: 2.8em;
   color:#768da4;
    margin-top: 0.4em !important;
    margin-bottom: 0.2em !important

}



.table_v3  p
{   
    width: 50%;
    margin: 1% auto;
    display: block;
    clear: both;
    text-align: center;
    font-size: 1.13em;
    line-height: 160%;
    padding: 3px;
    border:1px solid #999
}


.table_v3  dt h2
{  font-size: 2.8em;
   color:#768da4;
}

.table_v3  dd
{  
}

.table_v3  dl
{
    line-height: 160%;
    font-size: 1em;
    text-align: center;
    float: left; 
    display: block;
    width: 100%; height:auto;
    margin:3% auto 2%; 
}


.table_v3
{
    width: 60%;
    margin: 0 auto
}



.table_v3 table
{
    font-size: 1em;

    width: 100%;
    margin: 0px auto0px !important;

    border-spacing: 0;
    border-collapse: collapse;

    text-align: center;

    border: 0;
}
.table_v3 table td,
.table_v3 table th
{
    margin: 0;
    padding: 10px;
}
.table_v3 table thead
{
    font-weight: 600; 

    background-color: #fff !important;
}

.table_v3 table thead th
{
    font-size: 1.2em;
    line-height: 150%;
    vertical-align: middle;
    text-align: center;

    border-left: 1px solid #fff;
}
.table_v3 table thead th span
{
    font-size: .875em;
    font-weight: normal;

    display: block;

    width: 100%;
    margin: auto;
}
.table_v3 table tbody
{
    line-height: 160%;

    border-right: 1px solid #e4e4e4;
    text-align: center;
}
.table_v3 table tbody tr td
{
    color: #666;
    border-bottom: 1px solid #e4e4e4;
    border-left: 1px solid #e4e4e4;
    text-align:center;
}
.table_v3 table tbody tr td span.white-space
{
    white-space: nowrap;
}
.table_v3 table tbody tr:hover td
{
    color: #494a5f;
    background-color: #eff8fb;
}
.table_v3 table img
{
    max-width: 100%;
}

.table_v3 table a
{
    transition: all .5s;
    text-decoration: underline;
}

.table_v3 table a:visited
{
    color: #c50303;
}


.table_v3 table a:hover
{
    text-decoration: none;
}
.table_v3 table .row_headers
{
    font-weight: 600;
}

/*----------------------
    input info
-----------------------*/


.login{padding:30px auto 20px;width:100%; margin:0 auto;border: 0px solid #ececec;}
.login img{vertical-align:middle; display: inline-table; width: auto;}
.login h2{margin-left:18px !important;}    
.login h2 img{margin-bottom:8px; }   


.info{width:90% !important;margin:10px auto !important;padding-top:10px;}
.info p {
  margin: 10px auto 5px;
  overflow:hidden;color:#555;display:block;
  text-align:left;
  width:95%;
  padding: 3px;
}
.info p img{  vertical-align:middle; margin-bottom:8px; display: inline-table; }
.info p label{width:30%;float:left;font-size:110%;color:#555!important;line-height:1 !important;}

.info_box p {

}

.member_txt{
    font-size: 1.13em
}

.info_message { font-size:1.4em; line-height: 200% !important} 

.forget a {
    margin:0 5px 0 0;
    color: #314da5;
    letter-spacing: 0.05em;
    float:right;
    font-size:14px;
}
.forget a:hover{
    text-decoration:underline;
    }

#alert {
    background-color:#fdecec;
    color: #BD0306;
    display: block;
    font-size: 14px;
    letter-spacing: 0.05em;
    margin:0px auto;
    padding: 8px 5px 6px 5px;
    width:45%;
    text-align:center;
}

.txt_L {  text-align: left;}
.txt_C {  text-align: left;}
.txt_R {  text-align: left;}

.info {color:#555;}
.info label{
    width:15%;
    font-size:1.1em;
    color:#666;
    }

.info input,.info select,.info span,.info p,.info img,.info textarea,.info label{float:left;margin-right:10px;line-height:1;}
.enabled-list,.pblist,.name-list,input[type="checkbox"]{
    margin: 5px auto 0px;
    overflow: hidden;
    display: block;
    text-align: left;
    clear:both;
    line-height:3em;
    padding: 3px;
    }

.choice-list{
    margin: 20px auto 0px;
    overflow: hidden;
    display: block;
    text-align: left;
    clear:both;
    line-height:3em;
    }


.enabled-list img{
    width: auto;    
    display:inline;
    margin:0 5px;
    vertical-align: top
    }


.icon_plus img{
    width: auto;    
    display:inline;
    margin:10px 5px;
    vertical-align: middle
    }

.enabled-list span{
    float: left;display: block; margin-left:0;
    color:#666;
    margin: 0px 0px 10px 0px;

}
.pblist span{
    float: left;display: block; margin-left:0;
    color:#666;
    margin: 0px 0px 0px 0px;

}   
.enabled-list.hb{   
    height:60px;
    width:100%;
    line-height:280%;
}

.enabled-note{
    margin: 5px 0 5px 85px;
    color:#333;
    font-size:14px;
    }

.enabled-list label{
    margin: 0px;
    vertical-align: top;
    line-height: 1.6em;
    width:20%;
    }

.name-list label,.pblist label,.pblist label{
    margin: 10px 0px 5px 0px;
    vertical-align: top;
    /*line-height: 1.6em;*/
    width:20%;
    }

.choice-list label{
    margin: 10px 10px 5px 0px;
    vertical-align: top;
    line-height: 1.6em;
    }

.enabled-list p,.pblist P{
    font-size: 100%;
    color:#666;
    margin: 10px 10px 5px 0px;
    vertical-align: top
    }

.name-list span{
    margin-top:15px;
    padding:0 0px;
    }

.choice-list span{
    margin-top:0px;
    padding:0px;
    width: 75%
    }


.line_normal {
  float: left;
  margin-left: 0%;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px
}

.line_normal_right {
  float: left;
  margin-left: 0%;
  margin-top: 10px;
  margin-bottom: 10px;
}


.note {
  font-size: 1.0em;
  width: 90%;
  float: left;
  font-weight: bold;
  line-height: 150% !important;}

.enabled-list input ,
.enabled-list select, 
.enabled-list textarea,
.pblist input ,
.pblist select,
.enabled-list select, 
.enabled-list textarea,
.pblist2 input ,
.enabled-list select, 
.enabled-list textarea,
.pblist3 input ,
.enabled-list select,
.enabled-list textarea

{
    margin-right:5px;
    margin-bottom: 5px;
    padding: 10px 10px ;
    font-family:"微軟正黑體", Arial, sans-serif;
    letter-spacing:0.1em;
    border-radius: 4px;
    border: 1px solid #999;
    text-align: center;
    color: #9D9D9D;
    }


.info select.add_bbb{
    width: 18%;
    }

.add_b{
    width: 15%;
}

.add_bb{
    width: 50%;
}



.addr{
    
}


.pblist select {
  border-radius: 4px;
  border: 1px solid #999;
  padding: 8px 10px;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  text-align: center;
  color: #9D9D9D;
  width: 12%;
  display: block;
  float: left;
  margin-right: 5px;
  height: 40px;
}

.name-list input{
    margin-right:10px;
    margin-bottom: 10px;
    padding: 10px 10px ;
    font-family:"微軟正黑體", Arial, sans-serif;
    letter-spacing:0.1em;
    border-radius: 4px;
    border: 1px solid #999;
    text-align: left;
    color: #9D9D9D;
    }

.choice-list input{
    margin-right:10px;
    margin-bottom: 10px;
    padding: 10px 10px ;
    font-family:"微軟正黑體", Arial, sans-serif;
    letter-spacing:0.1em;
    border-radius: 4px;
    border: 1px solid #999;
    text-align: center;
    color: #9D9D9D;
    }
.choice-list input[type="radio"]  {
  width: auto !important; display: block !important; margin-top: 15px;  
  }
.choice-list input[type="checkbox"]  {
  width: auto !important; display: block !important; margin-top: 15px;  
  }

.name-list input[type="radio"]  {
  width: auto !important; display: block !important;
  }
.pblist input[type="radio"]  {
  width: auto!important; display: block !important;
  }
.enabled-list input[type="radio"] {
    display: none;
}

.enabled-list  input[type="radio"] + label {
    display: inline-block;
    background-color: #ccc;
    cursor: pointer;
    padding: 5px 10px;
    width: 30%;
}


.enabled-list  input[type="radio"]:checked + label {
    background-color: #b1dcfb;
    color: #333;
}


.enabled-list textarea {
    height: 150px;
    border-radius: 4px;
    border: 1px solid #999;
    padding: 10px 10px;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    text-align: center;
    color: #666;
}

.enabledbox span {
    margin: 10px 10px;
    color: #555;
}

input#date_1, input#date_2 { 
}
    input#add_1, input#add_2, input#add_3, input#add_4 { 
    
}
   input#add_5, input#add_6, input#add_7 { 
     
}
    input#add_8, input#add_9, input#add_10, input#add_11 { 
    
}
input#ip_1,input#ip_2,input#ip_3,input#ip_4,input#ip_5,input#ip_6,input#ip_7,input#ip_8,input#ip_9,input#ip_10,input#ip_11,input#ip_12,input#ip_13,input#ip_14,input#ip_15,input#ip_16 {
  width: 7%; 
}

select#birth_year, select#birth_month, select#birth_day  {
  width: 15%;
    margin-bottom: 30px
}

select#sel_zip, select#sel_city, select#sel_district, select#sel_street, select#sel_street_list, select#credit_card_year, select#credit_card_month {
  width: auto;
}


.date_txt {
    margin: 0px 5px 0px 0px !important;
  line-height: 260% !important;
  font-size: 110%;
  }

.date_txt2  {
  margin: 0px 5px 0px 0px!important;
  line-height: 260% !important;
  font-size: 110%;
  }

.date_txt3  {
  margin: 12px 5px 0px 0px!important;
  line-height: 180% !important;
  font-size: 110%;
    font-weight: 600
  }

.W80 { width:100% !important;}
.W70 { width:90% !important;}
.W50 { width:50% !important;}   
.W68 { width:68% !important;}
.W62 { width:62% !important;}
.W60 { width:80% !important;}
.W42 { width:43% !important;}
.W30 { width:30% !important;}   
.W25 {width:25% !important;}
.W15 {width:15% !important;}

/*----------------------
    BUTTON
-----------------------*/
.btn_a{
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #dcdcdc;
    padding:8px;
    text-decoration:none;
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
    background-color:#ededed;
    color:#333;
    display:inline-block;
    text-shadow:1px 1px 0px #ffffff;
    -webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
    -moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
    box-shadow:inset 1px 1px 0px 0px #ffffff;white-space:nowrap;
}
.btn_a:hover {
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
    background-color:#dfdfdf;
}
.btn_a:active {
    position:relative;
    top:1px;
}
.btn_a:visited{color:#313030;}
.btn_b {
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #dcdcdc;
    padding:6px 15px;
    text-decoration:none;
    background:-moz-linear-gradient( center top, #ffffff 5%, #fafafa 100% );
    background:-ms-linear-gradient( top, #ffffff 5%, #fafafa 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fafafa');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffffff), color-stop(100%, #fafafa) );
    background-color:#ffffff;
    color:#777777;
    display:inline-block;
    text-shadow:-4px -7px 0px #ffffff;
    -webkit-box-shadow:inset -6px -2px 6px 0px #ffffff;
    -moz-box-shadow:inset -6px -2px 6px 0px #ffffff;
    box-shadow:inset -6px -2px 6px 0px #ffffff; margin:0 1%
}.btn_b:hover {
    background:-moz-linear-gradient( center top, #fafafa 5%, #ffffff 100% );
    background:-ms-linear-gradient( top, #fafafa 5%, #ffffff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#ffffff');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fafafa), color-stop(100%, #ffffff) );
    background-color:#fafafa;
}.btn_b:active {
    position:relative;
    top:1px;
}

.btn_c{
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #dcdcdc;
    padding:10px 80px;
    text-decoration:none;
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
    background-color:#ededed;
    color:#333;
    display:inline-block;
    text-shadow:1px 1px 0px #ffffff;
    -webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
    -moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
    box-shadow:inset 1px 1px 0px 0px #ffffff;white-space:nowrap;
    margin: 5px auto 10px; width: 85%; text-align: center; display: block
}
.btn_c:hover {
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
    background-color:#dfdfdf;
}
.btn_c:active {
    position:relative;
    top:1px;
}
.btn_c:visited{color:#313030;}

.btn_d {
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #dcdcdc;
    padding:10px 50px;
    text-decoration:none;
    background:-moz-linear-gradient( center top, #ffffff 5%, #fafafa 100% );
    background:-ms-linear-gradient( top, #ffffff 5%, #fafafa 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fafafa');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffffff), color-stop(100%, #fafafa) );
    background-color:#ffffff;
    color:#777777;
    display:inline-block;
    text-shadow:-4px -7px 0px #ffffff;
    -webkit-box-shadow:inset -6px -2px 6px 0px #ffffff;
    -moz-box-shadow:inset -6px -2px 6px 0px #ffffff;
    box-shadow:inset -6px -2px 6px 0px #ffffff; 
    margin:0 1%
}
.btn_d:hover {
    background:-moz-linear-gradient( center top, #fafafa 5%, #ffffff 100% );
    background:-ms-linear-gradient( top, #fafafa 5%, #ffffff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#ffffff');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fafafa), color-stop(100%, #ffffff) );
    background-color:#fafafa;
}.btn_d:active {
    position:relative;
    top:1px;
}
.btn_e{
    padding:10px 80px;
    text-decoration:none;
    color:#333;font-weight: 600;font-size: 160%;
    display:inline-block;
    margin: 5px auto 10px; width: 85%; text-align: center; display: block
}
.btn_e:hover {
    color:#333;
}
.btn_e:active {
    color:#333;
}

/*----------------------
    submit
-----------------------*/
section .submit{
    clear:both;overflow:hidden;font-size:110%;
    width: 100%;
    margin: 30px auto 50px;
    text-align: center;
}
section .submit input.button_contact{
    border: 1px solid #fbce23;
    background: -webkit-gradient(linear, left top, left bottom, from(#fee158), to(#fdc617));
    background: -webkit-linear-gradient(top, #fee158, #fdc617);
    background: -moz-linear-gradient(top, #fee158, #fdc617);
    background: -ms-linear-gradient(top, #fee158, #fdc617);
    background: -o-linear-gradient(top, #fee158, #fdc617);
    background: linear-gradient(top, #fee158, #fdc617);
    background-color: #fdca3d\9;
    padding: 10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: #242424;
    font-size: 110%;
    font-family: "微軟正黑體", "黑體", Arial, Helvetica, sans-serif;
    text-decoration: none;
    vertical-align: middle;
    margin:30px 12px 0px; 
    width:40%; 
}
section .submit input.button_contact:hover,section .submit input.button_contact2:hover,section .submit input.button_contact3:hover,
section .submit2 input.button:hover, section .submit section.button2:hover{
 border: 1px solid #f2c85c;
 background: -webkit-gradient(linear, left top, left bottom, from(#f2c85c), to(#f0af0b));
    background: -webkit-linear-gradient(top, #f2c85c, #f0af0b);
    background: -moz-linear-gradient(top, #f2c85c, #f0af0b);
    background: -ms-linear-gradient(top, #f2c85c, #f0af0b);
    background: -o-linear-gradient(top, #f2c85c, #f0af0b);
    background: #ffd359\9;
}
section .submit input.button{
        width:40%; 
        margin:0px 0px 10px; 
        padding: 10px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        font-size: 110%;
        font-family: "微軟正黑體", "黑體", Arial, Helvetica, sans-serif;
        text-decoration: none;
        vertical-align: middle;
        }
section .submit input.button{
        border: 1px solid #FFFFFF;
        background:-moz-linear-gradient( center top, #333 5%, #000 100% );
    background:-ms-linear-gradient( top, #333 5%, #000 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333', endColorstr='#000');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #333), color-stop(100%, #000) );
    background-color:#000;
    color:#fff;
    display:inline-block;
        }
section .submit input.button:hover{
        border: 1px solid #FFFFFF;
        background:-moz-linear-gradient( center top, #000 5%, #333 100% );
    background:-ms-linear-gradient( top, #000 5%, #333 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#333');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #000), color-stop(100%, #333) );
    background-color:#000;
        }


@media only screen and (min-width: 768px) and (max-width: 1023px) {
    
    #wrap {
  width: 100%;

}
    
    
.line_normal {
  float: left;
  margin-left: 0;
  width: 80%;
  margin-top: 10px;
  margin-bottom: 10px;
}
    

.contact_v2 dd {
    line-height: 1.25em;
}
.contact_v2 ul li {
   flex: 0 0 55%;
    padding-left: 10px;
    margin:7px auto;
    }
.contact_v2 ul li:last-child {
    margin-right: auto;
}
    
.contract dd {
    line-height: 1.25em;
}

.contract ul li:last-child {
    margin-right: auto;
}
    
.contract ul li {
  width:32.3%;
  float:left;  text-align:center;   
  margin:5px;
  list-style: none
}   
    
    
.choice-list label{
    margin: 10px 0px 5px 0px;
     width: 31%  ;
    }

.choice-list span{
    margin:0px;
    padding:0px;
    width: 100%;
    }
    
.choice-list input{
    margin-right:0px;
    margin-bottom: 5px;
    }
    
.remind_cbox{ width: 95%;
  margin: 20px auto;}
    

    
.enabled-list label,.name-list label{
    width: 100% !important
    }

.enabled-list input,.name-list input{
    width: 60% !important
    }

.info label.m_info{ width: 100% !important
    }
    

.enabled-list,.name-list{
    margin: 0px auto;
    }
.name-list span,.pblist span{
    margin-top:auto;
    }
.W62{width: 100% !important}
    
.table_v2 {
    width: 90%;
    margin: 0 auto
}
    

}input#ip_1,input#ip_2,input#ip_3,input#ip_4,input#ip_5,input#ip_6,input#ip_7,input#ip_8,input#ip_9,input#ip_10,input#ip_11,input#ip_12,input#ip_13,input#ip_14,input#ip_15,input#ip_16 {
  width: 7% !important; 
}
    
input#phone_2, input#user_login, input#invoice_addr_address, input#nameinfo_addr_address{
    width: 60% !important;
}
input#phone_1, input#phone_3,input#zip_1,{
    width: 20% !important;
}
input#user_login{
    width: 60% !important;
}   
/*input#check_login,*/.add_b{
    width: 25% !important;
}


select#birth_year {
  width: 20%;
   margin-top: 10px;
 margin-bottom: 30px;
  clear: both; 
}   
 select#birth_month, select#birth_day {
  width: 20%;
  float:left;
      margin-top: 10px;
 margin-bottom: 30px;
}       
 select#sel_zip {
  width: 20%;
 margin-top: 10px;
 margin-bottom: 10px;
  clear: both; 
}
    
 select#sel_city, select#sel_district, select#sel_street {
  width: 20%;
   margin-top: 10px;
 margin-bottom: 10px;
}       

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

.table_v2 {
    width: 90%;
    margin: 0 auto
}   

.addr {
    width: 100%;
    margin-top: 10px !important
  }

  .note {
    font-size: 0.88em;
    width: 90% !important;
  }
        
     table
    {
        width: 100%;
    }

.remind{ background: #fff !important}



    
.info p {width: 100%;}
    
#alert {width: 92%;}

.login img {width: auto; margin: 0;}  

.info p img {width: auto; margin: 0;} 

ul.submenu li {
    float: left;
    width: 100%;
    border-left: solid 1px #dfdfde;
}   
    
.floatLeft {
    float: none;
}       
    

.btn_a{padding:10px 50px;white-space:nowrap;
}   
.btn_b{ margin-left:0; padding:10px 50px;white-space:nowrap; width:100%; margin-bottom:2%; text-align:center
}
.btn_c{ margin:10px auto;white-space:nowrap; width:90%; margin-bottom:2%; text-align:center; display: block
}   
.btn_d{ margin-left:0; padding:10px 50px;white-space:nowrap; width:100%; margin-bottom:2%; text-align:center
}
 /*----------------------------------
    INDEX
----------------------------------*/

.slogan{
    width: 100%;
    display: block;
    margin: 10px auto ;
}
.slogan dl{
    text-align: center;
    float: left;
    width: 50%; margin-bottom: 5%;
    padding-bottom: 2% }
    
.slogan dt img{  width: 60%
}
.slogan dt h1{ vertical-align: middle ;font-size: 1.4em; font-weight: bold; margin: 0 auto;padding-top: 0; 
}
.slogan dt{ text-align:center;width:100%; margin:3% auto; padding:0 auto; float: left; line-height: 180% ;
}
.slogan dd{width: 100%;line-height: 160%; text-align: center; font-weight: normal;
    }
    
    
.service dl
    {
        line-height: 160%;
        float: left;
        height: auto;
        text-align: center;
    }

.service dt h2{font-size:1.13em
    
    }
.service dt img
    {
        width: 90%;
        height: auto;
    }
    

    

.message{ width: 100%}
.message p{ font-size: 110%; text-align: left;line-height: 160%;}
.message h3{font-size: 111%;line-height: 180% ; text-align: left; margin: 1% 0; padding-top: 4% }

.enabled-list input,.name-list input{
    width: 100% !important
    }
    

        
 /*---------------
    contact3
---------------*/

.contact_v3{
    width:100%;
    background: #fff !important
}
.contact_v3 h2{
    margin:auto;
    font-size: 2.4em;
    font-weight: 400 !important;
    line-height: 160%;
    letter-spacing:3px;
    color:#768da4;
    text-align: center; 
}
.contact_v3 ul{
  width: 100%;
  display: flex;
  margin: 30px auto;
  overflow: hidden;
  flex-wrap: wrap;

}
.contact_v3 ul li {
  width:90%;
  float:left;  text-align:center;   
  border: 1px solid #768da4;
  margin:5px 4%;
  list-style:  none
}


.contact_v3 ul li a{ display:block;
    background-color:#fff;
    color:#4b4a4a;
    position:relative;
    text-decoration: none;
    }

.contact_v3 ul a:hover{
    border:2px solid #768da4;
    margin-left: 0px
}
.contact_v3 ul li:last-child{
    margin-right: 10px !important;
}

.contact_v3 dl{
    margin:0px auto; background: #fff !important;
    padding: 15px 10px

}
.contact_v3 dt,.contact_v3 dd{

}
.contact_v3 dt h3{
    margin:auto;
    font-size: 1.3em;
    font-weight:600;
    line-height: 160%;
    letter-spacing:3px;
    color:#768da4;
    background: #fff !important;
    margin: 0px !important;
    padding: 0px !important
}
.contact_v3 dd{ font-size:1.0em;font-weight:normal;
}

    
.contact_v2 dl h3 {
  margin: auto;
    margin-top: auto;
    margin-left: auto;
  margin-left: 10px;
  margin-top: 5px;
  padding-bottom: 0px;
  font-size: 1.1em;
  font-weight: 600;
  line-height: 160%;
  letter-spacing: 3px;
  color: #768da4;
  background: #fff !important;
}   


.contact_v2 dl.pwpw2::before {
  margin-top: -30px;
  margin-left: -150px;
}
.contact_v2 dl.mailorder::before {
  margin-top: -25px;
  margin-left: -145px;
}
    
.contact ul a:hover{
    margin-left: -10px !important
}

.table_v2  p
{   
    width: 85%;
    margin: 1% auto;
    display: block;
    clear: both;
    text-align: center;
    font-size: 1.13em;
    line-height: 160%;
    padding: 3px;
    border:1px solid #999
}   
    
input#ip_1,input#ip_2,input#ip_3,input#ip_4,input#ip_5,input#ip_6,input#ip_7,input#ip_8,input#ip_9,input#ip_10,input#ip_11,input#ip_12,input#ip_13,input#ip_14,input#ip_15,input#ip_16 {
  width: 7% !important; 
}   
    
    
    
}
@media screen and (max-width: 667px){
    
    
 
.contact ul a:hover{
    margin-left: -10px !important
}

.contact h2{
    margin:20px auto 0px;
    font-size: 1.8em;
}

    
.contact ul li {
   flex: 0 0 45%;
    padding-left: 10px;
    margin: 1% auto
    }
    
.contact ul li:last-child {
    margin-left:2.5%
    }


.contact { width: 100%; float: left ; margin-bottom: 8%}
    
    
.contact_v2 dl.pwpw2::before {
  margin-top: -30px ;
  margin-left: -120px ;
}

.contact_v2 dl.mailorder::before {
  margin-top: -25px;
  margin-left: -120px ;
}
    
input#ip_1,input#ip_2,input#ip_3,input#ip_4,input#ip_5,input#ip_6,input#ip_7,input#ip_8,input#ip_9,input#ip_10,input#ip_11,input#ip_12,input#ip_13,input#ip_14,input#ip_15,input#ip_16 {
  width: 6% !important; 
}   
    
.btn_d{ margin-left:0; padding:10px 50px;white-space:nowrap; width:100%; margin-bottom:2%; text-align:center
}   

}
@media screen and (max-width: 540px){
    .center{
    margin: 0px auto 5px !important;
    padding: 0px;
    line-height: 160% !important;
}
    input#ip_1,input#ip_2,input#ip_3,input#ip_4,input#ip_5,input#ip_6,input#ip_7,input#ip_8,input#ip_9,input#ip_10,input#ip_11,input#ip_12,input#ip_13,input#ip_14,input#ip_15,input#ip_16 {
  width:9% !important; 
}
    
    input#add_1, input#add_2, input#add_3, input#add_4 { 
     width: 40% !important; 
}
   input#add_5, input#add_6, input#add_7 { 
     width: 20% !important; 
}
        input#add_8, input#add_9, input#add_10, input#add_11 { 
     width: 35% !important; 
}
.info select.add_bbb{
    width: 100% !important;
    }
 /*---------------
    contact3
---------------*/

.contact_v3{
    width:100%;
    background: #fff !important
}
.contact_v3 h2{
    margin:auto;
    font-size: 2.4em;
    font-weight: 400 !important;
    line-height: 160%;
    letter-spacing:3px;
    color:#768da4;
    text-align: center; 
}
.contact_v3 ul{
  width: 100%;
  display: flex;
  margin: 30px auto;
  overflow: hidden;
  flex-wrap: wrap;

}
.contact_v3 ul li {
  width:90%;
  float:left;  text-align:center;   
  border: 1px solid #768da4;
  margin:5px 4%;
  list-style:  none
}


.contact_v3 ul li a{ display:block;
    background-color:#fff;
    color:#4b4a4a;
    position:relative;
    text-decoration: none;
    }

.contact_v3 ul a:hover{
    border:2px solid #768da4;
    margin-left: 0px
}
.contact_v3 ul li:last-child{
    margin-right: 10px !important;
}

.contact_v3 dl{
    margin:0px auto; background: #fff !important;
    padding: 15px 10px

}
.contact_v3 dt,.contact_v3 dd{

}
.contact_v3 dt h3{
    margin:auto;
    font-size: 1.3em;
    font-weight:600;
    line-height: 160%;
    letter-spacing:3px;
    color:#768da4;
    background: #fff !important;
    margin: 0px !important;
    padding: 0px !important
}
.contact_v3 dd{ font-size:1.0em;font-weight:normal;
}

    
.contact_v2 dl h3 {
  margin: auto;
    margin-top: auto;
    margin-left: auto;
  margin-left: 10px;
  margin-top: 5px;
  padding-bottom: 0px;
  font-size: 1.1em;
  font-weight: 600;
  line-height: 160%;
  letter-spacing: 3px;
  color: #768da4;
  background: #fff !important;
}   


.contact_v2 dl.pwpw2::before {
  margin-top: -30px;
  margin-left: -150px;
}
.contact_v2 dl.mailorder::before {
  margin-top: -25px;
  margin-left: -145px;
}

.contact ul a:hover{
    margin-left: -10px !important
}

.table_v2  p
{   
    width: 85%;
    margin: 1% auto;
    display: block;
    clear: both;
    text-align: center;
    font-size: 1.13em;
    line-height: 160%;
    padding: 3px;
    border:1px solid #999
}   
/*----------------------
    notice
-----------------------*/


.notice {}


.notice_item{
    display: block;
  width: 100%;
}
    
.notice_item2{
    display:none;
  width: 100%;
}   

.notice ul{
    margin: 0px !important;
    padding: 0 3% !important
    
}

.notice li{
    margin-left: 0px !important;
    border-bottom: 1px solid #ccc;
    padding: 5px 0 !important;
    list-style: none;
    font-size: 1.2em;
    text-align: left
}

.notice_date {
    display: block !important;
    width: 100% !important;
    text-align: left;
    margin-left: 5px !important;
}


.notice_txt {
    clear: both
}

.flip{margin:0px;padding:5px;cursor:pointer;}
.panel{margin:0px;padding:10px 5px 5px;;border-top:dotted 3px #768da4;display:none; color:#768da4;text-align: left}
.flip1{margin:0px;padding:5px;cursor:pointer;}
.panel1{margin:0px;padding:10px 5px 5px;;border-top:dotted 3px #768da4;display:none; color:#768da4;text-align: left}    
    
    
    
/*----------------------
    step
-----------------------*/

.step_box {
    width:100%;
    margin: 2% auto 
}

 .step_box ul  li::before {
width: 4rem;  /* 步骤圆的宽 */
height: 4rem; /* 步骤圆的高 */
}

 .step_box ul li:nth-child(n+2):after {
content: '';
 height:  rem;
 width: 100%;
background:  #B5B5B5;
 position: absolute;
 left: -50%;
}
  .step_box ul li:first-child div:before {
 /*---content: "第"counter(steps)"步";-----------*/
 content:"設備檢測" ;
 color: inherit;
 position: absolute;
 bottom: -1rem;
 left: 40%;
 transform: translateX(-30%);font-size: 1.0em;color: #737373
}
  .step_box ul li:nth-child(2) div:before {
 /*---content: "第"counter(steps)"步";-----------*/
 content:"線上排除" ;
 color: inherit;
 position: absolute;
 bottom: -1rem;
 left: 40%;
 transform: translateX(-30%);font-size: 1.0em;color: #737373
}
  .step_box ul li:last-child  div:before {
 /*---content: "第"counter(steps)"步";-----------*/
 content:"進行報修" ;
 color: inherit;
 position: absolute;
 bottom: -1rem;
 left: 40%;
 transform: translateX(-30%);font-size: 1.0em;color: #737373
}

 .step_box ul  li.active:nth-child(n+2)::after {
 background:  #B5B5B5;
}

 .step_box ul  li.active::before {
background: #B5B5B5;
/*box-shadow: 0 0 0 0.5rem rgb(255 255 255), 0 0 0 1rem #B5B5B5;*/
}
    
    
    
    
    
    
    
    
.ip_box {
  display: block;
  width: 100%;
  margin: 20px auto;
  line-height: 160%;
  padding: 2% 2% 1%;
}   
    
.merge_box p {
  line-height: 160%;
  font-size: 1.1em;
  margin: 2.0% auto 0;
  width: 90%;
}
    
.merge_box img {
  width: 90%;
}
    
.download_box img{ display: none
}
    
.download_box li {
   margin-left: 0px !important; 
   line-height: 240%;

}
    
    .member_txt{
    font-size: 1.4em;
        font-weight: bold;
        line-height: 240%;
        letter-spacing: 3px
}

    
    
    .contact h2{
    margin:20px auto 20px;
    font-size: 1.8em;
}
        .contract h2{
    margin:20px auto 0px;
    font-size: 1.8em;
}
    
    
    
     table
    {
        width: 100%;
    }
    
    .table_v2 table tbody tr td
{
    text-align:left;
}
    
        .table_v3
{
    width: 90%
}
    

.member_login
{
    border: 0px solid #768da4;
}

.login_box
{
    width: 100%; height:auto;
    margin:0 auto 5%; 
}

.login_box h3
{
   
    float:right; 
    clear: none;
    font-weight: bold
}

.member_login dt h4
{  
  margin-left: 0; 
}
.member_login dd
{  margin: 0

}

.member_login dl
{
    text-align: left;
    float: left; 
    width: 100%; height:auto;
    margin:0 auto 3%;  
}   
    
    
.use
{
    width: 100%;
    margin: 15px auto 25px;
    line-height: 160%;
    display: block;
    float: left;
    height: auto; 
    border: 1px solid #768da4;
    padding: 2%
}


.use p
{   
    width: 95%;
    margin: 0 auto 3%
}


.use dt img
{  
}

.use dt h2
{  font-size: 2.8em;
   color:#768da4;
    margin-top: 0.4em !important;
    margin-bottom: 0.2em !important

}

.use dd h2
{  font-size: 2.8em;
   color:#768da4;
    margin-top: 0.4em !important;
    margin-bottom: 0.2em !important

}

.use dl
{
    line-height: 160%;
    font-size: 1em;
    text-align: center;
    float: left; 
    display: block;
    width: 100%; height:auto;
    margin:5% auto; 
}   
    
    
    
    
.contact ul li {
   flex: 0 0 95%;
    padding-left: 10px;
    }


    
.contact_v2 ul li {
   flex: 0 0 95%;
    padding-left: 10px;
    }
    
    
.contract ul li {
   flex: 0 0 95%;
    padding-left: 0px;
    }
    

.service{
    margin: 3% auto 0
    
    
    }
.service dl
    {
        float: left;
        width: 50%;
    }

    .service dt img
    {
        width: 100%;
        height: auto;
    }
  .service dt h2{font-size:1.13em
    
    }

.W62 { width:100% !important;}

.contact { width: 100%; float: left ; margin-bottom: 8%}
.contactV2 { width: 100%; float: left ; margin-bottom: 10%} 
.contract { width: 100%; float: left ; margin-bottom: 8%}   
section img { width: 100%; }    

section h5 {

    font-size: 100%;
}   
    
section h6{
    font-size: 100%;

}   

.info{width:100%;padding-top:10px;} 
        
    
.enabled-list label,.name-list label{
    width: 100% !important
    }

.enabled-list input,.name-list input,input#phone_2, input#user_login{
    width: 100% !important
    }

.info label.m_info{ width: 100% !important
    }
.enabled-list,.name-list{
    margin: 10px auto;
    }
.name-list span,.pblist span{
    margin-top:auto;
    }
.enabledbox p {
    text-align: center;
}   

.enabled-list {
    margin: 0px auto;
}   
    
.enabledbox span {
    line-height: 2em;
}   
.pblist{
    margin: 10px auto
    }
    
.pblist label{
    width: 100% !important;
    margin-top: 0px
    }
        

.pblist input{
    width: 100% !important
    }
.pblist p label {
  width: 100% !important;}
.pblist p{
    margin-left:auto !important;
    width:100%;
    margin: 0 auto;
    }

.pblist p .level2{margin-left:auto;width:100%;}
    

.choice-list{
    margin: 0px auto;
    text-align: left;
    line-height:3em;
    }


.choice-list label{
    margin: 10px 0px 5px 0px;
     width: 45%  ;
    }

.choice-list span{
    margin:0px;
    padding:0px;
    width: 100%;
    background: #fff
    }
    
.choice-list input{
    margin-right:0px;
    margin-bottom: 5px;
    }
    
.line_normal {
  float: left;
  margin-left: 0;
  width: 100%;
    margin-bottom: 15px
}
    
    
    
    
select#birth_year, select#birth_month, select#birth_day{
    width: 100% !important; margin-top: 8px; margin-bottom: 5px
  }
    
 select#sel_zip, select#sel_city, select#sel_street,select#sel_district, select#sel_street_list, select#credit_card_year, select#credit_card_month {
    width: 100% !important; margin-top: 5px
  }

input#account, input#password , input#idpassword{
    width: 100% !important;
}
input[type="checkbox"], input[type="radio"]{width:auto !important;}
section .submit input.button_contact {width:90%;margin-top: 15px }
section .submit input.button {width:60%;}
.item-qty-control{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:27px; justify-content:flex-end;}
section .submit{
    margin: 0px auto 30px;
}   
    
.container{margin:0 auto;max-width:1280px;width:100% !important}
    


.more_menu:last-child
{float: left
}


.more_menu dl
{
    font-size: 1em;
    text-align: left;
    float: left; 
    display: block;
    width: 100%; height:auto;
    margin:1%  0.5%; 
}

    

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

.contact_v2 dl.bank::before {
 
  margin-top: -25px;
  margin-left: -150px;
}
.contact_v2 dl.post::before {
 
  margin-top: -15px;
  margin-left: -150px;
}
.contact_v2 dl.pwpw2::before {
  margin-top: -30px !important;
  margin-left: -150px !important;
}

.contact_v2 dl.mailorder::before {
  margin-top: -25px;
  margin-left: -150px !important;
}
#alert img {
    display: none;
}
    
.info p img { margin: 2%;}
    

.enabledbox p {
    text-align: center;
}   
    
.floatLeft {
    float: none;
}
    

.service_pro h1{font-size: 1.6em; 
}
.service_pro dt h2{  font-size: 1.2em ;
}
.service_pro dt li{  font-size: 0.88em; }

.service_pro dd h3{font-size:1.0em}

.slogan dd{font-size: 0.88em;
    }
            
.service_icon h1{ font-size: 1.4em; 
}   
    

.service dd li{ font-size: 0.93em}
    
    
}
@media screen and (max-width: 320px)
{
.contact ul li {
    flex: 0 0 100%;
    padding-left: 0px;
    margin: 5px auto
}
    
.contact_v2 ul li {
    flex: 0 0 100%;
    padding-left: 0px;
    margin: 5px auto
}
.contract ul li {
    flex: 0 0 100%;
    padding-left: 0px;
    margin: 5px auto
}

}