@charset "UTF-8";

/* RESET All ELEMENT */

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}
ol,ul{list-style:none}
table{border-collapse:separate;border-spacing:0}
:focus{outline:none}


/*============================================
=                    Base                    =
============================================*/

html *{max-height:1000000px;-webkit-text-size-adjust:100%;-webkit-overflow-scrolling:touch}
a{color:#535353;text-decoration:none}
a,area{outline:none;hlbr:expression(this.onFocus=this.blur())}
img{vertical-align:top}
body{font:normal 16px/18px 'Microsoft JhengHei';color:#000;overflow-x:hidden;background:#fff}
body.cal{background:url(../img/index/bg_qa.jpg?r=1503279614462) repeat center top}
body.fixed{overflow-y:auto}
input,select,textarea{font:normal 16px/18px 'Microsoft JhengHei';padding:0;margin:0;vertical-align:middle}
div,a,input,p{font-family:'Microsoft JhengHei'}
h2,h3,h4,h5{margin:0;padding:0}


/*=============================================
=                Common style                 =
=============================================*/

input::-webkit-input-placeholder{color:silver}
input::-moz-placeholder{color:silver;opacity:1}
input:-ms-input-placeholder{color:silver}
input:placeholder-shown{color:silver}
input[type=text]:focus,input[type=password]:focus,textarea:focus{color:#51a9ab}


/*=============================================
=                Common elemet                =
=============================================*/

.wrap1{max-width:950px;margin:0 auto}
#menuBtn{display:none}

/*=============================================
=                  Structural                 =
=============================================*/

.header{position:fixed;top:0;left:0;width:100%;height:60px;text-align:right;background:#026c6b;z-index:200}
.header .wrap1{position:relative}
.header .logo--ctbc{display:block;position:absolute;top:10px;left:10px;width:152px;height:43px;background:url(../img/logo_ctbc.png?r=1503048070079) 0 0 no-repeat;background-size:152px 43px;z-index:500}
.nav{position:absolute;top:0;width:100%;background:none;box-shadow:none;z-index:200}
.nav ul{margin:unset}
.nav ul li{display:inline-block;width:125px;border:none;text-align:center}
.nav ul li a{display:block;font-size:16px;font-weight:bolder;color:#fff;height:60px;line-height:60px}
.nav ul li a:hover,.nav ul li a.active{background-color:rgba(255,255,255,0.2)}
.nav ul li:nth-child(6){border-right:none}
.nav-outer{position:absolute;width:100%}
.nav-block{position:absolute;display:flex;width:101%;top:60px;right:0}
.nav-block ul{position:absolute;display:none;width:125px;padding:0;box-shadow:0 2px 10px rgba(0,0,0,0.3)}
.nav-block ul.active{display:table}
.nav-block ul:nth-child(2){right:516px}
.nav-block ul:nth-child(3){right:387px}
.nav-block ul:nth-child(4){right:258px}
.nav-block ul:nth-child(5){right:129px}
.nav-block ul:nth-child(6){right:0}
.nav-block ul:last-child{box-shadow:none}
.nav-block ul li{background:#fff;text-align:center;height:30px;padding-top:10px}
.nav-block ul li:after{content:"";border-bottom:1px solid #e9e9e9;display:block;width:60%;margin:8px 20%}
.nav-block ul li:last-child:after{display:none}
.nav-block ul li a{color:#000;vertical-align:middle;font-size:14px}

/* 1366 for win chrome, ie */
@media screen and (max-width: 1366px) {
    .nav-block ul:nth-child(2){right:516px}
    .nav-block ul:nth-child(3){right:387px}
    .nav-block ul:nth-child(4){right:258px}
    .nav-block ul:nth-child(5){right:129px}
}
@media screen and (max-width: 767px) {
    body.fixed{overflow-y:hidden}
    .header .logo--ctbc{display:block;position:absolute;top:10px;left:20px;width:113px;height:32px;background-size:113px 32px}
    .nav{position:absolute;top:50px;width:100%;background:#fff;box-shadow:0 0 9px #a2a2a2;z-index:200}
    .nav ul{padding:0;width: 100%;font-size: 0;}
    .nav ul li{display:inline-block;width:20%;text-align:center}
    .nav ul li a{display:block;color:#026c6b;font-weight:bolder;height:auto;line-height:50px}
    .nav ul li a:hover,.nav ul li.active a{background-color:rgba(2,108,107,0.2)}
    .nav ul li:nth-child(6){border-right:none}
    .nav-block{position:fixed;display:none;width:101%;top:92px;width:100%;height:100vh;background:rgba(55,129,128,0.9);overflow-y:auto}
    .nav-block.active{display:flex}
    .nav-block ul{position:initial;display:none;width:60%;margin:30px auto;padding:10px 0;box-shadow:none}
    .nav-block ul.active{display:table}
    .nav-block ul li{display:block;background:initial;text-align:center;height:30px;border-bottom:1px solid rgba(255,255,255,0.5);margin:20px 0}
    .nav-block ul li:after{display:none}
    .nav-block ul li a{color:#fff;vertical-align:middle;font-size:24px}
}
@media screen and (max-width: 480px){
    .nav ul li a{font-size: 12px;}
}

.topBtn{position:relative;display:block;color:#fff;text-align:center;font-size:16px;padding-top:22px;font-weight:400;border-top-left-radius:10px;border-top-right-radius:10px;display:block;position:absolute;top:-77px;right:0;width:69px;height:42px;background-color:#026c6b;-moz-box-sizing:border-box;box-sizing:border-box}
.topBtn:after{display:block;position:absolute;top:10px;left:50%;width:12px;height:12px;margin-left:-6px;display:inline-block;content:"";border-right:1px solid #fff;border-top:1px solid #fff;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}
.topBtn:hover{color:#fff;background-color:#3e9e9e}
.footer{position:relative;width:100%;z-index:20;background:#4a4a4a;text-align:left}
.footer_warnning{padding:35px 0;font-size:18px;color:#cbcbcb;background-color:#4a4a4a}
.footer_warnning .wrap1{position:relative}
.footer_warnning .warnningT{position:relative;padding-bottom:25px}
.footer_warnning .warnningL{line-height:26px;padding:0 15px;font-size:small}
.footer_warnning .warnningL b{display:block;font-size:29px;line-height:40px;letter-spacing:5.8px;font-weight:400}
.footer_warnning .warnningR{display:block;position:absolute;right:15px;bottom:25px}
.footer_warnning .warnningR i,.footer_warnning .warnningR a{color:#f0be58;font-style:normal}
.footer_warnning .warnningB{border-top:1px solid #cbcbcb;font-size:13px;padding:20px 15px 15px}
.footer_nav,.footer_nav_vip{position:fixed;width:100%;height:75px;left:0;bottom:0;padding:10px 0 0;text-align:center;background-color:#026c6b;z-index:100;display:none}
.footer_nav a{vertical-align:middle;display:inline-block;color:#fff;width:24%;height:50px;font-size:12px;margin:10px 0 0;padding:0;-moz-box-sizing:border-box;box-sizing:border-box;border-right:1px solid #fff}
.footer_nav_vip a{vertical-align:middle;display:inline-block;color:#fff;width:50%;height:50px;font-size:12px;margin:10px 0 0;padding:0;-moz-box-sizing:border-box;box-sizing:border-box;border-right:1px solid #fff}
.footer_nav_vip a:nth-child(2){border-right:none}
.footer_nav a:nth-child(4){border-right:none}
.footer_nav a i,.footer_nav_vip a i{display:block;font-style:normal;color:#f0be58}
.footer_nav a b,.footer_nav_vip a b{display:inline-block;font-weight:400;background-repeat:no-repeat}
.footer_nav a:hover{background:inherit}
.footer_nav a:nth-child(1) b{background-image:url(../img/icon_sidebarI3.png)}
.footer_nav a:nth-child(2) b{background-image:url(../img/icon_sidebarI1.png)}
.footer_nav a:nth-child(3) b{background-image:url(../img/icon_sidebarI2.png)}
.footer_nav a:nth-child(4) b{background-image:url(../img/icon_sidebarI4.png)}
.footer_nav a:nth-child(1) b{padding-top:42px;background-position:50% 2px;background-size:44px 33px}
.footer_nav a:nth-child(2) b{padding-top:42px;background-position:50% 0;background-size:32px 32px}
.footer_nav a:nth-child(3) b{padding-top:42px;background-position:50% 0;background-size:39px 38px}
.footer_nav a:nth-child(4) b{padding-top:42px;background-position:50% 0;background-size:47px 35px}
.sidebar{position:fixed;right:0;top:50%;margin-top:-192px;width:90px;text-align:center;color:#fff;background-color:rgba(0,0,0,0.7);z-index:100}
.sidebar a{display:block;color:#fff;font-size:16px;width:100%;height:90px;background-repeat:no-repeat;-moz-box-sizing:border-box;box-sizing:border-box}
.sidebar a:hover{background-color:#51a9ab}
.sidebar a:nth-child(1){background-image:url(../img/icon_sidebarI3.png?r=1503048070079)}
.sidebar a:nth-child(2){background-image:url(../img/icon_sidebarI1.png?r=1503048070079)}
.sidebar a:nth-child(3){background-image:url(../img/icon_sidebarI2.png?r=1503048070079)}
.sidebar a:nth-child(4){background-image:url(../img/icon_sidebarI4.png?r=1503048070079)}
.sidebar a:nth-child(1){padding-top:64px;background-position:50% 24px;background-size:44px 33px}
.sidebar a:nth-child(2){padding-top:60px;background-position:50% 16px;background-size:32px 32px}
.sidebar a:nth-child(3){padding-top:60px;background-position:50% 10px;background-size:39px 38px}
.sidebar a:nth-child(4){padding-top:55px;background-position:50% 8px;background-size:47px 35px}
.sidebar b{display:block;font-size:13px;font-weight:400;height:24px;line-height:24px;background-color:#026c6b}
.sidebar .sidebar_nav_vip a:nth-child(1){background-image:url(../img/icon_sidebarI1.png)}
.sidebar .sidebar_nav_vip a:nth-child(2){background-image:url(../img/icon_sidebarI2.png)}
.footer_nav_vip a:nth-child(1) b{background-image:url(../img/icon_sidebarI1.png)}
.footer_nav_vip a:nth-child(2) b{background-image:url(../img/icon_sidebarI2.png)}
.footer_nav_vip a:nth-child(1) b{padding-top:42px;background-position:50% 0;background-size:32px 32px}
.footer_nav_vip a:nth-child(2) b{padding-top:42px;background-position:50% 0;background-size:39px 38px}

/*=============================================
=                calculate1-1                 =
=============================================*/

.loan_title{display:block;font-size:30px;font-weight:700;text-align:center;line-height:40px;color:#026c6b;margin:100px auto 0}
.loan_nav{padding:35px 0 0;text-align:center;max-width:1000px;margin:0 auto -5px}
.loan_nav a{display:inline-block;width:160px;font-size:18px;font-weight:700;color:#9b9b9b;margin:0;height:60px;line-height:60px;border-radius:5px;border:solid 1px #9b9b9b}
.loan_nav a:hover,.loan_nav a.on{color:#fff;border:solid 1px #026c6b;background-color:#026c6b}
.bg1{position:relative;width:100%;margin-bottom:85px;overflow:hidden}
.bg1 .bg1L{display:block;position:absolute;top:0;left:0;width:50%;height:100%;background:#e5f2f3}
.bg1 .bg1R{display:block;position:absolute;top:0;left:50%;width:500px;height:100%;background:#e5f2f3}
.bg1 .bg1R .man{display:block;display:block;position:absolute;top:235px;left:215px;width:450px;height:390px;background:url(../img/bg_man.png?r=1503048070079) 0 0 no-repeat}
.bg1 .bg1R .man-2{width:473px;height:286px;background-image:url(../img/bg_man-2.png?r=1503048070079)}
.bg1 .bg1R .man-3{width:363px;height:359px;background-image:url(../img/bg_man-3.png?r=1503048070079)}
.bg1 .bg1R .man-4{width:317px;height:342px;background-image:url(../img/bg_man-4.png?r=1503048070079)}
.bg1 .bg1R .man-vip{width:302px;height:302px;background-image:url(../img/5-2-x_3x.png?r=1503048070079)}
.title_con{background:#fff;line-height:40px;font-size:30px;padding:57px 0 34px;font-weight:700;text-align:center;color:#026c6b}
.title_con span{color:#cd1410;display:inline-block}
.title_con span.br{color:#026c6b}

@media screen and (max-width: 767px) {
    .title_con span.br{display:block}
}

.loan_con{position:relative;padding:30px 0 0;z-index:2;border:solid 2px #026c6b;border-top:solid 7px #026c6b;background:#fff}
.loan_con a{cursor:default}
.wrap2{max-width:546px;margin:0 auto;text-align:center}
.title1{font-size:30px;font-weight:700;line-height:40px;color:#000}
.title1 b{display:block;color:#026c6b}
.txt1{font-size:18px;line-height:32px}
.title2{padding:40px 0 10px;text-align:center;border-bottom:solid 2px #026c6b}
.title2 .title2I{position:relative;display:inline-block;width:134px;height:40px;line-height:40px;font-size:16px;color:#000;border:solid 1px #51a9ab}
.title2 .title2I i{display:block;display:block;position:absolute;top:-25px;left:0;font-size:30px;font-weight:700;color:#f0be58;font-style:normal}
.myform{overflow:hidden;margin-bottom:25px}
.myform dd{font-weight:600;color:#026c6b}
.myform.s1 dd{width:100%}
.myform dt{width:100%}
.myform dt span{font-size:16px;color:#000;line-height:45px}
.myform dt .job{margin:0 20px 0 0}
.select1{width:90%;height:45px;padding:0 10px;margin-right:0;border:none;background:#fff url(../img/icon_arw1.png?r=1503048070079) right 50% no-repeat;background-size:38px auto;background:rgba(2,108,107,0.14)}
.select1 select{width:107%;font-size:16px;height:45px;color:#51a9ab;-moz-box-sizing:border-box;box-sizing:border-box}
.myform dl{border-bottom:solid 1px #d6e4e5}
.myform .desc{background-color:rgba(255,255,255,0.5);margin-top:10px;font-size:14px;color:#9b9b9b}
.desc ul{padding-left:0;margin:5px 0 0}
.myform input[type="text"]{border:none;border-radius:5px;height:45px;width:197px;color:#51a9ab;background:rgba(2,108,107,0.14)}
.myform input[type="text"]::-webkit-input-placeholder{color:#51a9ab}
.myform input[type="text"]::-moz-placeholder{color:#51a9ab}
.myform input[type="text"]:-ms-input-placeholder{color:#51a9ab}
.myform input[type="text"]::placeholder{color:#51a9ab}
.note span{color:#4a4a4a;font-weight:600;font-size:14px;background-color:transparent;padding:0;border-radius:0}
.note ul{padding:0}
.note li{color:#4a4a4a;line-height:17px;background-color:transparent}
.btnbar1,.dotbar1{text-align:center;display:inline-flex}
.mybtn{height:45px;line-height:45px;width:132px;padding:0;border:none;border-radius:5px;background-color:#026c6b;font-size:16px;display:block}
.mybtn:hover{background:#3e9e9e}
.btnbar1 a,.btnbar1 input{margin:0 25px}
.dotbar1{padding:20px 0}
.dotbar1 span{display:inline-block;width:10px;height:10px;border-radius:10px;margin:0 7px;background-color:rgba(2,108,107,0.3)}
.dotbar1 span.on{background-color:#026c6b}


/*=============================================
=                 calculate1-2                =
=============================================*/

input[type='radio']{margin:0 5px 0 0}
.myform .overage{float:left;padding:10px;background-color:#fa7c85;color:#fff;border-radius:5px;width:90%;-moz-box-sizing:border-box;box-sizing:border-box;display:none}
.overage.on{display:block}


/*=============================================
=                 calculate1-3                =
=============================================*/

.bg2{position:relative;width:100%;margin-bottom:85px;overflow:hidden;background:#e5f2f3}
.bg2 .loan_con{padding:30px 20px}
.wrap3{max-width:750px;margin:0 auto;text-align:center}
.result_list{max-width:100%;overflow:hidden}
.result_list dl{-moz-box-sizing:border-box;box-sizing:border-box;float:left;padding-bottom:15px;border-bottom:1px solid #d6e4e5}
.result_list dl:nth-child(even){padding:0 4% 15px 0}
.result_list dl:nth-child(odd){padding:0 0 15px 4%}
.result_list dl:last-child,.result_list dl:nth-last-child(2){border-bottom:none}
.result_list.s3 dl:nth-last-child(2){border-bottom:1px solid #d6e4e5}
.result_list dt{background:rgba(2,108,107,0.14)}
.evaluate h3{padding-bottom:15px}
.resultwrap{border-radius:5px;margin-bottom:1px}
.resultwrap.r2 .r_box{width:100%;box-shadow:inset 0 0 5px rgba(0,0,0,0.2)}
.resultwrap.r2 .showtext{line-height:20px;padding:40px 60px;text-align:left;-moz-box-sizing:border-box;box-sizing:border-box}
.resultwrap.r2 .showtext span{color:#000}
.resultwrap.r2 .showtext a{color:#026c6b}
.resultwrap .r_box:after{display:block;position:absolute;top:20%;right:0;width:1px;height:60%;content:'';background:#026c6b}
.resultwrap .r_box:last-child:after{display:none}
.calcu_result{position:relative;overflow:hidden;width:100%;font-size:16px}
.calcu_result .r_note{display:block;font-size:12px;line-height:15px;color:#4a4a4a;padding:20px 0 30px;border-bottom:solid 1px #026c6b}
.calcu_result .modify{display:block;position:absolute;top:10px;right:0;height:30px;padding:0 10px;line-height:31px;border-radius:5px;border:solid 1px #9b9b9b}
.calcu_result .modify:hover{color:#fff;border:solid 1px #026c6b;background-color:#026c6b}
.survey h3.tit{max-width:530px;margin:0 auto;border-top:none}
.survey h3.tit span{display:block;color:#9b9b9b;font-weight:400;line-height:30px}
.survey_con{max-width:530px;margin:0 auto;padding:26px 0 0;-moz-box-sizing:border-box;box-sizing:border-box}
.survey_con ul{width:100%;padding:15px 0 20px;overflow:hidden}
.survey_con li{float:left;width:23%;margin-right:2%}
.survey_con li a{display:inline-block;width:100%;height:100px;padding-top:65px;text-align:center;border-radius:5px;background-color:#fff;-moz-box-sizing:border-box;box-sizing:border-box;background-repeat:no-repeat;background-position:50% 27%}
.survey_con li a:hover,.survey_con li a.current{background-color:#f0be58}
.survey_con .li1 a{background-image:url(../img/icon_survey-1.png?r=1503048070079)}
.survey_con .li2 a{background-image:url(../img/icon_survey-2.png?r=1503048070079)}
.survey_con .li3 a{background-image:url(../img/icon_survey-3.png?r=1503048070079)}
.survey_con .li4 a{background-image:url(../img/icon_survey-4.png?r=1503048070079)}
.getnumber input{vertical-align:middle}
.getnumber input[type='text']{border:none;color:#51a9ab;width:68%;height:45px;padding:0 20px;border-radius:5px;background-color:#fff;-moz-box-sizing:border-box;box-sizing:border-box}
.getnumber input[type='button']{float:right;width:26%;height:45px;border-radius:5px;background-color:#026c6b;color:#fff;border:none;margin-right:2%;-moz-box-sizing:border-box;box-sizing:border-box;line-height:44px}
.getnumber input[type='button']:hover{background-color:#026c6b}
.replace_word span{display:inline-block;height:38px;line-height:38px;width:88%;color:#026c6b;padding:0 18px;border-radius:5px;border:solid 1px #026c6b;-moz-box-sizing:border-box;box-sizing:border-box}



/*=============================================
=                  calculate2                 =
=============================================*/

.diet_list .break2{display:inline-block}
.diet_list dl{border-bottom:1px solid #d6e4e5}
.diet_list dl:last-child{border-bottom:none}
.diet_list dd{font-size:16px}
.diet_list .slider_show_unit{font-size:16px}
.resultwrap.r_diet{background:none}
.resultwrap.r_diet .showtext{padding:8px 0 0;background:rgba(2,108,107,0.14);margin:5px 0 20px}
.dietCon .survey{border-top:1px solid #026c6b;overflow:hidden;width:100%}


/*=============================================
=                  calculate3         vip         =
=============================================*/

.myform1 .inputwrap{margin-top:20px;padding:10px 0;border-top:1px solid #d6e4e5}
.myform1 input[type="text"]{padding:0 12px;background:rgba(2,108,107,0.14);-moz-box-sizing:border-box;box-sizing:border-box}
.myform1 #factor4,.myform1 #Text4,.myform1 #Text5{text-align:center;width:100%}
.myform1 .inputwrap div{position:relative;padding-left:4%;padding-bottom:20px}
.myform1 .inputwrap div:first-child{padding-left:0}
.myform1 .inputwrap div:last-child:before{display:none}
.myform1 .inputwrap div:before{display:block;position:absolute;top:23%;right:0;width:1px;height:70%;content:'';background:#d6e4e5}
.myform1 .inputwrap p{text-align:left}
.myform1 .resultwrap{text-align:left;background-color:transparent}
.myform1 .resultwrap p{padding:0}
.myform1 .resultwrap .showtext{text-align:center;border-radius:5px;padding:10px 0 5px;background-color:#fff}
.vipform .inputwrap{margin-top:20px;padding:10px 0;border-top:1px solid #d6e4e5}
.vipform .inputwrap div{position:relative;padding-left:4%;padding-bottom:20px}
.vipform .inputwrap div:first-child{padding-left:0}
.vipform .inputwrap div:last-child:before{display:none}
.vipform .inputwrap div:before{display:block;position:absolute;top:23%;right:0;width:1px;height:70%;content:'';background:#d6e4e5}
.vipform .resultwrap{text-align:left;background-color:transparent}
.vipform .resultwrap p{padding:0}
.vipform .resultwrap .showtext{text-align:center;border-radius:5px;padding:10px 0 5px;background-color:#fff}
.vipform input[type="text"]{background:rgba(2,108,107,0.14)}
.formbtn .reset:hover{color:#fff;background-color:#026c6b}
.formbtn .submit:hover{border-color:#51a9ab;background-color:#51a9ab}
.list03 ul{padding-left:20px;text-align:left}
.list03 li{padding:0;list-style-type:square;list-style-position:outside}
.list03 li span{color:#cd1410}
.list03 li a{color:#026c6b;text-decoration:underline}
.Form2 .resultwrap div{width:50%;-moz-box-sizing:border-box;box-sizing:border-box}
.Form2 .resultwrap div:first-child{position:relative;padding-right:4%}
.Form2 .resultwrap div:first-child:after{content:'';display:block;position:absolute;top:10%;right:0;width:1px;height:90%;background-color:#d6e4e5}
.Form2 .resultwrap div:last-child{padding-left:4%}
.calculatePage1Con,.calculatePage2Con,.calculatePage3Con{display:none}
.calculatePage1 .calculatePage1Con{display:block}
.calculatePage2 .calculatePage2Con{display:block}
.calculatePage3{position:relative;width:100%;margin-bottom:85px;overflow:hidden;background:#e5f2f3}
.calculatePage3 .bg1L,.calculatePage3 .bg1R{display:none}
.calculatePage3 .loan_con{padding:30px 20px}
.calculatePage3 .calculatePage3Con{display:block}
form{width:100%}
.vip{position:relative;width:100%;margin-bottom:85px;overflow:hidden;}
.vip .bg1L,.vip .bg1R{display:none}
.vip .loan_con{padding:30px 20px}
.vip .calculatePage3Con{display:block}
.vipform_con{font-size:0;width:100%}
.vipform_con dl{width:100%;padding:20px 0;border-top:1px solid #ddd}
.vipform_con dl:last-child{border-bottom:1px solid #ddd}
.vipform_con dd{font-size:16px;color:#026c6b;text-align:left;line-height:22px;font-weight:600;width:30%;display:inline-block;position:relative}
.vipform_con dt{width:70%;font-size:16px;display:inline-block;line-height:22px}
.vipform_con dt input{padding:10px 5%;font-size:16px;line-height:22px;width:90%;border:none;border-radius:5px;color:#51a9ab}
.vipform_con .small{color:#cd1410;position:absolute}

/*跳窗客服*/
.box24H{ position: fixed; z-index:-1; top: 0; left: 0; right: 0; bottom: 0; max-width: 450px; max-height: 270px; margin: auto;
    color: #fff; background: #fff url(../img/box24H_bg.png) center center no-repeat; background-size:contain; 
    border-radius: 5px; border: solid 1px #ddd; box-shadow: 1px 1px 6px rgba(0,0,0,.25); 
    opacity:0;-webkit-transition:.4s;transition:.4s;}
.box24H.on{z-index:201;opacity:1}
.box24H_btnbox{ margin: 8% 10% 0 54.44%; /*margin: 31.33% 10% 0 54.44%;*/ }
.box24H_btnbox>p{ margin: 0 -2em 0.9em -1.5em; font-size: 20px; line-height: 1.3; white-space: pre-line; }
.box24H_btnbox>p:before{ content: "貸款文字客服在線即時對談"; display: block; margin-bottom: 0.8em; font-size: 0.85em; }
.box24H_btnbox>p:after{ content: "快速解決問題，\A節省您寶貴時間。"; }
.box24H_btnbox a{ position: relative; display: block; height: 2.5em; line-height: 2.5em; font-size: 20px; text-align: center; color: #fff; cursor: pointer; border-radius: 5px;
    font-family: "Fontawesome", Helvetica, Arial, 'LiHei Pro', '微軟正黑體', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif; }
.box24H_btnbox a:before{ display: inline-block; background: 0 center no-repeat; background-size: auto 1.25em; box-sizing: border-box; }
.box24H_btnbox .yBtn{ color: #323232; background: #ffba00; }
.box24H_btnbox .yBtn:before{ content: "文字對談"; padding-left: 1.65em; background-image: url(../img/box24H_comment.png); }
.box24H_btnbox .yBtn:after{ content: ""; position: absolute; left: 90%; top: 40%; width: 2.3em; height: 1.95em; background: url(../img/box24H_pointer.png) center center no-repeat; background-size: contain; }
.box24H_btnbox .telBtn{ margin-top: 0.4em; background: #e14149; }
.box24H_btnbox .telBtn:before{ content: "免付費專線"; padding-left: 1.3em; background-image: url(../img/box24H_tel.png); }
.box24H_btnbox .nBtn{ margin-top: 0.8em; height: 2.57em; line-height: 2.57em; font-size: 14px; color: #d1eeee; border: solid 1px #a2c2c2; }
.box24H_btnbox .nBtn:before{ content: "\f017  稍後提醒"; }
.box24H_close{ position: absolute; top: 0; right: 0; margin: -2.22%; width: 7.11%; padding-top: 7.11%; background: url(../img/box24H_close.png) center center no-repeat; background-size: contain; }
@media screen and (min-width: 1000px) {
    .box24H a:hover{ -webkit-filter: brightness(110%) contrast(120%); filter: brightness(110%) contrast(120%);}
}
@media screen and (max-width: 490px) {
    .box24H{ max-width: 90vw; max-height: 54vw; }
    .box24H a:active{ -webkit-filter: brightness(110%) contrast(120%); filter: brightness(110%) contrast(120%);}
    .box24H_btnbox{ margin-top: 6%; }
    .box24H_btnbox>p{ font-size: 4.44vw; margin-left: -2em; margin-bottom: 0.6em; }
    .box24H_btnbox a{ font-size: 4.44vw; }
    .box24H_btnbox .nBtn{ font-size: 3.11vw; }
    .box24H_close{ width: 30px; height: 30px; padding: 10px; margin: -20px; background-size: 30px; }
}
/*.box24H{width:550px;height:550px;z-index:-1;position:fixed;left:50%;top:50%;margin:-275px 0 0 -275px;display:inline-block;background:url(../img/m_3x.png?r=1503048070079) no-repeat center center;background-size:contain;opacity:0;-webkit-transition:.4s;transition:.4s}
.box24H.on{z-index:201;opacity:1}
.box24H img{width:100%}
.box24H .nBtn{width:240px;height:0;display:inline-block;padding-top:16%;background:url(../img/btn-1_3x.png?r=1503048070079) no-repeat left top;background-size:contain;position:absolute;left:5%;bottom:10%;-webkit-transition:.4s;transition:.4s;-ms-transform:translateY(0px);-webkit-transform:translateY(0px);transform:translateY(0px)}
.box24H .nBtn:hover{-ms-transform:translateY(-5px);-webkit-transform:translateY(-5px);transform:translateY(-5px)}
.box24H .yBtn{width:240px;height:0;display:inline-block;padding-top:16%;background:url(../img/btn-2_3x.png?r=1503048070079) no-repeat left top;background-size:contain;position:absolute;right:4%;bottom:10%;-webkit-transition:.4s;transition:.4s;-ms-transform:translateY(0px);-webkit-transform:translateY(0px);transform:translateY(0px)}
.box24H .yBtn:hover{-ms-transform:translateY(-5px);-webkit-transform:translateY(-5px);transform:translateY(-5px)}
@media screen and (max-width: 767px) {
    .box24H{width:80%;height:80vw;margin:-40% 0 0 -40vw}
    .box24H .nBtn{width:40%;left:6%}
    .box24H .yBtn{width:40%;right:6%}
}*/


/*=============================================
=                     RWD                     =
=============================================*/

@media screen and (max-width: 1000px) {
    .loan_nav a{margin:0 1%}
}
@media screen and (max-width: 767px) {
    .loan_nav{padding:35px}
    .loan_nav a{text-align:center;margin:0 16px 16px}
    .loan_title{margin:142px auto 0}
}
@media screen and (max-width: 750px) {
    .wrapper{padding: 0 20px;}
    .header{height:50px}
    .menuBtn{display:block;display:block;position:absolute;top:0;right:0;width:32px;height:2px;display:block;padding:24px 20px;-webkit-transition:.3s;transition:.3s;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:500}
    .menuBtn.x{top:15px;right:15px}
    .menuBtn.x .lines{width:100%;background:transparent}
    .menuBtn.x .lines:before,.menuBtn.x .lines:after{height:3px;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;top:0;width:100%}
    .menuBtn.x .lines:before{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg)}
    .menuBtn.x .lines:after{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg)}
    .menuBtn .lines{display:inline-block;width:100%;height:2px;background:#fff;-webkit-transition:.3s;transition:.3s;position:relative;vertical-align:top;border-radius:3px}
    .menuBtn .lines:before{top:9px}
    .menuBtn .lines:after{top:-9px}
    .menuBtn .lines:before,.menuBtn .lines:after{display:inline-block;width:100%;height:2px;background:#fff;-webkit-transition:.3s;transition:.3s;position:absolute;border-radius:3px;left:0;content:'';-webkit-transform-origin:10px center;-ms-transform-origin:10px center;transform-origin:10px center}
    .hdBg{display:block;position:absolute;top:0;left:0;width:100%;height:50px;background-color:#026c6b;z-index:150}
    .loan_nav{padding:15px 0}
    .loan_nav a{height:40px;line-height:40px;width:140px;margin:0 1% 8px}
    .bg1{background-color:rgba(81,169,171,0.15)}
    .bg1 .bg1L,.bg1 .bg1R{display:none}
    .wrap1,.wrap2{max-width:100%}
    .loan_con{padding:20px}
    .title1{font-size:24px;line-height:32px}
    .txt1{font-size:14px;line-height:16px}
    .myform dd{font-size:16px}
    .select1{width:100%}
    .myform input[type="text"]{width:37%}
    .topBtn{right:20px}
    .warnningT{text-align:center}
    .footer{margin-bottom:75px}
    .footer_warnning{font-size:17px}
    .footer_warnning .warnningL{text-align:left}
    .footer_warnning .warnningL b{letter-spacing:2px}
    .footer_warnning .warnningR{position:inherit;right:inherit;bottom:inherit;padding:15px 15px 0;font-size:14px}
    .footer_warnning .warnningB{padding:20px 0 15px;margin:0 15px}
    .footer_nav,.footer_nav_vip{display:block}
    .footer_nav_vip{font-size: 0;}
    .sidebar{width:65%;right:-65%;-webkit-transition:right .5s;transition:right .5s;top:inherit;bottom:10%;margin-top:0;display:none}
    .sidebar b{cursor:pointer;display:block;position:absolute;bottom:0;left:-90px;width:90px;height:50px;background-color:rgba(0,0,0,0.7);border-top-left-radius:8px;border-bottom-left-radius:8px;-moz-box-sizing:border-box;box-sizing:border-box;padding:8px 10px 8px 16px;line-height:18px}
    .sidebar b:before{display:block;position:absolute;top:50%;left:9px;width:8px;height:8px;margin-top:-4px;display:inline-block;content:"";border-right:1px solid #51a9ab;border-top:1px solid #51a9ab;-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg)}
    .sidebar.on{right:0}
    .radioTxt{margin-right:5%;padding-left:30px}
    .myform.s2 dd{width:100%}
    .mybtn{width:120px}
    .btnbar1 a,.btnbar1 input{margin:0 2%}
    .result_list dl{float:none;width:100%}
    .result_list dl:nth-child(even),.result_list dl:nth-child(odd){padding:0 1% 20px}
    .result_list dl:nth-last-child(2){border-bottom:1px solid #d6e4e5}
    .resultwrap{padding:15px;-moz-box-sizing:border-box;box-sizing:border-box}
    .resultwrap .r_box:after{display:none}
    .resultwrap .monitor_counter{font-size:28px}
    .resultwrap .showtext{line-height:23px}
    .resultwrap.r2 .showtext{padding:10px;line-height:16px}
    .calcu_result .r_note{line-height:18px}
    .resultwrap .r_box p{position:relative}
    .resultwrap .r_box p:after{display:block;position:absolute;top:25%;right:0;width:1px;height:50%;content:'';background:#026c6b}
    .survey h3.tit span{padding-top:5px;line-height:22px}
    .replace_word span{width:80%}
    .survey_con{text-align:center}
    .survey_con li{float:none;display:inline-block;width:46%;margin:0 1% 4%}
    .survey_con li a{height:50px;line-height:50px;padding:0 0 0 65px;background-position:27% 50%}
    .getnumber{text-align:center}
    .getnumber input[type='text']{width:96%;margin:0 0 20px}
    .getnumber input[type='button']{float:none;width:132px}
    .resultwrap.r_diet{padding:0}
    .resultwrap.r_diet .showtext{text-align:center;padding:8px 0 4px}
    .diet_list{margin:10px 0 0}
    .myform1 .inputwrap{padding:0}
    .myform1 .inputwrap div:first-child p{min-width:100px}
    .myform1 .inputwrap div{padding:0;border-bottom:1px solid #d6e4e5}
    .myform1 .inputwrap div:last-child{border:none}
    .myform1 .inputwrap div:before{display:none}
    .myform1 .resultwrap{padding:0}
    .myform1 .resultwrap p{text-align:left;padding:0;float:none}
    .myform1 .resultwrap .showtext{text-align:center;border-radius:5px;padding:10px 0 5px;background-color:#fff}
    .Form2 .resultwrap div{width:100%}
    .Form2 .resultwrap div:first-child{padding-right:0;padding-bottom:20px;border-bottom:1px solid #d6e4e5}
    .Form2 .resultwrap div:first-child:after{display:none}
    .Form2 .resultwrap div:last-child{padding-left:0}
}