@import url('https://fonts.googleapis.com/css?family=Noto+Serif+KR:400,600&display=swap&subset=korean');


/*공통*/
.btn_sumit{background:#2361a0; color:#ffffff !important; border-color:#2361a0 !Important;}
a.btn_sumit{padding:0 0.786em; height:32px; line-height:32px; display:inline-block; font-size:0.9em}
.btn_sm{height:20px !important; line-height:20px !important; padding: 0 3px !important}/*작은버튼*/
.btn_nm{min-width:140px; background:#f0f0f0 !Important; color:#000000 !Important; border-color:#f0f0f0 !Important}/*이름버튼*/
.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:#2361a0}
.btn_view:before{text-indent:0; content:'\f002'; font-family:'FontAwesome'; font-size:15px; margin:0px 3px; font-weight:bold;  color:#2361a0}

.bgy{background-color:#fff5c9 !Important}
.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}
.grTxt{color:#0a8b00}
.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%;}

.fwb{font-weight:600}

/*로그인*/
body.bg11{background:#1d5a96; background:url(/img/main01.jpg) no-repeat center center;  background-size:cover; background-attachment:fixed; height:100%;}
body.bg0{background:#1d5a96; background:url(/img/main01.jpg) no-repeat center center;  background-size:cover; background-attachment:fixed; height:100%;}

body.bg11 h1{position:absolute; width:130px; left:3%; top:13px;}
.intro{position:relative; top:3%; padding-top:60px; text-align:center; color:#ffffff}
.intro h2 {margin-bottom:20px; font-size:2.2em;  letter-spacing:-0.04em; font-weight:600; line-height:1.2}
.intro h2 b{font-weight:800; display:inline-block; font-size:14px; letter-spacing:0; background:#d10000; color:#ffffff;  padding:3px 5px; margin-bottom:10px}
.intro p{font-size:1.1em; margin-bottom:30px;}

.login_box{width:93%; min-width:300px; min-height:320px;  margin:0 auto; background:#ffffff; border-radius:30px 30px 0 0; padding:30px 5%; position:absolute; bottom:0; left:0; right:0; top:0; margin-top:calc(3% + 240px); max-width:450px; z-index:10;
box-shadow:-webkit-box-shadow: 0px 0px 73px -18px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 73px -18px rgba(0,0,0,0.5);
box-shadow: 0px 0px 73px -18px rgba(0,0,0,0.5);
 animation-name:logmotion_up;animation-duration:1000ms;animation-fill-mode:both;animation-delay:200ms;animation-timing-fonction:ease-out;}
.login_box h3{font-size:1.9em; margin-bottom:20px; padding-bottom:15px; text-align:center; text-transform:uppercase; position:relative;}
.login_box h3:before{content:''; display:block; width:40px;margin-left:-20px; left:50%; position:absolute; bottom:0; height:4px; background:url(/img/line_bg.png) no-repeat; background-size:100%}
.login_top, .login_bottom{max-width:500px; margin: 0 auto;}
.login_top .btn_sumit{height:49px; line-height:49px; font-size:1em; width:100%}
.login_top  .input_txt li input{width:100%}
.login_top  li{margin-bottom:10px;}
.login_top .rem{line-height:60px; height:60px;}

.login_bottom{overflow:hidden; border-top:1px solid #808080;}
.login_bottom li{display:inline-block; }
.login_bottom li:first-child{margin-right:20px}
.login_bottom li a{line-height:50px; height:50px; display:block}
.login_bottom li a:before{font-family:'FontAwesome'; content:'\f061'; margin-right:10px; display:inline-block; font-size:0.85em}
.log_foot{position:absolute; bottom:5%; width:100%;  font-size:0.8em; color:#ffffff; left:3%; display:none}
@media all and (min-width:768px) {
body.bg11 h1{top:5%;}
.intro{width:50%; text-align:left; position:absolute; padding:0 3%; top:30%; font-size:1.3em}
.login{position:absolute; top:33%; width:75%; left:0; right:0; margin:auto}
.login_box{width:40%; left:auto;  margin:0 auto; top:0%; border-radius:0; animation-name:logmotion_right;animation-duration:1000ms;animation-fill-mode:both;animation-delay:200ms;animation-timing-fonction:ease-out;}
.intro h2{ font-size:2.5em; margin-bottom:30px;}
.intro h2 b{margin-bottom:30px;}
.log_foot{display:block}
}

@media all and (min-width:1024px) {
body.bg11 h1{width:160px; }
.login_box p.tac{margin-bottom:40px;}
.login_box h3{text-align:left; font-size:2.2em}
.login_box h3:before{left:0; margin-left:0}
.intro h2{ font-size:2.8em;}
}

@media all and (min-width:1200px) {
.intro h2{ font-size:3.2em; margin-bottom:40px;}

}


@keyframes logmotion_right { 0%   {right: -100px; opacity: 0;}   100% {right: 0; opacity: 1;}}
@-webkit-keyframes logmotion { 0%   {right: -100px; opacity: 0;}   100% {right: 0; opacity: 1;}}

@keyframes logmotion_up { 0%   {bottom: -50px; opacity: 0;}   100% {bottom: 0; opacity: 1;}}
@-webkit-keyframes logmotion_up { 0%   {bottom: -50px; opacity: 0;}   100% {bottom: 0; opacity: 1;}}


/*테이블양식*/
.bgtab{padding:10px 5px; color:#ffffff; background:#2361a0; font-weight:600;}
.bg_bright{background:#2361a0 !important}
.bgtab2{background:#45659a}
.form_box{margin:0 auto;}
.form_box ul{overflow:hidden; border-top:1px solid #2361a0; background:#ffffff}
.form_box li{overflow:hidden; border-bottom:1px solid #e6e6e6; position:relative;}
.form_box li .fm_list{padding:10px 5px; display:block; background:#f5f5f8; background:rgba(245,245,248,0.6); border-bottom:1px solid #e6e6e6; position:relative; color:#2361a0; font-weight:500}
.form_box li .fm_txt{display:block; padding:7px 5px;}

.form_box li.long{width:100%;}
.form_box li .dpi{line-height:32px;}

.form_box li .fm_txt input{width:100%}
.form_box li .fm_txt.inputauto input{width:auto !important}
.form_box li .fm_txt input.w80{width:80%}
.form_box li .fm_txt input.w70{width:70%}
.form_box li .fm_txt input.w60{width:60%}
.form_box li .fm_txt input.w50{width:50%}
.form_box li .fm_txt input.w40{width:40%}
.form_box li .fm_txt input.w30{width:30%}

.s_font{line-height: 23px;margin-top: 10px;}

.form_box li .fm_txt select.sel{width:100%;}

.form_box li .fm_txt input.auto{width:auto;}
.form_box li .inauto input{width:auto}

.form_box span.sp_txt{ display:inline-block; vertical-align:top; line-height:32px;}
.form_box .select_date{font-weight:700; font-size:1.1em}

textarea.wt_txt{height:15em}

.form_box ul.inn_li{border-top:1px solid #dcdcdc;}

@media all and (min-width:768px) {
.bgtab{padding:13px 10px; }
.form_box li:before{ background:#f5f5f8; background:rgba(245,245,248,0.6); content:''; position:absolute; height:100%; width:25%; max-width:190px; z-index:0; left:0; top:0;}
.form_box li .fm_list{float:left; width:25%; max-width:190px; }
.form_box li .fm_txt{width:75%; min-width:calc(100% - 190px); float:right;}
.form_box li .fm_list, .form_box li .fm_txt{font-size:1em;}

.form_box li .fm_list{line-height:32px; width:25%; max-width:190px; padding:5px 13px; border-bottom:0; background:none; font-weight:normal}
.form_box li .fm_txt{line-height:32px;}

.form_box span.sp_txt{line-height:32px; margin:0 5px;}
.form_box li .fm_txt select.sel{width:auto;}
.form_box li .fm_txt select{width:auto}
.form_box li .fm_txt input{width:auto !important}
.form_box li .fm_txt button{width:auto !important}

.tablet_half li{width:50%; float:left;}
.tablet_half li.low_li{min-height:80px;}
.tablet_half li .fm_list{width:35%}
.tablet_half li .fm_txt{width:65%}
.tablet_half li:before{width:35%}

.tablet_half_s li{width:50%; float:left;}
.tablet_half_s li .fm_list{width:25%}
.tablet_half_s li .fm_txt{width:75%}
.tablet_half_s li:before{width:25%}

.tablet_half_s li.long .fm_list{width:12.5%;}
.tablet_half_s li.long:before{width:12.5%}
.tablet_half_s li.long .fm_txt{width:87.5%}

.form_box li.long{width:100%;}
.form_box li.long .fm_list{width:17.5%}
.form_box li.long .fm_txt{width:82.5%}
.form_box li.long:before{width:17.5%;}

.form_box ul.inn_li li{width:100%; float:none;}
.form_box ul.inn_li li:before{width:100%;}
.form_box ul.inn_li li .fm_list{width:100%;}
.form_box ul.inn_li li .fm_txt{width:100%;}

.long_txt ul li .fm_list{max-width:270px; width:50%; float:left;}
.long_txt ul li .fm_txt{width:50% !Important; float:left; min-width:calc(100% - 270px)}
.long_txt li::before{width:50%; max-width:270px}
.long_txt li.long .fm_list{width:50%; float:left;}
.long_txt li.long::before{width:50%}

/*도선신청서표*/
.write_app li .fm_list{width:35%; max-width:370px; }
.write_app li:before{width:35%; max-width:370px}
.write_app li .fm_txt{width:65%; min-width:calc(100% - 370px); float:right;}


}

@media all and (min-width:1200px) {
.pc_col03 li{width:33.33%;}
.long_txt ul li{width:50%; float:left;}

}

@media all and (min-width:1400px) {
.pc_col04 ul{display:flex; flex-wrap:wrap}
.pc_col04 li{width:25%;}
.pc_col04 li .fm_list{width:47%}
.pc_col04 li .fm_txt{width:53%}
.pc_col04 li:before{width:47%}
}

/*공통테이블*/
.move_table0{overflow-x:scroll;}
.move_table{overflow-x:scroll;}
.move_table2{overflow-x:scroll}
.move_table3{overflow-x:scroll}
.move_table0 table{min-width:768px;}
.move_table table{min-width:1024px;}
.move_table2 table{min-width:1600px;}
.move_table3 table{min-width:1860px;}

.ht_table{overflow:scroll; height:600px;}
.comm_table{width:100%; border-top:1px solid #3c605c; border-collapse:collapse; border-right:1px solid #e6e6e6}

/*.comm_table{width:100%; border-top:1px solid #e6e6e6; border-collapse:collapse; border-right:1px solid #e6e6e6}*/
.comm_table th{padding:10px 5px}
.comm_table th, .comm_table td{border-bottom:1px solid #e6e6e6; border-left:1px solid #e6e6e6; padding:7px 5px; vertical-align:middle}
.comm_table .bl, .comm_table tr.bl td, .comm_table tr.bl th{border-left:1px solid #e6e6e6}
.comm_table tr:hover td{background:#f5f5fa}

/*.comm_table tr.bl td:first-child, .comm_table tr.bl th:first-child{border-left:0px;}*/
.comm_table .bli{border-left:1px solid #e6e6e6 !important}
.comm_table th{font-weight:500; background:#45659a; color:#ffffff; border-color:#5c7b78 !important; padding:7px 5px;}
/*.comm_table th{font-weight:500; background:#cad7e3; border-color:#bbcbd9 !important; padding:12px 5px;}*/
.comm_table .bgc2{background:#cad7e3; border-color:#bbcbd9 !important; color:#323232;}
.comm_table .bgc{background:#f5f5f8; background:rgba(245,245,248,0.6)}
.comm_table tr.bgc th, .comm_table tr.bgc td{ background:#f5f5f8; background:rgba(245,245,248,0.6)}
.comm_table .tal{text-align:left;}

.bd_table{border-right:1px solid #e6e6e6}
.bd_table th, .bd_table td{border-left:1px solid #e6e6e6}
.b_ta {width: 50px; text-align:center;}

.sel_table tr:hover td{background:#f5f5fa}
.tug_table th{font-size:11px;}
.tug_table td{font-size:11px;}
@media all and (min-width:768px) {
.move_table0{overflow-x:hidden;}
.comm_table td{padding:5px 3px;}
}

@media all and (min-width:1200px) {
.crewWrap .comm_table{font-size:0.95em}
.tug_table td{font-size:12px;}
}

@media all and (min-width:1600px) {
.move_table{overflow-x:hidden}
.move_table2{overflow-x:hidden}
}

@media all and (min-width:2000px) {
.move_table3{overflow-x:hidden}
}

/*확인취소 큰버튼*/
.ok_btn{text-align:center;}
.ok_btn ul li{display:inline-block; vertical-align:top;}
.ok_btn ul li button{background:#2361a0; color:#ffffff; padding:0px 30px; font-size:1em; border:1px solid #2361a0 !important; height:49px}
.ok_btn ul li a{padding:15px 30px; background:#505050; color:#ffffff; border:1px solid #505050; line-height:1.333; height:49px; display:block;}

/*확인취소 작은버튼*/
.sm_btn_li{text-align:center;}
.sm_btn_li li{display:inline-block; vertical-align:middle}
.sm_btn_li li a{font-size:0.95em; display:inline-block; vertical-align:middle}


/*레이어팝업 검색*/
.shorbox{max-width:400px; margin: 0 auto;}
.serchbox h2{font-size:1.3em; font-weight:500; padding-bottom:20px; margin-bottom:20px; position:relative;}
.serchbox h2:after{position:absolute; content:''; width:6%; height:2px; background:#1d5a96; left:3%; bottom:0;}
.serchbox h2:before{position:absolute; content:''; width:3%; height:2px; background:#d10000; left:0; bottom:0;}

.srbox{border:1px solid #e6e6e6; padding:30px; background:#f5f5f8}
.srbox .input_txt{width:100%;}
.srbox .btn_srch{position:absolute; right:0; top:0;}
.wbox{width:100%; overflow:hidden; position:relative;}


/*대리점등록*/
@media all and (min-width:768px) {
.agency_data li{width:50%; float:left;}


.agency_data li .fm_list{width:35%;}
.agency_data li:before{width:35%;}
.agency_data li .fm_txt{width:65%}
.agency_data li .fm_txt input{width:inherit !Important}


}

@media all and (min-width:1170px) {
.agency_data li .fm_txt input{width:auto !Important}
}


/*약관*/
.ex_top{padding:3%; border:1px solid #e6e6e6}
.provisionBox h4{font-weight:bold; font-size:1.2e; color:#323232}
.provisionBox h5{font-weight:bold; font-size:1.1em; color:#323232}
.provisionBox h6{font-weight:bold}


/*프린트*/
.printArea{border:1px solid #969696; padding:30px 20px; margin:30px; width:700px; min-height:950px; margin:0 auto; color:#000000; font-size:13px; font-family: 'Noto Serif KR', serif !important;}
.printArea span.name{display:inline-block; border-bottom:1px solid #505050; font-weight:600}
.bdbox_top{border-top:2px dashed #505050; padding-top:20px;}

.printArea .sign{margin-left:80%; min-height:70px; text-align:center;}
.printArea .sign span{font-size:12px; font-weight:bold; display:block; border-top:1px solid #505050; padding-top:5px;}

.printArea .col-02{width:47%; margin:0 1.5%; float:left;}
.printArea .col-03{width:30.33%; margin:0 1.5%; float:left;}

.printArea h1{display:inline-block; text-decoration:underline;margin:0 auto; font-size:24px;  margin-bottom:10px; text-transform:uppercase}
.printArea h2{display:inline-block; text-decoration:underline;margin:0 auto; font-size:18px !Important;  margin-bottom:10px !important; text-transform:uppercase; padding-bottom:0 !important;}
.printArea h2:before,
.printArea h2:after{display:none}
.printArea h1 span{display:block; font-size:15px; margin:0 auto; text-align:center;}
.dpin_li li{display:inline-block; width:23%; padding-bottom:3px; margin-bottom:2px;}
.contact{margin-bottom:20px;}
.contact li{vertical-align:top; overflow:hidden; border-bottom:1px solid #c8c8c8; line-height:20px}
.contact li b{margin-right:10px}
.contact li.left{width:68%; float:left; clear:both; margin-right:2%;}
.contact li.right{width:30%; float:left;}
.contact li.right b{display:inline-block; width:30px}

.bill_table{width:100%; border-top:2px solid #323232; border-collapse:collapse;  border-right:1px solid #505050; margin-bottom:20px;}
.bill_table th{font-weight:600}
.bill_table th, .bill_table td{border-bottom:1px solid #505050; padding:5px 10px; vertical-align:middle; border-left:1px solid #505050}



.bill_price{font-size:0.95em}
.bill_price tbody td{border:0;}
.bill_price tbody td:first-child{border-left:1px solid #505050}
.bill_price tbody td:nth-child(2){font-weight:normal}
.bill_price tfoot tr:first-child td{border-top:1px solid #505050}

.detail_table{width:100%; border-collapse:collapse; margin-bottom:20px; font-size:0.9em}
.detail_table th{font-weight:600; border-bottom:1px solid #323232; text-align:center !important}
.detail_table th, .detail_table td{ padding:5px 3px; vertical-align:middle;}


.printArea .middle h2{text-align:center; margin-bottom:5px; font-size:18px;}
.printArea .middle {margin-bottom:10px;}

.udline{text-decoration:underline;}

.detail_box{min-height:460px;}
.remark{border:1px solid #505050; padding:10px 15px; margin-bottom:10px;}
.printArea p.price span{display:inline-block; width:200px; border-bottom:1px solid #505050; text-align:left; font-weight:600}
.printArea .total ul{margin-left:40%; text-align:right;}
.printArea .total ul li{margin-bottom:3px}
.printArea .total ul b{display:inline-block; min-width:150px; border-bottom:1px solid #505050}
.printArea .total .signbox img{max-width:200px;}

.printArea .bottom{margin-top:10px; overflow:hidden}
.printArea .bottom .half{width:50%; float:left;}
.printArea .bottom .mark{text-align:right;}
.printArea .bottom .mark b{font-size:12px; text-decoration:underline; display:block; margin-top:5px;}
.printArea .bottom img{max-width:200px;}

.printArea .bottom .left{width:50%; float:left; margin-top:30px;}
.printArea .bottom .left li span{display:inline-block;}
.printArea .bottom .right{width:50%; float:right; text-align:right;}
.printArea .bottom .right b{font-size:18px; display:inline-block; vertical-align:bottom; }
.printArea .bottom .right img{display:inline-block; vertical-align:bottom; max-width:55px;}
.printArea .bottom .right li .udline{border-bottom:1px solid #505050; padding-bottom:5px; margin-bottom:5px; display:inline-block}

.printArea .bottom .right li.ttu{text-transform:uppercase}

.btn_print{text-align:center;}
.btn_print a{display:inline-block; padding:5px 20px; border-radius:10px; background:#00548f; color:#ffffff; cursor:pointer}

body.printview .printArea{padding:0; border:0;}

/*부가가치세확인원*/
.fsb{font-size:1.3em}
.pdtxt{padding:40px 0; font-size:1.1em}
.dotline{padding:40px 0px; position:relative; font-size:1.1em}
.dotline span{background:#ffffff; position:relative; display:inline-block; padding:0 20px;  }
.dotline:before{content:''; display:block; width:100%; height:1px; border-bottom:1px dashed #c8c8c8; position:absolute; top:0; bottom:0; margin:auto}
.photo_remark{border:1px solid #505050; padding:50px 15px 15px; margin-bottom:10px; position:relative;}
.photo_remark .stamp{position:relative; right:10px; bottom:10px; display:block; text-align:right;}
.photo_remark .stamp img{max-width:90px;}
.photo_remark p{position:relative; z-index:2;}



/*메인화면 도선료 연동*/
#tug_price .tit{background:#e8e8ee; color:#45659a}

#tug_price .form_box li .fm_list{color:#323232}
#tug_price .form_box li{border-bottom:0;}
/*#tug_price .tit{margin-bottom:10px;}*/
#tug_price .form_box ul{border-top:0px solid #e6e6e6}
#tug_price .pc_col04 ul{border-top:0px;}
#tug_price .form_box li .etc_charge{width:100%}
#tug_price .form_box li #g_surcharge_etc_price{width:100%}
@media all and (min-width:1170px) {
#tug_price .pc_col03 .c03{width:33.33% !important}
#tug_price .pc_col03 .c03 .fm_list{width:35% !important}
#tug_price .pc_col03 .c03 .fm_txt{width:65% !important}
#tug_price .pc_col03  li.c03:before{width:35% !important}

#tug_price .pc_col04.form_box li .fm_txt input{width:140px !important}
#tug_price .form_box li #g_surcharge_etc_price{width:140px}
#tug_price {font-size:0.95em}
}


/*의견수렴*/
.info_list  h5{font-size:1.1em}

/*190820추가*/
.dplist div.col-03 span{display:inline-block; vertical-align:top; padding-right:5px}
.dplist div.col-03 input{display:inline-block; vertical-align:top;}


/*250729*/
.pilot_text{width:100%; }
.pilot_text th{width:35px; text-align:left;}
.pilot_text td{width:10px; font-size:0.75em; text-align:center;}

@media all and (min-width:500px) {
.pilot_text th{width:30px;}
.pilot_text td{font-size:0.9em}
}

@media all and (min-width:550px) {
.pilot_text th{width:26px;}
.pilot_text td{font-size:1em;}
}

@media all and (min-width:768px) {
.pilot_text{width:550px;}
}

@media all and (min-width:850px) {
.pilot_text{width:600px;}
}

@media all and (min-width:1200px) {
 .pilot_text{width:900px;}
.pilot_text th{width:90px;}
.pilot_text td{width:40px;display: inline-block;position: relative;}
  .pilot_text tr.first td:after{display:block; content:''; background: #ddd; width:5px; right:-5px; height:2px; position: absolute; bottom:46%;}
  .pilot_text tr.first td:last-child:after{display:none}
}