@charset "big5";
/* CSS Document */
html, body { margin:0; padding:0; font:16px/140% Arial, "�L�n������", "Microsoft JhengHei", sans-serif; color:#333;  }
body{ background-color: #f5f5f5; overflow-x: hidden;}
img { margin:0; padding:0; }
a { text-decoration: none; outline: none; /* for Firefox */ hlbr:expression(this.onFocus=this.blur()); /* for IE */
color:#444; }
a:hover { text-decoration:none; color:#000; }
div, p, span, ul, ol, li, h1, h2, h3, h4, h5, h6, input, table, td, th, img { margin: 0; padding: 0; border: none; }
img { border: none; }
input, select { font:16px/140% Arial, "�L�n������", "Microsoft JhengHei", sans-serif; color:#333; }
ul { list-style:none; }
.fL { float: left; }
.fR { float: right; }
.clr { clear: both; }
.tRight { text-align: right; }
.tLeft { text-align:left; }
.tCenter { text-align: center; }

.wrapper { width: 100%; margin: 0 auto; padding-top: 60px;}
/* header */
.header { background-color: #2c323f; left: 0; position: fixed; top: 0; z-index: 3; width: 100%; height:60px;}
.header .content { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.header .logo { background:url(../images/logo.png) no-repeat; background-size: auto 100%; height: 60px; width: 120px; }
.header .logo a { display: block; height: 60px;width: 120px; text-indent: -9999px;}

/* content */
.payContent { max-width: 1180px; padding: 50px 0px 60px; margin: 0 auto;}
.payContent .section_l { width: 280px; float: left;}
.payContent .section_r { padding-left: 300px;}
.payContent h2{ font-size: 30px; line-height: 140%; font-weight: normal; color: #333; margin-bottom: 20px;}
.payContent h2.line{ border-bottom: 1px solid #cecece;}
.payContent h3 { font-size: 18px; line-height: 140%; font-weight: normal; text-align: center; margin-bottom: 20px;}
.payContent.wSet { width: 980px; padding: 50px 0px 60px;}
.payContent.nSet { width: 580px; padding: 50px 20px 60px;}
.payContent.nSet h2{ text-align: center;}

.payContent .block { background-color: #fff; margin-bottom: 20px;-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.35);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.35); padding: 40px 40px 40px;}
.payContent p { margin-bottom: 30px; }
.payContent p a{ color: #00b7e5;}
.payContent .block.artic_block { padding: 0 0 10px;}
.payContent .artic { padding: 30px; height: 480px; overflow-y: auto; font-size: 14px; margin-bottom: 10px;}
.payContent .artic p{ margin-bottom: 10px;}
.payContent .artic h1{ font-size: 14px; margin-bottom: 10px; color: #00ddff;}
.payContent .artic ol{ margin-left: 20px; margin-bottom: 25px;}

.info_content { background-color: #e0e0e0; border: 1px solid #2c323f;margin-bottom: 20px;
-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.info_content h3{ background-color: #2c323f; border-bottom: 1px solid #fff; line-height: 58px; text-align: center; color: #fff; margin-bottom: 0;}
.info_content ul{ padding: 20px 20px 0px; font-size: 18px; }
.info_content li{ margin-bottom: 20px;}
.info_content .icon_q { background:url(../images/icon_qus.png) 0 0 no-repeat; margin: 10px 0 0 0px; display: inline-block; font-size: 16px; background-size: auto 100%; padding-left: 30px;}
.info_content .info_name { color: #888; margin-bottom: 5px;}

.pay_list { font-size: 18px; line-height: 54px; margin-bottom: 20px;}
.pay_list li{ margin-bottom: 10px; background-color: #fff;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.pay_list li a{ display: block; padding: 0 30px; border: 3px solid #fff;
-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.pay_list li:hover { -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}
.pay_list li:hover a{ border: 3px solid #01c1eb;}
.pay_list li.actived a{ border: 3px solid #01c1eb; background:url(../images/icon_pay.png) right center no-repeat;}

.topnav { margin-bottom: 40px;}
.topnav ul{ margin: -40px -40px 0px; height: 70px;}
.topnav li{ width: 50%; float: left; font-size: 20px; line-height: 70px; text-align: center;}
.topnav li a{ display: block; color: #666; background-color: #f0f0f0;
-webkit-box-shadow: inset 0px -1px 0px 1px rgba(0,0,0,0.1);-moz-box-shadow: inset 0px -1px 0px 1px rgba(0,0,0,0.1);box-shadow: inset 0px -1px 0px 1px rgba(0,0,0,0.1);}
.topnav li.active a{ background-color: #fff; color: #000; -webkit-box-shadow:none;-moz-box-shadow:none;box-shadow: none;}
.topnav li:hover a{ background-color: #fff;}

.choiseArea { }
.choiseArea li{ padding: 10px 0 10px 40px; position: relative;}
.choiseArea .choise_input{ position:absolute; left: 10px; top: 0px;line-height: 40px;}
.choiseArea ul{ margin-top: 10px;}
.formArea li{ font-size: 14px; line-height: 50px; margin-bottom: 20px; padding: 0 0 0 120px; position:relative;}
.formArea .form_title { position: absolute; left: 0; top: 0; font-size: 16px; width: 100px; text-align: right; font-weight: normal;}
.formArea .tRight {font-size: 16px; line-height: 140%; padding-top: 5px;}
.formArea .tRight a{color: #00b7e5; display:inline-block;}
.formArea .icon_qus { position: absolute; right: 10px; top: 0; width: 50px; height: 50px; background:url(../images/icon_qus.png) center center no-repeat; background-size: 50% 50%;}
.icon_qus .qus_pop { display: none; position: absolute; right: -10px; top: 40px; z-index:10; width: 300px; background:url(../images/qus_pop.png) no-repeat; padding-top: 15px;}
.icon_qus .qus_com { color: #fff; border: 3px solid #151515; border-top: none; padding: 10px 20px; font-size: 14px; line-height: 160%; color: fff;background-color: rgba(44,50,69, 0.9); background-color: #2c323f \9;
-webkit-border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;}
.icon_qus:hover .qus_pop { display: block;}
.info_content .icon_qus { position: relative; background:url(../images/icon_qus.png) right 0 no-repeat; margin: 10px 0 0 0px; display: inline-block; text-align: right; font-size: 14px; background-size: auto 100%; color:#3399ff; min-height: 24px; padding-right: 30px;}
.info_content .qus_pop { right: -75px; top: 25px;width: 200px; background:url(../images/qus_pop2.png) no-repeat;}
.info_content .qus_com { text-align: left; }

.icon_reSend { background:url(../images/icon_reSend.png) 0 center no-repeat; padding-left: 20px;}
.inputSet { width: 638px;border: 1px solid #ccc; line-height: 48px; height: 48px; padding: 0 20px 0 20px; }
.formArea select { border: 1px solid #ccc; line-height: 48px; height: 48px; padding: 0 20px 0 20px;}
.form_select { width: 100%; }
.choiseArea .formArea li, .formArea.form2 li{ padding-left: 140px; }
.choiseArea .form_title, .formArea.form2 .form_title { width: 130px; text-align: left;}
.choiseArea .inputSet { width: 578px;}
.payContent.nSet .inputSet { width: 338px;}
.payContent.nSet .choiseArea .inputSet { width: 278px;}
.payContent.nSet .formArea.form2 .inputSet { width: 318px;}

.cardSet li{ padding-left: 220px;}
.cardSet .form_title { width: 200px;}
.cardSet .inputSet { width: 60px; padding: 0 10px;}
.cardSet img { vertical-align: middle;}

.form_title.sp_t { line-height: 120%; padding-top: 5px;}
.font_s { font-size: 12px;}
.warn { font-size: 14px; line-height: 140%; color: #ff3333; padding-top: 5px;}
.txt { font-size: 14px; line-height: 140%; color: #888; padding-top: 5px;}
.line_dashed { border-bottom: 1px dashed #d2d2d2; margin-bottom: 20px;}

.notice_list { list-style: disc; font-size: 14px; line-height: 140%; margin-left: 20px; color: #888; margin-bottom: 20px;}
.icon_notice { background:url(../images/iocn_notice.png) center 10px no-repeat; padding-top: 160px; font-size: 24px; line-height: 140%; margin-bottom: 30px;}
.cancelArea { background-color: #fafafa; border: 1px solid #ccc; color: #ff6666; padding: 20px; font-size: 18px; line-height: 140%;}

input[type="checkbox"] {display:none; display:inline-block \9;}
input[type="checkbox"] + label span {
	display:inline-block; width:15px; height:15px; margin:0px 10px 0 0; vertical-align:middle; background:url(../images/check_radio_sheet.png) left top no-repeat;cursor:pointer;
	display:none \9;
}
input[type="checkbox"]:checked + label span { background:url(../images/check_radio_sheet.png) -15px top no-repeat;}

.payContent .noticArea {color: #666; font-size: 16px; line-height: 140%; margin-bottom: 20px;}
.payContent .noticArea a{color: #3399ff;}
.btArea { text-align: center;}
.btArea a{ color: #3399ff;}
.btSet { cursor: pointer; font-size: 24px; line-height:60px;  border: 2px solid #01c1eb; background-color: rgba(0,203,247, 0.6); background-color: #66e0fa \9; color: #fff; width: 100%;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
-o-transition: background 1s ease;
-ms-transition: background 1s ease;
transition: background 1s ease;}
.btSet.bt1 { width: 48%; margin-right: 2%; float:left;}
.btSet.bt2 { width: 48%; margin-left: 2%;float:left;}
.btSet.bt_smail { width: auto; padding: 0 10px; min-width: 160px; line-height: 40px;}
.btSet:hover { background-color: rgba(0,203,247, 1); background-color: #01c1eb \9; }

.noticeArea {font-size: 12px; line-height:160%;}
.noticeArea h3{ font-size: 16px; text-align: left; font-weight: bold; margin-bottom: 5px;}
.noticeArea .more{ text-align: right; line-height: 20px; margin-top: -25px;}
.noticeArea .more a{ background:url(../images/icon_more.png) right -44px no-repeat; padding-right: 25px;}
.noticeArea p{ margin-bottom: 20px;}
.noticeArea ol{ margin-left: 20px; margin-bottom: 20px;}
.noticeArea lo{ margin-bottom: 5px;}
.tRed{color:#ff6666;}
.tBlue{color:#3399ff;}

.t_right { text-align: right; padding: 0 10px;}

/* footer */
.footer { background-color: #e3e3e3; border-top: 1px solid #1f222d; padding: 45px 10px; text-align: center; font-size: 14px; line-height: 120%; }
.footer .content {position: relative; max-width:1200px; margin: 0 auto;}
.footer ul{ margin-bottom: 15px;}
.footer li{ display: inline; border-right: 1px solid #333; padding-right: 35px; margin-right: 30px;}
.footer li.last{ border-right: none; padding-right: 0px; margin-right: 0px;}
.icon_twca { position: absolute; left: 50px; top: -93px; height: 96px;}
.icon_twca img{height: 100%; width: auto;}

.top { position: fixed; right: 5px; bottom: 5px; background:url(../images/icon_top.png) no-repeat; width: 60px; height: 60px; background-color: rgba( 40, 50, 63, 0.8); background-color: #2c323f \9; cursor: pointer;}

.divBlock { background-color: #000; height: 100%; left: 0; opacity: 0.5; position: fixed; top: 0; width: 100%; z-index: 888;}
.pop { color: #ffcc00; font-size: 18px; padding: 200px 0 0; position: absolute; width: 300px; z-index: 999;}


@media screen and (min-width: 1000px) and (max-width: 1260px) {
.payContent { padding: 20px 20px 40px;}
.payContent.wSet { padding: 20px 0px 40px;}
.payContent.nSet { padding: 20px 20px 40px;}
.inputSet { width: 442px; }
.choiseArea .inputSet { width: 403px;}

}


@media screen and (min-width: 768px) and (max-width: 999px) {
input {
    -webkit-appearance: none;
    border-radius: 0;
}
.webMode { display: none;}
body { background-color: #fff;}
.payContent { padding: 20px 20px 40px; }
.payContent .section_l { width: 200px; }
.payContent .section_r { padding-left: 220px; background:url(../images/section_r.png) 200px 0 repeat-y;}
.payContent.wSet { width: auto; padding: 20px 0px 40px;}
.payContent.nSet { padding: 20px 20px 40px;}
.payContent .block {-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none; padding: 0px;}
.section_r .block { margin-bottom: 0;}
.info_content { background-color: transparent; border: none;}
.info_content h3{ background-color: transparent; line-height: 140%; margin-bottom: 10px; font-size: 24px; text-align: left; color: #000;}
.info_content ul{ padding: 0px; font-size: 16px; }
.info_content li{ margin-bottom: 10px;}
.info_content .info_con { color: #000;}
.section_r .noticeArea { margin-left: -220px;background-color: #fff; padding-top: 20px;}
.wSet h2 { padding: 0 20px;}
.payContent .artic {padding: 0 20px;}
.topnav { margin-bottom: 20px;} 
.topnav ul{ margin: -20px 0px 0px; height: 60px;}
.topnav li{ line-height: 60px;}
.inputSet { width: 100%; box-sizing: border-box;  }
.choiseArea .inputSet {width: 100%;}
.payContent.nSet .inputSet { width: 100%;}
.payContent.nSet .choiseArea .inputSet { width: 100%;}
.payContent.nSet .formArea.form2 .inputSet { width: 100%;}
.icon_qus:hover .qus_pop { display: none;}
.icon_qus.active .qus_pop { display: block;}

.cardSet li{ padding-left: 175px;}
.cardSet .form_title { width: 160px;}
.cardSet .inputSet { width: 70px; padding: 0 5px;}

.choiseArea .choise_input{left: 0px; top: 5px;}
input[type="radio"] {
	height: 20px; width: 20px;
    background:url(../images/input_radio_app.png) 0px 0 no-repeat;
	background-size: 100% auto;
}
input[type="radio"]:checked {
	background-position: 0 -20px;
}

.footer { padding: 15px 10px; }
.icon_twca { left: 20px; top: -45px; height: 60px;}
input[type="checkbox"] + label span {width:25px; height:25px; background:url(../images/check_radio_sheet_m.png) left top no-repeat; background-size: auto 100%;}
input[type="checkbox"]:checked + label span { background:url(../images/check_radio_sheet_m.png) -25px top no-repeat;}

}
@media screen and (max-width: 767px) {
input {
    -webkit-appearance: none;
    border-radius: 0;
}
.webMode { display: none;}
body { background-color: #fff;}
.payContent { padding: 20px 0px 30px; margin: 0 auto;}
.payContent .section_l { width: auto; float: none; border-bottom: 1px solid #ccc; margin-bottom: 20px; }
.payContent .section_r { padding: 0 20px; margin-bottom: 20px;}
.payContent.wSet { width: auto; padding: 20px 0px 30px;}
.payContent.nSet { padding: 20px 20px 30px; width: auto;}
.payContent h2{ font-size: 20px; line-height: 140%; margin-bottom: 20px;}
.payContent h2.line{ padding-bottom: 10px;}
.payContent .block {-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none; padding: 0px;}
.info_content { background-color: transparent; border: none; padding: 0 20px;}
.info_content h3{ background-color: transparent; line-height: 140%; margin-bottom: 10px; font-size: 20px; padding:0; text-align: left; color: #000;}
.info_content ul{ padding: 0 20px; font-size: 16px; }
.info_content li{ margin-bottom: 10px;}
.info_content .info_con { color: #000;}
.wSet h2 { padding: 0 20px;}
.payContent .artic {padding: 0 20px;height: 300px;}
.payContent .block.artic_block {  padding: 0 0px;}
.topnav { margin-bottom: 20px;} 
.topnav ul{ margin: -20px 0px 0px; height: 50px; font-size: 20px;}
.topnav li{ line-height: 50px;}
.formArea li{ margin-bottom: 20px; padding-left: 0px;}
.formArea .form_title { position: static; width: auto; text-align: left; line-height: 140%; margin-bottom: 10px;}
.formArea .icon_qus { top: 32px; right: 0;}
.choiseArea .formArea li{ padding-left: 0px; }
.inputSet { width: 100%; box-sizing: border-box;  }
.choiseArea .inputSet {width: 100%;}
.payContent.nSet .inputSet { width: 100%;}
.payContent.nSet .choiseArea .inputSet { width: 100%;}
.payContent.nSet .formArea.form2 .inputSet { width: 100%;}
.icon_qus:hover .qus_pop { display: none;}
.icon_qus.active .qus_pop { display: block;}

.btArea { text-align: center;}
.btSet { font-size: 20px; line-height: 50px;}
.btSet.bt_smail { min-width: 130px;}
.icon_notice { font-size: 18px; line-height: 140%; margin-bottom: 20px;}
.formArea select { padding: 0 10px;}
.cardSet .inputSet { width: 75px; padding: 0 5px;}

.choiseArea .choise_input{left: 0px; top: 5px;}
input[type="radio"] {
	height: 20px; width: 20px;
    background:url(../images/input_radio_app.png) 0px 0 no-repeat;
	background-size: 100% auto;
}
input[type="radio"]:checked {
	background-position: 0 -20px;
}


.footer { padding: 15px 10px; }
.icon_twca { left: 20px; top: -45px; height: 60px;}

input[type="checkbox"] + label span {width:25px; height:25px; background:url(../images/check_radio_sheet_m.png) left top no-repeat; background-size: auto 100%;}
input[type="checkbox"]:checked + label span { background:url(../images/check_radio_sheet_m.png) -25px top no-repeat;}


}