@charset "utf-8";
body, div, h1, h2, h3, h4, h5, h6, p, blockquote, dl, dt, dd, ul, ol, li, fieldset, form, tr, th, td, center, input, button, cmsArea { padding: 0; margin: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
button, input, select { font: 14px/1.8 'Lato', sans-serif; }
li { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
body { margin: 0 auto; color: #000; background: #32363d; }
/* base */
.clearfix:after { content: ""; height: 0; visibility: hidden; display: block; clear: both; }
.clearfix { zoom: 1; }
.clear { clear: both; }
a { color: #229ffd; text-decoration: none;}
a:hover { color: #feae1b; }
a:focus{-moz-outline:none; outline: none;}
.t_hide{text-indent: -999em;}
.t_center{text-align: center;}
.t_left{text-align: left!important;}
.red { color: red; }
/*@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto.eot');
    src: url('../fonts/roboto.woff') format('woff'),
         url('../fonts/roboto.ttf') format('truetype'),
         url('../fonts/roboto.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}*/


/*main*/
.fullbg { width: 100%; min-width: 360px; background: #32363d; font: 14px/1.8 'Lato', sans-serif; }
.wrapper { width: 80%; max-width: 980px; padding: 5%; margin: 0 auto; }

.login-panel, .step-panel, .faq-panel { margin: 0 1%;  }

.login-panel { float: left; width: 36%; padding: 4% 0; background: #f4f6f8; border-radius: 10px; box-shadow: 2px 2px 2px #333; }
.step-panel { float: left; width: 56%; padding: 3.3% 2%; background: #f4f6f8; border-radius: 10px; box-shadow: 2px 2px 2px #333; }
.faq-panel { float: left; width: 94%; margin: 2% 1%; padding: 2%; background: #f4f6f8; border-radius: 10px; box-shadow: 2px 2px 2px #333; }

.title { font-size: 20px; text-align: center; font-weight: bold; }
.subtitle { font-size: 18px; font-weight: bold; color: #444; }
.login-panel input { display: block; width: 80%; height: 26px; line-height: 26px; padding-left: 1px; border: 1px solid #c7cfd8; margin: 0 auto; color: #4e5763; }
.login-panel li { padding: 1% 0; }
.login-panel ul { width: 80%; margin: 0 auto; }
.login-panel img { vertical-align: middle; }
a.commonbtn { display: inline-block; *display: inline; *zoom: 1; width: 24%; padding: 1% 3%; margin: 2%; background: #229ffd; border-radius: 5px; text-align: center; color: #fff; }
a.commonbtn:hover { background: #feae1b; }

.step-panel img { width: 100%; }
.faq-panel li { list-style-type: disc; margin-left: 20px; }


/*register*/
.register-panel { width: 60%; padding: 4% 0; margin: 0 auto; background: #f4f6f8; border-radius: 10px; box-shadow: 2px 2px 2px #333; }
.register-panel ul, .register-panel p { width: 80%; margin: 0 auto; }
.register-panel label { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; width: 29%; text-align: right; }
.register-panel input, .register-panel select {height: 30px; padding-left: 1px; width: 69%; border: 1px solid #c7cfd8; margin: 0 auto; color: #4e5763; }
.register-panel select { line-height: 30px; }
.register-panel input.radio { width: auto; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; border: 0px solid #c7cfd8; }
.register-panel input.radio.sp { margin-left: 2%; }
.register-panel span { /*position: absolute; left: -12px; top: 8px; */color: red; }
.register-panel li { position: relative; padding: 1% 0; text-align: center; }
.register-panel li.sp { text-align: left; }
.hintmsg { color: red; text-align: center; }
.register-panel li.spmsg { width: 70%; padding-left: 30%; text-align: left; color: red; }

/*personal info*/
.info-panel { width: 60%; padding: 4% 0; margin: 0 auto; background: #f4f6f8; border-radius: 10px; box-shadow: 2px 2px 2px #333; }
.info-panel ul, .info-panel p { width: 80%; margin: 0 auto; }
.info-panel a.commonbtn { width: 40%; }
.info-panel li { margin: 4px 0; }
.faq { padding-top: 2%; font-size: 12px; color: red; }


/*main*/
.main-panel { width: 96%; min-height: 800px; padding: 2%; margin: 0 auto; background: #f4f6f8; border-radius: 10px; box-shadow: 2px 2px 2px #333; }
.sidenav { float: left; width: 20%; padding-right: 2%; border-right: 1px solid #aaa; }
.usermsg { position: relative; width: 94%; padding: 3%; background: #ddd; margin-bottom: 2%; font-size: 16px; border-radius: 5px; }
.usermsg a { display: block; }
.usermsg a.sp { display: inline; color: #af0101; }
.usermsg a.sp:hover { text-decoration: underline; color: #af0101; }
.subnav { display: none; line-height: 25px; width: 90%; padding-left: 10%; font-size: 14px; }
.menu { margin-top: 10%; }
.menu li { line-height: 30px; margin-bottom: 2%; font-size: 16px; border-bottom: 1px solid #dfdfdf; }
.menu a { display: block; line-height: 16px; padding: 6px 0; }
.menu a.on { color: #feae1b; }
.main { float: left; width: 74%; margin-left: 2%; }

.main input { width: 40%; height: 30px; line-height: 30px; background: none; border: none; border-bottom: 1px solid #aaa; vertical-align: middle; }
.main label { position: relative; display: inline-block; *display: inline; *zoom: 1; width: 80px; text-align: right; vertical-align: middle; margin-right: 5px; }
.main .changepsw label { width: 185px; }
.main li { position: relative; width: 99%; padding-left: 1%; margin: 2px 0; } 
.main li.on { background: #feae1b; }
.itop { z-index: 2; }
a.more { display: inline-block; *display: inline; *zoom: 1; width: 20px; height: 20px; line-height: 18px; background: #229ffd; color: #fff; font-size: 24px; text-align: center; border-radius: 5px; vertical-align: middle; }
a.more:hover { background: #feae1b; }
.main input#btnSend { width: 20%; margin-left: 2%; border: 1px solid #fbb51b; border-radius: 4px; background: #ddd; cursor: pointer; }
.main input#btnSend:hover { background: #fbb51b; }
.main input#CheckCode { width: 18%; }
.main .txt{width:40%;display: inline-block;*display: inline; *zoom: 1;margin-left: 2%;}


#Dv_checkcode,#Dv_paypwd { text-align: center; padding: 5px 0; }
.main .cont1 input#btnSend { width: 40%; }
.main .cont2 input#btnSend { width:105px; margin-left:0}
.main .cont1 input#checkcode, .main .cont2 input#checkcode { width: 40%; }

.question { width: 26px; vertical-align: middle; cursor: pointer; }
.img img { width: 100%; }
.img { display: none; position: absolute; left: -20px; top: 25px; width: 600%; background: #000; padding: 20px; border-radius: 5px; }
.ztop { z-index: 2; }
.img.sp { width: 300%; }


/*.userhistory { position: absolute; left: 106px; top: 30px; padding: 2%; width: 40%; background: #eee; border-radius: 5px; }*/
.default { width: 100%; margin: 2% auto; }
.default p { word-wrap: break-word; }

.cont1, .cont2 { width: 60%; margin: 0 auto; }
.cont2 { width: 80%; }
.main ul a.commonbtn { width: 40%; }
.main .changepsw ul a.commonbtn { width: 30%; }
.main .btns { padding-top: 4%; width: 100%; text-align: center; }
.main .btns a.commonbtn { width: 30%; }
.main .cont2 .btns a.commonbtn { width: 40%; padding: 1% 2%; }
.inputmsg ul { position: relative; margin: 5px 0; background: #ddd; padding: 10px 0 20px 0; border-radius: 5px; }
.inputmsg li.deletebtn { position: absolute; width: 14%; right: 0; bottom: 0; text-align: center; margin: 0; }
.inputmsg li.deletebtn a { display: block; background: #aaa; color: #fff; border-radius: 5px; }
.inputmsg li.deletebtn a:hover { background: #feae1b; }

.getid li { cursor: pointer; }

.userhistory input { width: 100%; border: 1px solid #aaa; border-radius: 5px; }
.userhistory { font-size: 14px; }
.userhistory li { padding: 3px 0; cursor: pointer; }
.userhistory li.on { background: #feae1b; }
.userhistory tr.on { background: #feae1b; }

.notice{font-size: 14px;direction: rtl;}
.notice .red{color:red}

.searchbar { width: 60%; margin: 0 auto; }
.searchbar input { width: 100%; background: url(../images/search.png) no-repeat right top; border: 1px solid #8a8a8a; height: 30px; }
.getid { width: 60%; margin: 10px auto; }
.getid li { padding-left: 2px; }

.popbox { position: absolute; width: 100%; height: 100%; left: 0; top: 20%; }
.popcont { position: relative; z-index: 1113; width: 300px; padding: 2%; margin: 0 auto; background: #f4f6f8; border-radius: 10px; box-shadow: 2px 2px 2px #333; }
.mask{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.4; filter: alpha(opacity=40); z-index: 1112;}
.popbox a.close { display: block; width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 30px; position: absolute; right: 0; top: 0; }
.darrow { display: inline-block; *display: inline; *zoom: 1; width: 0; height: 0; border: 5px solid transparent; border-top: 5px solid #fff; }


.main .cont2 select { width: 65%; height: 30px; line-height: 30px; vertical-align: middle; }


/*cont3*/
.main .search-t input.longbar { width: 90%; border: 1px solid #8a8a8a; height: 30px; }
.main .search-t input.shortbtn { width: 8%; background: url(/images/search-w.png) no-repeat center center #aaa; height: 32px; cursor: pointer; border: none; }
.main .search-t input.shortbtn:hover { background-color: #feae1b; }

.search-t .options span { margin-right: 3%; } 
.search-t .options input { width: auto; vertical-align: middle; }

.transaction { text-align: center; }
.transaction table { width: 100%; margin: 5% auto; }
.transaction th, .transaction td { border: 1px solid #ccc; text-align: center; }
.transaction th { background: #7abcff; }
.pages { text-align: center; }
.pages a { margin: 0 10px; }
.pages a.on { color: #feae1b; }

.transaction .result td { color: red; } 

/*cont4 change password*/
.change-psw { width: 70%; margin: 0 auto; }
.main .change-psw label { width: 190px; }

/*cont5 change notification*/
.change-notification { width: 70%; margin: 0 auto; }
.main .change-notification input { width: auto; }
.main .cont5 input, .main .cont3 input { border: none; }

.main .cont5 input#btnSend { width: 25%; }
.main .cont5 input#checkcode { width: 30%; border-bottom: 1px solid #aaa; }


::-webkit-input-placeholder { /* WebKit browsers */
    color: #bbb;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #bbb;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #bbb;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #bbb;
}

/*sidenav op 20220421*/
.menu { background: #229ffd; }
.menu li { border-bottom: 1px solid #77baec; margin-bottom: 0; background: #229ffd; }
.menu a { color: #fff; padding-left: 10px; height: auto; line-height: 18px; padding: 8px 0; }
.menu a:hover { background: #153852; }
.menu a.on { color: #153852; }
.menu a.on:hover { color: #a9d4ff; }
.subnav { width: 100%; padding-left: 0; background: #7abcff; /*display: block;*/ }
.menu .subnav a { width: 90%; padding-left: 10%; border-bottom: 1px dashed #80c8ff; }
.menu .subnav a:nth-last-child(1) { border-bottom: none; }
.menu .subnav a.tab6 { line-height: 15px; }
.menu a img { height: auto; width: 16%; margin-left: 2%; vertical-align: middle; margin-top: -3px; } 

.menu a.tab2, .menu a.tab6 { line-height: 18px; height: auto; }
.menu a span { width: 80%; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }
.menu a span i { font-style: normal; color: #d2e8ff; }
.sidenav { width: 22%; }
.main { width: 72%; }

.doublecheck { display: none; color: red; }
/*sidenav op 20220421*/

@media screen and (max-width: 960px) {
    .login-panel, .step-panel { width: 94%; margin: 2% 1%; padding: 2%; }
    .register-panel, .info-panel { width: 90%; }
    .info-panel a.commonbtn { width: 70%; }

    .main-panel { width: 96%; }
    .sidenav { width: 100%; padding-right: 0; border-right: none; }
    .usermsg { padding: 0 3%; }
    .usermsg a { position: absolute; top: 0; right: 3%; }
    .usermsg a.sp { position: relative; top: auto; right: auto; }
    .menu { margin-top: 0; }
    .menu li { float: left; width: 28%; }
    .menu li.sp { width: 44%; }
    .subnav { padding-left: 0; }
    .main { width: 100%; margin-left: 0; border-top: 1px dashed #bbb; }
    .cont1, .cont2 { width: 90%; }
    .main .cont4 label { width: 100%; text-align: left; }
    .main .change-psw label { width: 100%; text-align: left; }
    .main .cont4 input { width: 100%; }
    .main input#btnSend { width: 50%; }
    .main input#CheckCode { width: 48%; }
    .main .change-psw input { width: 100%; }

    .main .cont5 input#btnSend { width: 50%; }
    .main .cont5 input#checkcode { width: 40%; }

    .menu li { width: 33%; font-size: 1.8vw; }
    .menu li.sp { width: 33%; }
    .subnav { font-size: 1.4vw; }
}

@media screen and (max-width: 640px) {
    .wrapper { width: 88%; }
    .main .cont2 .btns a.commonbtn, .main .cont1 .btns a.commonbtn { width: 96%; }
    .inputmsg li.deletebtn { width: 100%; bottom: -5%; }
    .register-panel label, .register-panel input, .register-panel select { display: block; width: 100%; text-align: left; }
    .register-panel li.spmsg { padding-left: 0; width: 100%; }
    .img { width: 350px; }

}