
/*공통*/
.btn_sumit{background:#233e59; color:#ffffff !important; border-color:#233e59 !Important; padding:0 5px;}
.reflesh{background:#a5a5a5; border-color:#a5a5a5 !Important; padding:0 10px;}
.reflesh img {margin-top:8px; max-width:15px;}
.btn_srch:before{content:'\f002'; font-family:'FontAwesome'; font-size:15px; margin:0px 3px;}
.btn_cal:before{content:'\f073'; font-family:'FontAwesome'; font-size:15px; margin:0px 3px;}
.btn_save:before{text-indent:0; content:'\f0c7'; font-family:'FontAwesome'; font-size:15px; margin:0px 3px; font-weight:bold; color:#233e59}
.btn_view:before{text-indent:0; content:'\f002'; font-family:'FontAwesome'; font-size:15px; margin:0px 3px; font-weight:bold;  color:#233e59}
.bill_btn {width:80px; display:inline-block; margin-top:10px;}

.in{padding:0.45em 0;}
.mr20{margin-right:20px;}
.mr10{margin-right:10px;}
.ml10{margin-left:10px;}
.dpi{display:inline-block; vertical-align:top;}
.redTxt{color:#d10000}
.blTxt{color:#0024ff}
.fl{float:left;}
.mb5{margin-bottom:5px;}
.pd_txt{padding:10px 0px}
.w100{width:100%}
.w70{width:70%}
.w60{width:60%}
.w80{width:80%}
.w20{width:20%;}
.w10{width:10%;}
.w30{width:30%;}
.w40{width:40%;}

input.w-col{width:80px !important;}
input.w-col05{width:20% !important;}
input.w-col04{width:25% !important;}
input.w-col03{width:30.3% !important}
input.w-col01{width:100% !important;}
input.w60{width:60% !important}
input.auto{width:auto !important}

.ad-btn{background:#555; color:#ffffff ;border:0;}
.fwb{font-weight:600}
.mt10{margin-top:10px;}

.btn a{display:inline-block; padding:10px 20px; color:#ffffff; background:#656d72; border-radius:5px;}
.btn_link{display:inline-block; padding:10px 20px; color:#ffffff; background:#1854c4; border-radius:5px;}
.btn_ud {position:relative; min-width:35px;}
.btn_up:after {text-indent:0; position:absolute; display:block;content:'\f093'; font-family:'FontAwesome'; font-size:15px; margin:0px 3px; font-weight:bold;  color:#233e59;  top:0;left:0;right:0; margin:0 auto;}
.btn_down:after {text-indent:0;position:absolute;  display:block;content:'\f019'; font-family:'FontAwesome'; font-size:15px; margin:0px 3px; font-weight:bold;  color:#233e59;  top:0;left:0;right:0; margin:0 auto;}
.but {display:inline-block; vertical-align:middle;}
.but .btn_ud {min-width:20px; display:block; height:18px;}
.btn_up1:after {text-indent:0; position:absolute; display:block;content:'\f0de'; font-family:'FontAwesome'; font-size:15px; margin:0px 3px; font-weight:bold;  color:#233e59;  top:-6px;left:0;right:0; margin:0 auto;}
.btn_down1:after {text-indent:0;position:absolute;  display:block;content:'\f0dd'; font-family:'FontAwesome'; font-size:15px; margin:0px 3px; font-weight:bold;  color:#233e59;  top:-13px;left:0;right:0; margin:0 auto;}



@media all and (min-width:768px) {
.btn{text-align:left;}

}


/*검색*/
.srchWrap{position:relative; text-align:center;}
.srchWrap .srchBox{border:1px solid #bbb; background:#f9f9f9; border-radius:5px; padding:20px 0; font-size:0.9em;}
.srchWrap .srchBox input{border:1px solid #ddd;}
.srchWrap .srchBox input.btn-srch{padding:0 15px;}
.srchWrap .srchBox input.btn_img{background:#1854c4; color:#ffffff; padding:0 15px; margin-left:2px;}
.srchWrap .srchBox .srch{overflow:hidden;}


.ship_select select {width:33%;}
.srchWrap .srchBox input.input_srch {width:50%;}

.srchWrap .callsign {}
.srchWrap .callsign span {margin:0 10px; font-weight:600; display:inline-block;}
.srchWrap .callsign span label {margin:0 10px;}
.srchWrap .btn_li.tar ul  {text-align:right !important;}
.srchWrap .btn_li .btn_cansle {text-align:center !important;}

/*예선예보현황*/
.srchWrap .preli {text-align:left; padding:0 20px;}
.srchWrap .preli li {margin-bottom:5px;}
.srchWrap .preli li label {width:80px; display:inline-block;}
.srchWrap .preli li input {width:48%;}
.srchWrap .preli li.cld input {width:25%;}
.srchWrap .btn_one li {width:100%;}

.mmbut {padding:0}
.ico_pm {position:relative; display:block; width:20px; height:34px;}
.ico_pm:after {position:absolute; display:block; content:'';  font-family:'FontAwesome'; left:0; right:0; margin:0 auto; top:0; font-size:10px; color:#878787; width:10px; height:10px; vertical-align:top; }
.ico_plus:after {content:'\f067' !important; }
.ico_minus:after {content:'\f068' !important;}

/*청구*/
.srchWrap .billBox .preli li label {width:100px}
.srchWrap .billBox .preli li label select {min-width:100%}
.srchWrap .billBox .preli li.cld input {width:23%;}
.srchWrap .billBox .preli li input {width:44%;}

@media all and (min-width:768px) {
.srchWrap .preli:after {clear:both; display:block; content:'';}
.srchWrap .preli li {float:left; width:50%; padding:0 2%}
.srchWrap .regist li {float:left; width:33.3% !important; padding:0 !important}
.srchWrap .regist li label {width:60px !important;}
.srchWrap .regist li input.shname {width:40% !important;}
.srchWrap .regist li input {width:68% !important;}

.srchWrap .billBox .preli li label {width:110px;}



}

@media all and (min-width:1000px) {
.ship_select select {width:20%;}
.srchWrap .srchBox input.input_srch {width:40%;}

.srchWrap .preli li {width:33.3%;}
.srchWrap .col02 li {width:50%;}
.srchWrap .preli li input {width:45%;}
.srchWrap .preli li.cld input {width:24%;}

.srchWrap .billBox .preli li {width:50%;}

}


@media all and (min-width:1200px) {

.ship_select select {width:15%;}
.srchWrap .srchBox input.input_srch {width:30%;}

.srchWrap .regist {padding:0 100px;}

}

@media all and (min-width:1400px) {
.srchWrap .preli li  {margin-bottom:5px;}
.srchWrap .preli li label {width:100px; text-align:right; margin-right:10px;}

.srchWrap .regist li input {width:73% !important}
.srchWrap .regist li input.shname {width:53% !important}

.srchWrap .billBox .preli li {width:33.3%;}
.srchWrap .billBox .preli li input.w50 {width:48%;}
.srchWrap .billBox .preli li.cld input {width:22%;}
.srchWrap .billBox .preli li input {width:42%;}

}

@media all and (min-width:1600px) {
.srchWrap .billBox ul {width:93%; padding-left:20px;}
.bill_btn {position:absolute; top:10px; right:20px; width:80px; height:80px; border-radius:5px; }

}




/*회원가입절차*/
.joinstep{position:relative;}
.joinstep ul{overflow:hidden; border:1px solid #e6e6e6; border-top:1px solid #004098}
.joinstep ul li{float:left; width:20%; text-align:center; padding:12px 0px 15px; border-right:1px solid #e6e6e6; background:#f8f8f8; position:relative}
.joinstep ul li:last-child{border:0px;}
.joinstep ul li.on{background:#23b14d; color:#ffffff; font-weight:600; border-right:0px}
.joinstep ul li.on:after{content:''; display:block; position:absolute; z-index:1; right:-20px; top:50%; margin-top:-10px; border-width:10px;  border-style:solid; border-color:transparent transparent transparent #23b14d;}

.joinstep ul li .txt{display:none;}
.joinstep ul li .st{text-align:center; text-transform:uppercase; line-height:100%; font-size:0.9em}
.joinstep ul li .st em{display:block; font-size:1.2em}

@media all and (min-width:768px) {

.joinstep ul li .txt{display:block; font-weight:500}
.joinstep ul li .st em{display:inline-block}
.joinstep ul li .st {display:inline-block; width:60px; padding:3px 0; border:1px solid #c8c8c8; border-radius:500px; font-size:0.7em; margin-bottom:5px}
.joinstep ul li.on .st {border-color:#ffffff}

}


/*인증선택*/

.Identity ul.tabs{overflow:hidden;}
.Identity ul.tabs li{ line-height:45px; width:calc(50% - 2px); float:left; background:#f8f8f8; text-align:center; position:relative; cursor:pointer; border:1px solid #e6e6e6; margin: 0 1px}
.Identity ul.tabs.list03 li{width:calc(33.33% - 2px);}
.Identity ul.tabs li:first-child:before{display:none}
.Identity ul.tabs li.current{background:#004098; color:#ffffff; border-color:#004098}
.Identity .tabscontent{border:1px solid #e6e6e6; border-top:1px solid #004098; padding:50px 10%}

.Identity .tabscontent a.btn_link{display:block; text-align:center; max-width:400px; margin:0 auto}

.input_li{max-width:400px; margin:0 auto; }
.input_li li{line-height:40px; position:relative; margin-bottom:5px; overflow:hidden;}
.input_li li:last-child{margin-bottom:0px;}
.input_li li span{display:block; line-height:40px; width:80px; font-weight:500; float:left;}
.input_li li input,
.input_li li select{float:left; line-height:40px; height:40px; width: calc(100% - 80px)}


@media all and (min-width:768px) {
.Identity ul.tabs li{max-width:200px;}
.input_li li span{width:100px;}
.input_li li input,
.input_li li select{width: calc(100% - 100px)}


}

/*아이디비밀번호찾기*/
.search_result{text-align:center;}
.search_result p span{font-size:1.2em; color:#004098;}

@media all and (min-width:768px) {
.search_result p{font-size:1.2em;}

}


/*버튼스타일*/
.btn_li a.btn_link{min-width:250px; line-height:55px; height:55px; padding:0 10px}
.btn_li .btn_sumit{min-width:90px; line-height:50px; height:50px; padding:0 10px; background:#1854c4; border-color:#1854c4 !Important}
.btn_li .btn_cansle{min-width:90px; line-height:50px; height:50px; padding:0 10px; border:1px solid #ddd; background:#e9e9e9; display:inline-block; text-align:center;}
.btn_li .btn_line {min-width:90px; line-height:35px; height:35px; padding:0 10px; border:2px solid #1854c4; display:inline-block; text-align:center; color:#1854c4; background:#fff}

.btn_li ul{overflow:hidden; text-align:center;}
.btn_li ul li{display:inline-block; /*width:50%;*/ padding:0 3px;}
.btn_li ul li a.btn_link{min-width:auto;  width:100%; max-width:250px;}

.bdbt{padding-bottom:30px; margin-bottom:30px; border-bottom:1px dashed #c8c8c8}
.btn_org{background:#004098}

.srchWrap .btn_li .btn_sumit,
.srchWrap .btn_li .btn_cansle {height:35px; line-height:35px;}
.srchWrap .btn_li .btn_sumit {background:#1854c4; border-color:#1854c4 !important}

@media all and (min-width:768px) {
.btn_li ul{text-align:center;}
.btn_li ul li{display:inline-block; float:none; width:auto;vertical-align:top}
.btn_li ul li a.btn_link{min-width:250px; }

.bdbt{padding-bottom:40px; margin-bottom:40px; }
}

@media all and (min-width:1200px) {
.bdbt{padding-bottom:50px; margin-bottom:50px; }
}

/*체크박스커스텀*/
.agreebox{padding:20px; min-height:250px; overflow-y:scroll; border:1px solid #ddd; border-bottom:0px;}
.agree_check{margin:0 auto;  border:1px solid #ddd; line-height:50px; padding:0 3%; position:relative;}
.agree_check > input{position:absolute;left:0;top:0;opacity:0;width:0;height:0}
.agree_check > label{padding-left:35px;display:inline-block; height:25px;line-height:25px;margin-left:0; color:#1c1c1c;background-repeat:no-repeat;background-position:left; background-image:url('../img/check.png');background-size:25px 50px;cursor:pointer; background-position:0 0}
.agree_check > input:checked + label{background-position:left -25px;}

.checkwrap{margin:0 auto; position:relative;}
.checkwrap > input{position:absolute;left:0;top:0;opacity:0;width:0;height:0}
.checkwrap > label{padding-left:35px;display:inline-block; height:25px;line-height:25px;margin-left:0; color:#1c1c1c;background-repeat:no-repeat;background-position:left; background-image:url('../img/check.png');background-size:25px 50px;cursor:pointer; background-position:0 0}
.checkwrap > input:checked + label{background-position:left -25px;}


@media all and (min-width:768px) {
.agree_check{padding:0 20px}
}


/*회원가입*/
/*양식*/

.form_box{margin:0 auto;}
.form_box h4{font-size:1.2em; font-weight:500}
.form_box h4 span{display:inline-block; margin-left:10px; font-size:14px; font-weight:normal}
.form_box ul{overflow:hidden; border-top:1px solid #808080; }
.form_box li{overflow:hidden; border-bottom:1px solid #e6e6e6; }
.form_box li .fm_list{padding:0px 5px; display:block; font-size:0.9em; padding:.750em 0 0px; font-weight:500}
.form_box li .fm_txt{display:block; padding:0px 5px; font-size:0.9em; padding:.750em 0;}
.form_box li .fm_txt input{width:100%;  height:45px; line-height:45px;}
.form_box li .fm_txt button{line-height:45px; height:45px}
.form_box li .btn_change input.op0{display:none;}
.form_box li .btn_change .radio_label{display:inline-block; height:45px; line-height:45px; padding:0 20px; border:1px solid #e6e6e6; min-width:100px; text-align:center;}
.form_box li .btn_change input:checked + .radio_label{background-color:#df1014; border-color:#df1014;color:#fff}


.form_box li .fixsize input{width:150px !important}
.form_box li.long .fm_list{border-bottom:1px solid #e6e6e6;}
.form_box li.long .fm_list, .form_box li.long .fm_txt{width:100%}

.form_box li.long input{width:auto}
.form_box li.long input.w60{width:60%}

.form_box span.sp_txt{ display:inline-block; vertical-align:top; line-height:45px;}
.form_box .select_date{font-weight:700; font-size:1.1em}

.btn_in a{display:block; line-height:55px; height:55px; padding:0 20px; background:#df1014; color:#ffffff; text-align:center;}
@media all and (min-width:768px) {
.form_box li{border-bottom:0px;}
.form_box li:last-child{border-bottom:1px solid #e6e6e6}
.form_box li .fm_list,
.form_box li .fm_txt{float:left; width:75%;}
.form_box li .fm_list, .form_box li .fm_txt{font-size:1em;}
.form_box li .fm_list{width:25%; padding:1em; max-width:200px;}
.form_box li .fm_txt{padding:1em}
.form_box span.sp_txt{margin-left:10px;}
.form_box li .fm_txt input{width:auto}
.btn_in a{display:inline-block; padding:0 50px}
}

@media all and (min-width:1200px) {
.form_box li .fm_txt input.w-col01{}
}

/*서비스선택*/

.service_li{overflow:hidden; border:1px solid #e6e6e6; position:relative;}
.service_li li{border-bottom:1px solid #e6e6e6;}
.service_li li:last-child{margin-bottom:0; border-bottom:0px;}

.service_li li span.tit{font-weight:500; font-size:1.2em; margin-bottom:10px}
.service_li li img{max-width:120px;}

.fullcheck{position:relative;}
.fullcheck > input{position:absolute;left:0;top:0;opacity:0;width:0;height:0}
.fullcheck > label{padding:50px 20px 20px;display:block; color:#1c1c1c; position:relative; z-index:1; cursor:pointer}
.fullcheck > label:before{width:25px; height:25px; border-radius:500px; content:''; display:inline-block; position:absolute; left:20px; top:20px; background-repeat:no-repeat;background-position:left; background-image:url('../img/check.png');background-size:25px 50px;cursor:pointer; background-position:0 0}
.fullcheck > input:checked + label:before{background-position:left -25px;}
.fullcheck > input:checked + label{background:#f8f8f8; border:2px solid #23b14d; box-sizing:border-box}
.fullcheck > input:checked + label dt{color:#23b14d}

.fullcheck dt{font-size:1.2em; font-weight:500; color:#000000; margin:10px 0px;}
.fullcheck dd{background:url("../img/dot_li.gif") no-repeat 0px 10px; padding-left:7px; margin-bottom:3px;}
.fullcheck dd:last-child{margin-bottom:0px;}

@media all and (min-width:768px) {
.service_li li {width:33.33%; float:left; border-bottom:0px; margin-bottom:0px;}
.fullcheck dt{font-size:1.4em}
.service_li:after{content:''; display:block; width:1px; height:100%; position:absolute; left:33.33%; top:0; bottom:0; background:#e6e6e6; z-index:0}
.service_li:before{content:''; display:block; width:1px; height:100%; position:absolute; right:33.33%; top:0; bottom:0; background:#e6e6e6; z-index:0}

}


/*가입완료*/
.result{padding:20px 0px}

.title{overflow:hidden; /*text-align:center;*/}
.title h2{font-size:1.3em; color:#000000; padding-bottom:20px; margin-bottom:20px; position:relative; font-weight:500}
.title p{font-size:1em; margin-bottom:30px;}
.title h2:after{content:''; display:block; width:30px; height:1px; background:#323232; position:absolute; bottom:0; left:0; right:0; margin:auto}
/*.result h2:before{ font-family:'FontAwesome'; content:'\f118'; display:block; color:#004098}*/

.result_info{position:relative; border:1px solid #e6e6e6; overflow:hidden; max-width:1000px; margin:0 auto}
.result_info dl{padding:20px 20px; border-top:1px solid #004098}
.result_info dl dt{font-weight:500; color:#004098; margin-bottom:10px;}

@media all and (min-width:640px) {
.title h2{font-size:1.6em;}

.title p{font-size:1.1em; margin-bottom:50px;}
.result_info {border:0px;}
.result_info dl{float:left; width:48%; padding:30px 20px; margin:0 1%;  border-top:2px solid #004098; border-bottom:1px solid #004098; border-radius:30px; min-height:170px}
.result_info dl dt{font-size:1.2em}
}


@media all and (min-width:768px) {
.title h2{font-size:2em; letter-spacing:-2px; margin-bottom:30px; padding-bottom:30px}
.title p{font-size:1.2em;}
.result_info dl{width:47%; margin:0 1.5%; padding:50px 20px; min-height:215px}
}



/*로그인*/
.login_box{background:#f5f5fa; padding:10% 5%; border-top:1px solid #005bac}
.login_box h4,
.login-box h4{font-size:1.5em; margin-bottom:10px; text-align:center; text-transform:uppercase}
.login_box p.tac{text-align:center; font-size:1.1em;}

.logout_page {margin-bottom:30px;}
.logout_page li span {font-weight:500}
.login-box .logout_btn {padding:10px 25px; background:#1854c4; color:#fff; border-radius:5px }

.mem_login{position:relative; ;}

.mem_login {border:1px solid #e6e6e6; border-top:0px;  overflow: hidden; position:relative; padding:10px;}
.mem_login:before{content:''; width:100%; height:3px; position:absolute; left:0; top:0px; background:#005bac; z-index:0}
/*.mem_login .login-box:after{content:''; width:20%; height:1px; position:absolute; left:0; top:0px; background:#fb0000; z-index:1}*/


.mem_login .login_form{background:#ffffff; overflow:hidden; margin-bottom:20px}
.mem_login .login_form ul{overflow:hidden; float:left; width:calc(100% - 100px);}
.mem_login .login_form ul li{overflow:hidden; margin-bottom:10px;}
.mem_login .login_form ul li:last-child{margin-bottom:0;}
.mem_login .login_form ul li label{ display:none;}
.mem_login .login_form ul li input{width:100%; float:left;}
.mem_login .login_form .btn-login{ float:right;background-color:#005bac; width:90px; height:82px;border:0;color:#fff;padding: 0 10px; font-weight:500; font-size:1em; text-align:center; border-radius:5px;}

.log_lst{ overflow:hidden;}
.log_lst li{ float:left; padding-right:25px; position:relative; }
.log_lst li a{ color:#505050; font-size:0.85em;}
.log_lst li a:after{content:'\f105'; font-family:'FontAwesome'; display:inline-block; margin-left:10px; line-height:100%; vertical-align:middle; color:#969696}

.mem_login .join_box {border:1px solid #e6e6e6; padding: 20px 5%;overflow: hidden; margin-top:30px;}
.mem_login .join_box .bt_join{display:block; background:#fb0000;  width:100%;height:44px; line-height:44px; font-size:1em; color:#fff;font-weight:500; text-align:center; margin-top:12px; border-radius:5px;}

.mb_find {}
.mb_find a {position:relative; padding-left:10px; }
.mb_find a:last-child {margin-left:10px; }
.mb_find a:before {position:absolute; display:block; content:''; width:5px; height:5px; background:#bbb; top:5px; left:0;}

.mb_rem {}
.mb_rem .rem {}
.mb_rem .rem input{height:25px;}

.bot_txt {text-align:center; padding:20px 0;}
.bot_txt .btn_go {background:#f9f9f9; border-radius:5px; margin-top:10px; }

.text_size {font-size:1.1em; background:#f5f5f5; padding:30px 20px; border:1px solid #ddd;}

@media all and (min-width:540px) {
.mem_login .login-box{padding:50px 10%; max-width:630px; margin:0 auto;}
.mem_login .login_form ul{overflow:hidden; float:left; width:70%;}
.mem_login .login_form ul li{overflow:hidden; margin-bottom:10px;}
.mem_login .login_form ul li:last-child{margin-bottom:0;}
.mem_login .login_form ul li label{width:22%; display:block; font-weight:600; margin-right:3%; float:left; line-height:40px; height:40px}
.mem_login .login_form ul li input{width:75%; float:left; line-height:40px; height:40px}
.mem_login .login_form .btn-login{width:110px; height:90px;}

.mb_find {padding-left:18%;}


.log_lst{margin-left:17.5%}

.mem_login .join_box {border:1px solid #e6e6e6; padding: 40px 10% 30px 10%;overflow: hidden; margin-top:30px;}
.mem_login .join_box p{float:left; width:70%; padding-top:20px}
.mem_login .join_box .bt_join{ float:right; width:110px; height:90px; line-height:90px; margin-top:0px; text-align:center; }

.mb_rem {padding-left:70px}
.mb_rem .rem {display:inline-block; margin-right:10px;}

}

@media all and (min-width:768px) {
.login_box {padding:6% 5%;}
.login_box h4 {font-size:2em;}


}

@media all and (min-width:1024px) {

.mem_login{margin:0 auto;}
/*
.mem_login .login-box{float:left; width:52%; margin-right:3%;}
.mem_login .join_box{float:left; width:45%; padding:70px 40px; margin:0px; border-top:0px; position:relative;}
.mem_login .join_box:before{content:''; width:100%; height:2px; position:absolute; left:0; top:0px; background:#323232; z-index:0}
.mem_login .join_box:after{content:''; width:20%; height:2px; position:absolute; left:0; top:0px; background:#005bac; z-index:1}
*/

.mem_login:after {clear:both; display:block; content:'';}
.mem_login .login-box.col02 {float:left; width:50%; padding:50px 4%;}

}

@media all and (min-width:1200px) {
.mem_login{border:1px solid #e6e6e6; overflow:hidden; max-width:1200px;}
/*.mem_login:before{content:''; width:100%; height:3px; position:absolute; left:0; top:0px; background:#323232; z-index:0}*/
.mem_login:after{content:''; width:20%; height:3px; position:absolute; left:0; top:0px; background:#005bac; z-index:1}

.mem_login .login-box{/*float:left; width:55%; */border:0px;}
/*.mem_login .login-box:after{position:absolute; width:1px; height:60%; left:auto; right:0; top:0; bottom:0; background:#e6e6e6; margin:auto}*/
.mem_login .join_box{float:left; width:45%; border:0px; margin:0; padding:80px 5%}

.mem_login.confirm .login-box{float:none; width:100%; max-width:800px; margin:0 auto;}
.mem_login.confirm .login-box:after{display:none}

.bot_txt p {display:inline-block; padding-right:10px;}
.bot_txt .btn_go {margin-top:0}


.find_box,
.find_box .login-box {max-width:900px}
.find_box .login-box:last-child {border-left:1px solid #ddd !important;}

}

/*회원가입*/
.order_step{text-align:center; position:relative;}
/*.order_step:before{display:block; content:''; width:220px; height:1px; background:#dcdcdc; position:absolute; top:30px; left:0; right:0; margin:auto}*/
.order_step li{display:inline-block; vertical-align:center; padding:0 1px;}
.order_step li p.icon{width:55px; height:55px; border-radius:50%; margin-bottom:10px; position:relative; background:#9399a7; background-size:30px !important}
.order_step li p.icon:after{content:''; display:block; font-family:'FontAwesome'; position:absolute;line-height:60px; width:100%; height:100%; text-align:center; margin:auto; color:#f6f6f6; font-size:1.5em;}
.order_step li.st01 p.icon:after{content:'\f00c';}
.order_step li.st02 p.icon:after{content:'\f141';}
.order_step li.st03 p.icon:after{content:'\f005';}
.order_step li.active p.icon:after{color:#ffffff}
.order_step li p.txt{font-size:0.9em}
.order_step li.active p.icon{background-color:#0090d5}

.member_step{margin:0 auto; width:100%;margin-bottom:20px; padding-bottom:20px; text-align:center;}
.member_step li{ display:inline-block ; height:20px; line-height:20px; font-size:0.85em; font-weight:600; padding-left:15px; background:url("../img/arr_next.gif") no-repeat 0 50%; background-size:8px auto}
.member_step li:first-child{padding-left:0px; background:none; margin-left:0px}
.member_step li:last-child{margin-right:0px;}
.member_step li.on{color:#505050;}
.member_step li span{padding:5px; line-height:100%; float:left; display:block;border-radius:20px; margin-right:5px; background:#c8c8c8; color:#ffffff; font-weight:600; margin-top:0px; }
.member_step li.on span.num{ background:#505050; }

.join_box h4{font-size:1.2em; font-weight:bold; margin-bottom:20px; color:#323232}
.join_box .agreebox{border:1px solid #ccc;background:#fff;padding:25px;height:200px;overflow-y:auto;margin-bottom:15px; background:#f5f5fa}
.join_box .radio_btn{overflow:hidden; }
.join_box .radio_btn li{display:inline-block;  margin-right:5%; font-weight:bold }


@media all and (min-width:768px) {
.member_step{padding-bottom:30px; margin-bottom:30px;}
.member_step li{height:25px; line-height:25px; font-size:1em; padding-left:30px; margin-left:20px;}
}

@media all and (min-width:1200px){
.member_step li{height:35px; line-height:35px; font-size:1.2em; padding-left:40px; margin-left:30px;}
.member_step li span{margin-top:5px; margin-right:10px;}
}

/*회원가입양식*/

#wrap_zip {width:270px; left:-35%;}
@media all and (min-width:640px) {
#wrap_zip {left:0%; width:100%;}
}

.form_box{border-top:3px solid #505050; overflow:hidden;}
.form_box li{overflow:hidden; border-bottom:1px solid #e6e6e6; }
.form_box li .fm_list{padding:0px 5px; display:block; width:25%; float:left; font-size:0.9em; padding:.750em .786em;}
.form_box li .fm_txt{display:block; padding:0px 5px; width:75%; float:left; font-size:0.9em; padding:.750em .786em;}
.form_box li .fm_txt input{width:100%}
.form_box li .inauto input{width:auto}
.form_box li.long .fm_list{border-bottom:1px solid #e6e6e6;}
.form_box li.long .fm_list, .form_box li.long .fm_txt{width:100%}

.form_box li.long input{width:auto}
.form_box li.long input.w60{width:60%}

.form_box .select_date{font-weight:700; font-size:1.1em}

@media all and (min-width:768px) {
.form_box li .fm_list, .form_box li .fm_txt{font-size:1em}
.form_box li .fm_list{line-height:40px;}
.form_box li .fm_txt input{width:auto}
}

@media all and (min-width:1200px) {
.form_box li .fm_txt input.w-col01{width:60% !important}
}






/*데이터탑*/
.databox{padding:15px 15px; border:1px solid #e6e6e6; background:#fb0000}
.bgtab{padding:15px 15px; color:#000000; background:#f5f5f5;  overflow:hidden;  border-top:1px solid #005bac; border-bottom:0px; font-size:1.1em; letter-spacing:-1px; font-weight:500}
.half{width:50%; float:left; line-height:30px}

.dpi{display:inline-block; vertical-align:top;}
.dpi_li li{display:inline-block; vertical-align:top; padding-right:2px}
.dpi_li li:last-child{padding-right:0}

.datebox{position:relative; text-align:center; margin-bottom:10px; }
.datebox .box{width:48.5%; float:left;}
.datebox .box:after{content:''; display:block; clear:both;}
.datebox .box input,
.datebox .box button{float:left; width:calc(100% - 35px);}
.datebox .box input{padding:0 5px; border-right:0}
.datebox .box button{width:35px; border:0px; background:#64605c; color:#ffffff; padding:0}
.datebox span{float:left; width:3%; line-height:36px;}
.datebox:after{content:''; display:block; clear:both;}

.btn_date{display:inline-block; line-height:35px; height:35px; font-size:0.9em; padding:0 5px; background:#64605c; border-radius:3px; color:#ffffff}
.btn_date.on{background:#23b14d}

.srch_table{width:100%;background:#ffffff; border-collapse:collapse; border-top:1px solid #e6e6e6; font-size:0.9em}
.srch_table th{padding:7px 7px; background:#f8f8f8; font-weight:400; color:#000000}
.srch_table th, .srch_table td{border:1px solid #d1d1d3; padding:7px 7px; vertical-align:middle; min-height:28px;}
.srch_table th:first-child {border-left:none;}
.srch_table th:last-child {border-right:none;}
.srch_table td:first-child {border-left:none;}
.srch_table td:last-child {border-right:none;}

.srch_table .dpi_li li a{ line-height:25px; height:25px}

.move_table table{min-width:768px;}
.srch_table th, .srch_table td{padding:12px 7px;}

@media all and (min-width:768px) {
.bgtab{font-size:1.3em}
.datebox{max-width:300px; margin-bottom:0; float:left; margin-right:10px}
.srch_table .dpi_li li a{line-height:35px; height:35px; padding:0 10px}
}

/*확인취소 큰버튼*/
.ok_btn{text-align:center;}
.ok_btn ul li{display:inline-block; vertical-align:top;}
.ok_btn ul li button{background:#005bac; color:#ffffff; padding:0px 30px; font-size:14px; border:1px solid #005bac; height:45px; border-radius:5px}
.ok_btn ul li a{padding:0px 30px; font-size:14px;  background:#505050; color:#ffffff; border:1px solid #505050; line-height:45px; height:45px; display:block; border-radius:5px}
.ok_btn ul li a.btnC_blue {background:#005bac; }

/*사용이력조회*/
.move_table{position:relative; overflow-y:scroll}

.move_table table{min-width:768px;}
.data_table {width:100%; border-top:1px solid #323335;}
.data_table th, .data_table td {padding:15px 5px; border:1px solid #d1d1d3; border-top:none; font-size:0.9em; text-align:center; vertical-align:middle}
.data_table th:first-child {border-left:none;}
.data_table th:last-child {border-right:none;}
.data_table td:first-child {border-left:none;}
.data_table td:last-child {border-right:none;}
.data_table thead th {border-bottom:1px solid #999999; background:#f8f8f8; font-weight:400; color:#000000}
.data_table tbody th {color:#205493; font-weight:400;}
.data_table tbody td {border-bottom:1px solid #d9d9d9; }
.data_table.color th {background:#F5F6FA}
.data_table.tx_left tbody td {padding-left:20px; text-align:left;}

.ic_con{display:inline-block; padding:3px 2px; color:#ffffff; background:#808080; border-radius:3px; width:25px; text-align:center;}

.ic_con.mcolor{background:#fb0000;}
.ic_con.kcolor{background:#3b3e43;}
.ic_con.pcolor{background:#005bac;}

.info_ic{margin-bottom:10px;}
.info_ic li{font-size:0.9em; display:inline-block; margin-left:10px; vertical-align:middle}
.info_ic li .ic_con{width:20px; padding:1px 2px; font-size:0.8em}
.info_ic li span{margin-right:5px}


@media all and (min-width:768px) {
.move_table{overflow:visible}
.move_table table{min-width:auto}

}



/*가입서비스*/

.myservice .left{text-align:center; padding:20px 0px; border:1px solid #e6e6e6;  border-top:1px solid #005bac}
.myservice .left .tit_nm{font-size:1.3em}
.myservice  ul li{}

@media all and (min-width:768px) {
.myservice{overflow:hidden}
.myservice .left{width:32%; float:left; margin-right:3%; font-size:1.1em; padding:0; border:0px; text-align:left; padding-top:30px; border-top:1px solid #005bac}
.myservice .left .tit_nm{font-size:1.5em}
.myservice table{width:65%; float:left;}
.myservice .right{width:65%; float:left;}

}


/*팝업레이어*/
.popinfo{background:#ffffff;}
.popinfo h1{background:#005bac; color:#ffffff; font-size:1.2em; padding:15px; letter-spacing:-2px}

.popinfo .popcon{padding:20px;}

@media only screen and (min-width: 768px) {
.popinfo h1{font-size:1.4em;}
.popinfo .popcon{padding:30px;}
}

@media only screen and (min-width: 1200px) {
.popinfo h1{padding:20px;}
.popinfo .popcon{padding:40px;}

}


.jsplayer {
    position: fixed;
    width: 70%;
    left: 40%;
    margin-left: -25%; /* half of width */
    height: 550px;
    top: 50%;
    margin-top: -150px; /* half of height */
    overflow: auto;
	z-index:9999999999995;

    /* decoration */
    padding: 1em;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .jsplayer {
        width: 80%;
        margin-left: -40%;
    }
}