@import url("https://code.jquery.com/ui/1.11.4/themes/pepper-grinder/jquery-ui.css");

@font-face {
     font-family: 'S-CoreDream-4Regular';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream-5Medium';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream-6Bold';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream-7ExtraBold';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}

/*** reset ***/

html {
    -webkit-text-size-adjust: none;
    min-width:1200px;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
}

html,
body {
    width: 100vw;
    font-size: 14px;
    color: #353535;
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1.6;
    padding:0; margin:0;
    position:relative
}

html,
body,
div,
ul,
ol,
li,
dl,
dt,
dd,
p,
strong,
span,
em,
a,
table,
th,
td,
caption,
input,
button,
textarea,
label,
form,
legend,
fieldset,
select,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
img {
    padding: 0;
    margin: 0;
    border: 0;
    color: inherit;
    background: none;
    line-height: inherit;
    font-size: inherit;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

th,
td {
    vertical-align: middle
}


/*input {-webkit-appearance:none; border-radius:0}*/

select,
button {
    cursor: pointer
}

ul,
ol {
    list-style: none;
    text-decoration: none
}
img {
    max-width: 100%;
    vertical-align: top;
}

a {
    color: inherit;
    text-decoration: none
}

em {
    font-style: normal
}

strong {
    font-weight: 600
}

* {letter-spacing:0;
  font-family: 'S-CoreDream-4Regular';
  text-decoration: none;
  outline:none;
  list-style: none;
  -webkit-font-smoothing: antialiased
}
strong, h1, h2, h3, h4, h5, h6{font-family: 'S-CoreDream-5Medium'}

button,
button:hover,
button:focus,
a, .btn, button{outline:none !important}
.btn{outline:none !important}
#btn-login,
#btn-login:hover,
#btn-login:focus{outline:none !important}

/*** common ***/
html {width: 100%; min-width: 1024px; margin: 0 auto; overflow:auto}
body { position: relative; width:100%; margin: 0 auto;}
#container{position:relative; width:100%; margin:0; padding:0;}

.btnH30{height:30px; line-height:25px; margin-top:-3px; vertical-align: middle}
.border-orange{border:1px solid #FFB33F;}
.bg-primary{background-color:#0071BC;}
.bg-primary2{background-color:#0071BC;}
.bg-orange{background-color:#FFB33F;}
.bg-red{background-color:#ef5c5c;}
.bg-green{background-color:#24B056;}
.bg-skyblue{background-color:#60b5d8}
.bg-whitgray{background-color:#bbb}

.text-green{color:#24B056;}

.text-red,
.text-red:hover,
.text-red:active,
.text-red:focus{color:#ff3333;}
.text-primary,
.text-primary:hover,
.text-primary:active,
.text-primary:focus{color:#0071BC !important}
.text-primary2{color:#0071BC !important}
.text-orange{color:#FFB33F; }
.text-orange2{color:#fbb714;}
.text-white,
.text-white:hover,
.text-white:active,
.text-white:focus,
.bg-primary:hover,
.bg-primary:active,
.bg-primary:focus{color:white !important}
.text-blue,
.text-blue:hover,
.text-blue:active,
.text-blue:focus{color: #007aff;}
.border-primary{border:2px solid #0071BC !important; background-color:#fff !important}
.border-primary2{border:2px solid #0071BC !important; background-color:#fff !important}
.border-orange{border:2px solid #FFB33F; background-color:#fff}
.border-orange2{border:2px solid #fbb714; background-color:#fff}
.border-red{border:2px solid #ef5c5c; background-color:#fff}
.bg-464646{background-color:#464646;}
.bg-333{background-color:#333;}

.btn_link{font-weight:bold;border-bottom:1px solid transparent !important; }
.btn_link:hover,
.btn_link:focus,
.btn_link:active{border-bottom:1px solid !important; color:#222}

.text-grey{color:#666}
.bg-grey{background-color:#666;}

#delbtn,
.btn-red,
.bg-red{background: #ED5247;color: #fff;}
.pointRed{color:#0071BC !important; }
.ls0{letter-spacing:0 !important}
.italic{font-style:italic !important;}





.t_overflow{
text-overflow:ellipsis;
white-space:nowrap;
word-wrap:normal;
overflow:hidden;
}

.lock { background-color: #EEEEEE;}
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }

.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb15 { margin-bottom: 15px; }
.mb0{margin-bottom:0 !important}
.pb0{padding-bottom:0 !important}
.bb0{border-bottom:0 !important}
.ml-15{margin-left:-15px;}

.close{text-shadow:none; font-weight:normal}
.close,
.close3{  width: 13px; height: 13px; display:inline-block;float: right; opacity: 1;}
.close2 { float: right; width: 13px; height: 13px; opacity: 1;}
.popup .close{position:absolute; width:15px; height:15px;top: 0;right: 20px;bottom: 0; margin: auto;}
.close img{max-width:100%;}
.no-img{width:105px; display:block; margin:0 auto;align-items: center}

.rangeslider{}
.control-label{ float:left;}
.input_box .irs--flat .irs-handle.from > i:first-child,
.input_box .irs--flat .irs-handle.to > i:first-child{display:inline-block; width:16px; height:16px; border-radius:20px;background-color: #0071bc;}
.input_box .irs--flat .irs-handle.from > i:first-child{left:0}
.input_box .irs--flat .irs-handle.to > i:first-child{right:0; left: auto;}
.input_box .irs--flat .irs-handle.state_hover > i:first-child,
.input_box .irs--flat .irs-handle:hover > i:first-child {background-color: #03609e}
.input_box .irs--flat .irs-bar {background-color: #0071bc}
.input_box .irs--flat .irs-from,
.input_box .irs--flat .irs-from, .input_box .irs--flat .irs-to{background-color:#666}
.input_box .irs--flat .irs-from:before, .input_box .irs--flat .irs-to:before, .input_box .irs--flat .irs-single:before{border-top-color:#666}
.input_box .irs--flat .irs-single:before{border-top-color:#ed5565}
.input_box .irs--flat .irs-line,
.input_box .irs--flat .irs-bar{height:6px;}
.input_box .irs--flat .irs-handle{top:20px;}
.input_box .irs--flat.irs-with-grid {
    height: 50px;
}

/*** table ***/
.table_wrap{    border: 1px solid #dfdfdf; height:500px;}
.table_area{}
table, table td, table th{text-align:center;}
table{border:1px solid #e5e5e5}
table thead {
    background-color:#f7f7f7;
    border-bottom:1px solid #eee;
    border-width: 2px 0
}
table thead th{color: #464646; border-right:1px solid #dfdfdf; padding:8px 0;font-size: 12px; background-color:#e9e9e9}
table thead th:last-child{border-right:0}
table tr{border-bottom:1px solid #e5e5e5}
tbody tr:nth-child(2n) td{background-color:#f8f8f8}
tbody tr td {
    font-size: 13px;
    padding: 5px 0;
    text-align: center;
}

table tr td input,
table tr td select{width:95%; margin:0 auto; height:30px}
th.text-left{padding-left:10px;}
td.text-left{padding-left:10px;}

body input{outline:none !important}
.tui-grid-cell{text-align:center !important}
.tui-grid-table-container .tui-grid-cell-content input{width:90%; display:block; padding:0 8px; margin:5px 0 0 9px;}
.tui-grid-cell-has-input .tui-grid-cell-content .select-wrap{    width: 85px;
    margin: 5px auto;
    margin-left: 5px;}
.tui-grid-cell-has-input .tui-grid-cell-content .select-wrap select{padding:0 8px; min-width:0;}
.tui-grid-table-container .tui-grid-cell-content .select-wrap:after{    right: 5px !important;     background-size: 12px 8px;}
.table_area .tui-pagination .tui-first-child.tui-is-selected {border-left: 1px solid #0071BC}
.table_area .tui-pagination .tui-last-child.tui-is-selected {border-right: 1px solid #0071BC}
.table_area .tui-page-inputs .tui-page-current {color: #0071BC}
.table_area .tui-pagination .tui-is-selected,
.tui-pagination strong {color: #fff; background: #0071BC; border-color: #0071BC; cursor: default;}
.table_area .tui-pagination .tui-is-selected:hover {background-color: #0071BC;}

/* table */
/* .table_style01, .table_style02{border-top:4px solid #0071BC}
.table_style01 tr{border-bottom:1px solid #E7EBE9;}
.table_style01 tr td{border-bottom:1px solid #E7EBE9; padding:10px 15px;  font-size:14px;}
.table_style01 tr td em{display:inline-block; width:3%; text-align:center;}
.table_style01 tbody tr:nth-child(2n) td{background-color:#fff}
.table_style01 tr th{width:180px; background-color:#FBFBFB; border-right:1px solid #E7EBE9; text-align:left; padding:5px 15px; vertical-align: top; font-size:14px;}
.input_style01{width:100%;}
.input_style02{width:calc(100% - 95px)}
.input_style03{width:30%;}
table tr td select.input_style03{width:30%;    height: 40px;    border: 1px solid #e5e5e5;} */



/* popup */
#popup_wrap{
width:100vw;
height:100vh;
pointer-events: none;
background-color:rgba(0, 0, 0, .6);
position:fixed;
left:0;
top:0;
display:none;
z-index:1000;

}
.popup {
  position: absolute;
  top: 25%;
  right: 0;
  left: 0;
  margin: auto;
  display: none;
  width: 328px;
  height: auto;
  background-color: #fff;
  text-align: center;
  box-sizing: border-box;
  z-index:9999;
  border-radius:4px;
  box-shadow:0 2px 2px rgba(0, 0, 0, .16);
  overflow:hidden
}
.popup_header{box-sizing:border-box; padding:10px 20px 0}
.popup_header h3{height: 100%; line-height:2.2; font-size:22px; font-weight:600; border-bottom:2px solid #454545; padding-bottom:8px}
.popup_header .close{top:24px; bottom:auto;}
.popup_content{padding:15px; text-align:left;}
.popup_content .form-group .title{    margin: 0;
    padding: 0;
    background-color: transparent;
    width: 80px;
    height: 40px;
    line-height: 40px;
    padding-top: 5px;}
.popup_content h5{font-size:16px; padding-bottom:5px; border-bottom:1px solid #454545; margin:10px auto 20px}
.popup_content .btn_submit{padding:10px 0 20px;}
.popup_content .btn_submit .btn{height:45px; line-height:42px;}
.popup_content:after{display:block; content:''; clear:both;}

.popup .message{padding-top:30px; padding-bottom:20px; font-weight:600; color:#222; font-size:18px; text-align:center;}
.popup .btn_wrap{ width:auto;padding:0 15px 15px 15px; clear:both;}
.popup .btn_wrap.col-md-12{    width: 100%;
    display: flex;
    padding: 15px;
    text-align: center;}
.popup .btn_wrap.col-md-12 .btn:last-child{margin:0}
.popup .btn_wrap:after{display:block; content:''; clear:both;}
.popup .btn_wrap.dev2 .btn{width:49% !important; margin-right:2%; display:inline-block; float:left !important}
.popup .btn_wrap .btn:last-child{margin-right:0}
.popup .btn{box-shadow:0 1px 1px rgba(0, 0, 0, .16)}

.popup2 .popup_header{padding:10px 15px 0}
.popup2 .popup_header h3 {
    height: 100%;
    border-bottom: 2px solid #454545;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
.popup2 .popup_header .close {
  top: 22px;
  bottom: auto;
}




/* login */
#login .cont_box{position:relative}
.loginBox{width:480px; margin:80px auto 0; position:relative; z-index:1}
.loginBox h3{font-size:30px; font-weight:bold; letter-spacing:1px; margin-bottom:20px;}
.loginBox h3 p{font-size:18px; color:#888}
.loginBox p.text-right{font-size:13px; margin:15px auto}
.btn_link2{display:inline-block; margin-left:5px; border-bottom:1px solid; font-weight:bold}
.find{border:1px solid #eee; margin-bottom:10px; height:50px; background-color:#fff}
.find label[for="id"]{width:24px; height:22px}
.find:after{display:block; content:''; clear:both;}
.find input{width:calc(100% - 40px); border:0; float:right; height:50px; line-height:50px;}
.find label{width:20px; height:auto; display:inline-block; margin-top:15px;}
.find label[for="pw"]{width:20px; height:22px; display:inline-block; margin-top:12px;}
.loginBox .login{width:100%; border:0; height:50px; line-height:50px;}
.login_bg{position:absolute; bottom:20px; right:20px;z-index:1; font-family: 'S-CoreDream-6Bold'; font-size:50px; color:#eee}
.btn_find_pw{font-weight: bold; font-size:13px;}
.login_bottom:after{display:block; content:''; clear:both;}

.find_popup{width:350px; height:auto; position:absolute; top:20%; left:0; right:0; margin:auto; padding:20px;}
.find_popup .message{padding:0 0 20px 0; color:#0071BC}
.find_popup .input_box{margin-bottom:15px;}
.find_popup .input_box:after{display:block; content:''; clear:both;}
.find_popup .input_box label{font-size:13px; font-weight:normal; padding:0; text-align:left; display:inline-block; line-height:40px;}
.find_popup .btn_wrap{padding:20px 0 10px; width:100%}
.find_popup .btn_wrap .btn{font-size:13px; display:inline-block; height:40px; width:49%; margin-right:2%;}
.find_popup .btn_wrap .btn:last-child{margin-right:0;}
.find_popup .btn_wrap .close{position:static; background-color:#fff; border-radius:4px; box-shadow:0 1px 1px rgba(0, 0, 0, .16)}

.find_info{display:none; border-top:1px dashed #e5e5e5;margin-top:15px;}
.find_info h5{line-height:1.3; padding:30px 0 20px}
.find_info .btn{padding:0 20px; width:auto; position:static; font-size:13px; font-weight:normal; margin:0 auto; float:none}
#find_id{}
  #login .table_style01 tr th{vertical-align: middle;}


/* header */
#header {
  width:100%;
  margin:0 auto;
  max-height:70px;
  position:absolute;
  padding-left:80px;
  top:0;
  left:0;
}

.header_inner{
  width:100%;
  height: 100%;
  padding:15px 30px 15px 20px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  text-align:left;
  z-index:1
}

.header_inner:after{display:block; content:''; clear:both;}
#logo{width:206px; text-align:center; display:inline-block; float:left; box-sizing:border-box; cursor:pointer; margin:0 auto}
#logo img{width:100%}
#logo3{display:none}

.gnb_menu{margin:0; display:inline-block;}
.gnb_menu:after{clear:both;}
.gnb_menu li{padding:0 40px; float:left; display:inline-block; text-align:left; line-height:40px; cursor:pointer; color:#fff; font-size:17px; font-weight:400; letter-spacing: -0.55pt}
.gnb_menu li a{ font-size:17px}
.gnb_menu li.active,
.gnb_menu li:hover{border-radius:50px; background-color:#0071BC}

.menu_right{float:right}
.menu_right a{font-size: 13px; margin-left:10px; padding-left:15px; position:relative;}
.menu_right a:before{display:block; content:''; width:1px; height:65%; background-color:#fff; opacity:.5; position:absolute; left:0; top:0; bottom:0; margin:auto;}
.menu_right a:nth-child(1):before, .menu_right a:nth-child(3):before{display:none}
.class{width:auto; height:25px; display:inline-block; margin-top:1px}

  /* mypage */
  #mypage .cont_box{position:relative;}
  #mypage .tabmenus{text-align:center}
  #mypage .tabmenus ul{box-shadow:none;  display:inline-block; width:auto}
  #mypage .tabmenus ul li{border-bottom:1px solid #ddd; width:186px; padding:0 30px; float:left}
  #mypage .tabmenus ul li.on{border-color:#0071BC}

  #mypage .tab .tab_inner{
      width: 480px;
      margin: 10px auto 0;
      position: relative;
      z-index: 1;
  }
  .tab_inner:after{display:block; content:''; clear:both}
  #mypage .tab .tab_inner h3 {
      font-size: 28px;
      font-weight: bold;
      letter-spacing: 1px;
      margin-bottom: 30px;
  }
  #mypage .tab .tab_inner .form-group{border-bottom:0; margin-bottom:5px;}
  #mypage .form-group .control-label{width:100%; text-align:left}
  .necessary{display:inline-block; margin:0 5px 0 0}
  .form-group .class_box.input_box{height: auto; padding: 0 0 10px 0; width:50%; display:inline-block; float:left}
  .class_box .class{height:30px}
  .class_box .due_date{display:inline-block; margin-left:10px; font-size:16px; vertical-align: middle;
      margin: 3px 0 0 10px;}
  #mypage .tab .tab_inner .btn_comp{height:50px; line-height:50px;}
  #mypage .tab03 .tab_inner p{font-size:24px; font-weight:500;    margin-bottom: 30px;}
  #mypage .tab03 .tab_inner p strong{display:block; font-weight:600}
  #mypage .tab03 .btn_wrap .btn{width:49%; margin-right:2%; float:left; height:50px; line-height:50px;}
  #mypage .tab03 .btn_wrap .btn:last-child{margin-right:0}

  /* join */
  #join .form-group{margin-bottom:0; border-bottom:0}
  .register_bottom li:last-child{padding-left:30px; font-size:13px;}
  .register_bottom li:last-child p{margin-bottom:5px}
  .register_bottom .checkbox_wrap{float:none}
  #join .btn_wrap .btn{width:49%; margin-right:2%; float:left; height:50px; line-height:50px;}
  #join .btn_wrap .btn:last-child{margin-right:0}

  /* leftmenu */
  #leftmenu{ position:absolute; top:0; left:0; width:80px; height:100%; z-index:1}
  #logo2{display:block; width:42px; height:42px; background-color:#fff; border-radius:4px; margin:15px auto 0}
  .sidebar-menu{margin:35px auto}
  .sidebar-menu li{text-align:center; padding:22px 0; cursor:pointer}
  .sidebar-menu li img{width:auto; height:22px;}
  .sidebar-menu li span{font-size:10px; display:block; margin-top:5px}
  .sidebar-menu li:hover,
  .sidebar-menu li.on{background-color:#047ccc}
  .btn_introduction a{display:inline-block; width:100%; height:100%}


  /* sidePopup */
  .sidePopup{width:1200px; height:90vh; background-color:#fff; top:0; bottom:0;}

  #introduction{    background-color: transparent;    width: 100%;    height: auto;    max-width: 1000px;    top: 10%;}
  #introduction .close{right:5px}
  #intro{width:1000px; height:563px;}

    /** price_list **/
    #pricing .cont_box{padding:40px;}
    .price_list{}
    .price_list li{width:100%; margin-right:30px; float:left; border-radius:10px; box-shadow: 0px 4px 5px #eee; text-align:center}
    .price_list li.basicC{background-color:#fdba12; }
    .price_list li.highC{background-color:#ffaa22; margin-right:0;margin-bottom:20px;}
    .price_list li dl:after{display:block; content:''; clear:both;}
    .price_list li dl{display:flex; height:190px;}
    .price_list li dt{padding:50px 15px; width:15%; position:relative;font-size:28px;font-family: 'S-CoreDream-6Bold';}
    .price_list li dt:before,
    .price_list li dt:after{display:block; content:''; width:20px; height:20px; position:absolute; left:0; right:0; margin:auto; background-image:url(../img/star.svg); background-repeat:no-repeat; background-size:20px;}
    .price_list li dt:before{top:10px}
    .price_list li dt:after{bottom:10px}
    .price_list li dd.membership_benefit{width:85%; height:100%; padding:8px}
    .price_list li dd > div{  float:left; height:100%; box-sizing: border-box}
    .price_list li dd .benefit_list{background-color:#fff; width:80%; padding:20px;}
    .price_list li dd P{ margin-bottom:7px; font-size:14px; width:33.333%; float:left; position:relative; padding-left:25px; text-align:left}
    .price_list li dd P:before{display:block; content:''; width:18px; height:18px; position:absolute; left:0; top:0; bottom:0; margin:auto; background-image:url(../img/check.svg)}
    .price_list li dd P.text-green:before{display:block; content:''; width:18px; height:18px; position:absolute; left:0; top:0; bottom:0; margin:auto; background-image:url(../img/plus_green.svg)}

    .price_list li dl dd .cost_per_year{padding:25px 15px 15px; width:20%; border-radius:0 10px 10px 0; position:relative; display:inline-block; z-index:2}
    .price_list li dl dd .cost_per_year:after{display:block; content:''; width:80px; height:80px; position:absolute; right:10px; bottom:10px; margin:auto; opacity:.25; background-image:url(../img/ship.svg); z-index:-1}
    .price_list li dt h6{font-size:32px; margin-top:5px; background-color:#fff; padding:2px 10px;font-family: 'S-CoreDream-6Bold'; display:inline-block; padding: 0 10px;}

    .price_list li dl dd .cost_per_year h3{color:#fff; font-size:38px;font-family: 'S-CoreDream-6Bold'; text-align:left; display:inline-block;}
    .price_list li dl dd .cost_per_year h3 label{color:#fff; font-size:20px;font-family: 'S-CoreDream-6Bold'; display:block;text-align:right;}
/*
.price_list li.highC dl dd .cost_per_year{background-color:#FFAA22}
.price_list li.basicC dl dd .cost_per_year{background-color:#FFAA22}
.price_list li.highC dt h6{color:#FFD400;}
.price_list li.basicC dt h6 {color:#FF8D27}*/

    .price_list li.basicC dt h6{color:#fdba12;}
    .price_list li.highC dt h6 {color:#ff8d27}

    .price_list li.highC dd P:last-child{border-bottom:0; font-size: 24px; padding-bottom:0; margin-bottom:0; margin-top:5px; font-weight:bold}
    .price_list li.basicC dd p:last-child{margin-bottom:0; padding-bottom:0; border-bottom:0}
    .price_list li.highC dd P:last-child img{display:block; width:16px; margin:15px auto 10px}

    .pay_info{text-align:left; color:#888; font-size:13px; line-height:1.8;     padding: 10px 0; margin:0 auto;}
    .buynow{margin-top:20px;}
    .buynow ul:after{display:block; content:''; clear:both;}
    .buynow ul li{
      width: 24.25%;
      margin-right:1%;
      float: left;
      background-color: #fff;
      border-radius: 6px;
      box-sizing: border-box;
      overflow: hidden;
      position:relative;
      box-shadow:0 1px 3px #ddd;
      height:140px;
      border:1px solid #e5e5e5
    }

    .buynow ul{ margin:0 auto;}
    .buynow ul li:last-child{margin-right:0;}
    .buynow ul li div{position:relative; padding:26px 0 45px;}
    .buynow ul li strong{display:inline-block; padding:15px 0 0; font-size:18px; font-weight:normal;}
    .buynow ul li p{font-weight:500; color:#888; font-size:13px; padding-bottom:5px;}
    .buynow ul li .btn_buy{opacity:0; display:inline-block; font-size:14px; height:35px; line-height:30px; position:absolute; bottom:0; left:0; right:0; margin:30px auto 0; width:120px; border-radius:30px}


    .buynow ul li div h3{font-size:24px;}
    .buynow ul li div h3 label{font-size:16px; display:inline-block; padding-left:10px;}
    .buynow ul li div h3 em{font-size:18px; display:block;}
    .buynow ul li:hover .btn_buy{opacity: 1; transition: all 1s ;}
    .buynow ul li:hover > div{ transform: translate3d(0px, -30px, 0px); transition: all 1s }
    .buynow ul li:hover div p{opacity: 0; transition: all 1s}
    .buynow ul li:hover > div span{opacity:1; transition: opacity 1s}


    /* portcalculator */
    #portcalculator .title_box .select_wrap{padding-left:10px;}
    #portcalculator .title_box .select_wrap select{background-color:#fff; color:#333; width:250px;}
    #portcalculator table td{background-color:#fff; font-size:13px; padding-right:15px;}
    #portcalculator table td input,
    #portcalculator table td select{height:30px;}
    #portcalculator table td input[type="checkbox"],
    #portcalculator table td input[type="radio"]{height:auto;}
    #portcalculator table th{background-color:#f8f8f8; font-size:14px;}
    #portcalculator table th em{font-size:13px; color:#666; font-weight:normal; display:block;}
    #portcalculator .charge_list{margin-top:20px}
    #portcalculator .charge_list > ul > li{margin-bottom:20px}
    #portcalculator .charge_list > ul > li h5{width:100%; height:45px; line-height:45px; padding:; box-sizing:border-box;border-bottom: 2px solid #333;
    box-sizing: border-box;
    font-size: 20px; }

    #portcalculator .charge_list > ul > li h5:after{display:block; content:''; clear:both;}
    #portcalculator .charge_list > ul > li h5 strong{display:inline-block; width:40%; height: calc(100% - 1px); float:left; text-align:left; padding-left:5px; font-weight:normal}
    #portcalculator .charge_list > ul > li h5 span{width:60%; text-align:right; display:inline-block;font-size:14px; padding-right:30px;}
    #portcalculator .charge_list > ul > li .in_area{padding:20px;}
    #portcalculator .charge_list > ul > li .in_area h4{padding-bottom:10px; text-align:left; font-size:17px; color:#0071BC}
    #portcalculator .charge_list > ul > li .in_area:nth-child(2){border-top:1px solid #eee}

    input[type="radio"]:before, .radio input[type="radio"]:before, .radio-inline input[type="radio"]:before,
    input[type="radio"]:after, .radio input[type="radio"]:after, .radio-inline input[type="radio"]:after{top:0}
    input[type=checkbox], input[type=radio] {
        box-sizing: border-box;
        padding: 0;
        display: inline-block;
        width: 18px;
        height: 18px;
        margin: 0;
    }

    .get_editor{}
    .get_editor ul li{margin-bottom:10px; padding-bottom:2px; border-bottom:1px solid transparent}
    .get_editor ul li:last-child{margin-bottom:0; border-bottom:0;}
    .get_editor ul li:hover{border-bottom:1px solid #ddd}
    .get_editor ul li label{border:0; text-align:left; font-size:13px; display:block; position:relative;}
    .get_editor ul li label strong{float:right;}
    .get_editor ul li label strong input[type="radio"]{width:18px; height:18px; margin:0 0 0 10px}

    .get_editor ul.dev2{}
    .get_editor ul.dev2 li{width:48%; margin-right:4%; float:left;}
    .get_editor ul.dev2 li:nth-child(2n){margin-right:0;}
    .table03 .addcharge ul li:last-child,
    .table05 .addcharge ul li:last-child{color:#bbb; font-size:12px;}
    #portcalculator .table04 td{padding-right:0}
    .addcharge{padding-right:15px;}
    td .addcharge{padding-right:0}
    .addcharge ul li{padding-left:15px; margin-bottom:10px}
    .addcharge ul li:last-child{margin-bottom:0}
    .addcharge ul li strong{float:right;}
    .table05 td{text-align:left; padding-left:20px; position:relative;}
    .table05 td input[type="checkbox"]{width:18px; height:18px; float:right;}
    .table05 td .select_wrap{width:80px; display:inline-block; border:1px solid #e5e5e5; height:30px; position:absolute; top:0; right:0; bottom:0; margin:auto;}
    .table05 td:nth-child(2){border-right:1px solid #e5e5e5}
    .table05 .addcharge ul li{padding-left:0}
    td.addcharge > strong{display:block; padding-bottom:5px; color:#0071BC; font-size:16px}
    #portcalculator .charge_list > ul > li h5 .table06{width:80%; float:right}
    #portcalculator .charge_list > ul > li h5 .table06 tr:nth-child(1) th:nth-child(1){border-right:1px solid #e5e5e5}
    #portcalculator .charge_list > ul > li h5 .table06 tr, #portcalculator .charge_list > ul > li h5 .table06 td{padding:0; height:30px; line-height:34px;}
    #portcalculator .charge_list > ul > li h5 .table06 td strong{display:inline-block; padding-right:20px; width:100%; text-align:right; background-color:#fff; height:30px; line-height:30px;}
    #portcalculator .table07 tr:nth-child(1) td.table_wrap{padding:15px; height:auto; border:0;}
    #portcalculator table.table08 tr:hover,
    #portcalculator table.table08 tr:hover td{background-color:#fff6f8}
    #portcalculator table .table08 td{font-size:12px; padding:0;}
    #portcalculator table .table08 th{font-size:12px}
    #portcalculator table .table08 td .radio_wrap{line-height: 30px;
    height: 30px;
    padding-top: 7px; float:none}
    #portcalculator table .table08 td .radio_wrap input{margin-top:0; float:none;}
    .table_dev2 thead th{text-align:right;}
    .table_dev2 thead th strong {
          float: left
      }
      #chk_line_tractor:after{margin-right:0}
    .table_dev2 thead th input,
    .table11 .table_dev2 tr:last-child th input{background-color:#fff; width:50%; margin-right:15px; padding-right:15px; text-align:right}
    .table_dev2 th{text-align:left; padding-left:10px;}
    .table_dev2 tbody td{text-align:right; padding:15px;}

    #portcalculator .table_dev3 tbody td{text-align:right; padding:10px 15px 10px 10px;}
    #portcalculator .table_dev3 tbody td input[type="text"]{width:70%}
    #portcalculator .table_dev3 tbody td input[type="text"].calc_result{text-align:right; padding-right:15px;}
    #portcalculator .table_dev3 tbody td label input[type="radio"]{margin-top:2px;}
    #portcalculator .table_dev3 tbody td:last-child{padding-left:15px; border-left:1px solid #e5e5e5}
    #portcalculator .table_dev3 tbody td label{float:left;margin-top:7px;}
    #portcalculator .table_dev3 tbody tr:nth-child(3){border-bottom:1px solid #c5c5c5}


    .tuggage_radio{margin-right:10px !important}
    .tuggage_cost ul li:after,
    .tuggage_cost ul:after,
    .get_editor:after{display:block; content:''; clear:both;}
    .tuggage_cost ul{width:32%; margin-right:2%; float:left; border:1px solid #e5e5e5}
    .tuggage_cost ul:last-child{margin-right:0;}
    .tuggage_cost ul li{border-bottom:1px dashed #e5e5e5;    margin-bottom: 0;
    padding: 5px 0;}
    .tuggage_cost ul li > div{width:50%; float:left; text-align:center; font-size:13px;}
    .tuggage_cost ul li:nth-child(1){background-color:#0071BC; padding:8px 0; color:#fff; border:0;}
    .tuggage_cost ul li:nth-child(1):hover{border:0;}
    .tuggage_cost ul li:nth-child(2n){background-color:#f8f8f8;}
    .tuggage_cost ul li:hover{border-color:#e5e5e5; background-color:#f2f2f2}
    .calc{font-weight:bold; color:red}


    /* advertisement */
    .adt thead th{font-size:14px;}
    .adt tbody th{color:#333; font-size:13px}
    .adt tbody tr td{border-left:1px solid #e5e5e5; font-size:13px;}
    .adt tbody tr:nth-child(2),
    .adt tbody tr:nth-child(4){border-bottom:1px solid #c5c5c5}
    #advertisement p.text-left{color:#888; margin-top:10px; float:right;}

    /* companyinfo */
    .introduce_box{ margin:0 auto; text-align:center; position:relative; z-index:2; display:inline-block; max-width:70%; }
    .introduce_box h3{    font-size: 26px;
        font-weight: bold;
        letter-spacing: 1px;
        margin-bottom: 20px;
        text-align:center;
      }
    .introduce_box p{font-size:18px; margin:15px auto; text-align:left;}
    .scope_area{display:inline-block; margin:60px auto 20px;padding:40px 20px 20px; border:1px solid #eee; background-color:#fff; position:relative;}
    .scope_area > p{display:inline-block; padding:5px 20px; border-radius:30px; background-color:#0071BC; color:#fff; position:absolute; top:-36px; left:0; right:0; width:185px; text-align: center}
    .scope_area ul{margin-top:5px}
    .scope_area ul li{margin-bottom:15px; text-align:left}
    .scope_area ul li:last-child{width:100%;}
    .scope_area ul li label{font-size:18px;    display: inline-block; padding-top: 20px;}
    .imgbs{width:60px; height:auto; margin-right:15px;}
    .img_area ul:after{display:block; content:''; clear:both}
    .img_area ul li{float:left; margin-right:1%; overflow:hidden; width:24.25%}
    .img_area ul li img{width:100%;}
    .img_area ul li img:hover{transform:scale(1.2); transition:transform 500ms}
    .img_area ul li:last-child{margin-right:0}

/* footer */
#footer{/* background-color:#333; position:relative; */clear:both; padding-left:80px; position:absolute; left:0; bottom:0}
#footer:before{width:80px; display:block; content:''; height:100%; background-color:#0071BC; position:absolute; left:0; bottom:0;}
.footer_inner{padding:10px 20px;}
.footer_box{box-sizing: border-box; font-size:13px; display:inline-block; float:left; padding-left:20px}
.footer_box .footer-menu{margin:0}
.footer_box .footer-menu li{float:left; padding:0 20px; margin:0; }
.footer_box .footer-menu li span{color:#fff; font-size:15px; letter-spacing: 0}
.footer_box .footer-menu li:nth-child(5),
.footer_box .footer-menu li:nth-child(7){display:none;}
.ft-logo{font-size:20px; font-weight:bold; color:#fff;}
.ft-rights{padding:10px; background-color:#fff; font-size:12px; height:40px}
.comp_info{display:inline-block; padding-left:20px; margin-top:5px;}
.comp_info li{ width:auto; padding:0 10px 0 0; margin-right:10px; text-align:left; color:#fff; float:left; position:relative;}
.comp_info li:last-child{padding-bottom:0}
.comp_info li:last-child:after{display:none;}
.comp_info li:after{display:block; content:''; width:1px; background-color:#fff; height:65%; opacity: 0.5; position:absolute; right:0;top:0; bottom:0; margin:auto;}
.footer_box:after,
.footer_inner:after{display:block; content:''; clear:both}
.comp_info li span{display:inline-block; float:left}
.comp_info li strong{display:inline-block; padding-right:5px; min-width:70px; font-size:13px}

  /** terms **/
  .terms_popup{width:800px; height:90vh; top:0; bottom:0; }
  .terms_popup .popup_content{height:calc(100% - 68px); overflow:auto;padding-left:20px}
  .terms > li{margin-bottom:20px}
  .terms > li h4{font-size:20px; font-family: 'S-CoreDream-6Bold'; margin-bottom:10px;}
  .terms > li p{margin-bottom:10px; text-indent:8px}
  .terms ol{padding:10px 0 10px 30px}
  .terms ol li{list-style: decimal}
  .terms .company_info{padding-top:10px;}
  .terms .company_info p{text-indent:0; margin-bottom:3px; padding-left:10px; font-size:13px;}
  .terms .company_info p label{display:inline-block;     width: 60px;    font-weight: 600;    color: #000;}

/* main */
#main_visual{width:100%;height:100vh; background-color:#ddd; background-image:url('../img/bg_main.jpg');background-repeat:no-repeat; background-position:center; background-size:cover; position:relative}
.main_search_wrap{width:600px; ;position: absolute; top:35%; left: 0; right: 0; margin:auto}
.main_search_wrap .main_schbox {width:100%; height:80px; background-color:#fff; border:10px solid #0071BC}
.main_search_wrap .main_schbox input{height:100%; line-height:100%; border:0;font-size:22px; padding:0 10px}
.main_search_wrap .main_schbox input[placeholder]{color:#666}
.main_search_wrap .main_schbox .btn_search{width:34px; height:33px;position:absolute; right:20px; top:0;  bottom:0; margin:auto;}
.cont_inner section{}
.section_inner{padding:70px 0 90px; margin:0 auto; width:100%; max-width:1200px;background-repeat:no-repeat;}
.sidePopup .popup_content{padding:40px 25px}
.sidePopup .btn_wrap{padding:20px 0 0 0}

    /* index css */
    #main .result-wrap {
      position: absolute;
      width: 100%;
      left: 0;
      max-height: 400px;
      box-shadow: 7px 7px 20px rgb(0 0 0 / 28%);
      z-index: 9999;
      top:100%
    }
    #main #resulttop {
      max-height: 360px;
      overflow-y: auto;
      background: #fff
    }
    #main #resulttop .sitem {
      border-bottom: 1px #ddd solid;
      padding: 8px 10px;
      height: 55px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 1.2;
    }
    #main #resulttop .sitem .img-thumbnail {
      float: left;
      margin-right: 5px;
      padding: 0px;
      border-radius: 0px;
      margin-top: -3px;
      width: 50px;
      height: 35px;
      border: none;
    }
    #main #resulttop .sitem .typeicon {
      margin: -4px 5px 0px 0px;
      width: 35px;
    }
    #main #resulttop .sitem .flags {
      margin-right: 10px;
    }
    #main #resulttop .sitem .cright {
      cursor: pointer;
      width: 230px;
      float: left;
    }
    #main #resulttop .sitem .cright .cpath {
      color: #3EA9CD;
      margin: 0px;
      font-size: 14px;
      font-weight: bold;
    }
    #main #resulttop .sitem .cright .sbjval {
      font-size: 9px;
      margin: 0px;
    }

    #main .closebtn {
      position: absolute;
      right: -43px;
      top: 0px;
      padding: 16px;
      cursor: pointer;
      background-color: #1581a8;
      border-radius: 0px 5px 5px 0px;
      color: #fff;
    }

    #main .vesselinport {
      margin-right: -4px;
      cursor: pointer;
      border: 1px solid;
      text-align: center;
      float: right;
      padding: 8px;
      border-radius: 7px;
      background: #1581a8;
      color: #fff;
    }

    #main #pnn {
      position: absolute;
      bottom: -40px;
      border-radius: 5px;
      color: #fff;
      width: 100%;
    }

    #main #pnn .prev {
      display: inline-block;
      padding: 10px;
      cursor: pointer;
      background-color: #1581a8;
      position: absolute;
      left: 0px;
      border-radius: 5px;
    }

    #main #pnn .next {
      display: inline-block;
      padding: 10px;
      cursor: pointer;
      background-color: #1581a8;
      position: absolute;
      right: 0px;
      border-radius: 5px;
    }

    #main #pnn .pagenum {
      text-align: center;
      font-size: 24px;
      padding: 5px;
      background-color: #1581a8;
      border-radius: 0px 0px 5px 5px;
    }

    /* index notice_popup */

    #popup_notice{
      display: block;
      top: 15%;
      left: auto;
      right: 20%;
      bottom: auto;
      width: auto;
      height: auto;
      border: 2px solid #0071BC;
    }
    #popup_notice .popup_header{
      height: 50px;
      line-height: 52px;
      font-size: 21px;
      color: #fff;
      text-align: center;
      background: #0071BC;
      padding: 10px 20px 10px 20px;
    }
    #popup_notice .popup_header .popupheaderimg{display:block; width:30px; height:30px; background-color:#fff; border-radius:4px;}
    #popup_notice .popup_content{padding:15px 0 0; background-color:#ffffff;}
    #popup_notice .popup_content{}
    #popup_notice .popup_content p{line-height:1.4}
    #popup_notice .popup_content ul{background-color:#fff; border-radius:10px; padding:18px; border:1px solid #e5e5e5}
    #popup_notice .popup_content ul li{line-height:1.4}
    #popup_notice .popup_bottom{padding:0 15px 15px; text-align:right;}
    #popup_notice .popup_bottom .noticeclose{width:auto; height:14px; font-size:12px; float:right; display:inline-block; padding: 3px 0px 0px 10px; font-weight:bold; position:static;}
    #popup_notice .popup_bottom:after{display:block; content:''; clear:both}
    #popup_notice .popup_bottom label{ margin-top:10px; background-size: 14px; height:14px}
    #popup_notice .popup_bottom input{display:none}
    #popup_notice .popup_bottom span{display:inline-block;font-size:12px;margin-top:0}

    #popup_notice input[type=checkbox]:not(old) {
      box-sizing: border-box;
      padding: 0;
      display: inline-block;
      width: 18px;
      height: 18px;
      margin: 0;
    }
    #popup_notice input[type=checkbox]:not(old) + label {
      color: #666;
      font-size: 13px;
      display: inline-block;
      vertical-align: top;
      margin-top: 2px;
      font-weight: normal;
      margin-right:10px
    }

    #popup_notice input[type="checkbox"]:after{width:16px; height:16px; margin-top:-1px}


  /** quotation_list **/
  #quotation .cont_box{padding:40px;}
  .quotation_list{width:530px; margin:30px auto 0}
  .quotation_list:after{display:block; content:''; clear:both;}
  #quotation h4{font-size:24px; font-weight:600}
  #quotation h4 p{font-size:18px; margin-top:5px}
  .quotation_list li{
    width:250px; height:180px; margin:0 30px 30px 0; border:2px solid transparent;
    border-radius:4px; background-color:#f8f8f8; float:left; padding:15px;
    box-shadow:0 0 3px #eee; cursor: pointer;
  background-repeat:no-repeat; background-position:90% 90%; background-size:70px auto;}
  .quotation_list li:nth-child(2n){margin-right:0}
  .quotation_list li:hover,
  .quotation_list li.active{box-shadow:0 0 3px #ddd; border:2px solid #0071BC;  transition:all 500ms}
  .quotation_list li:hover strong,
  .quotation_list li.active strong{color:#0071BC}
  .quotation_list li:nth-child(1){background-image:url('../img/quo01.svg')}
  .quotation_list li:nth-child(2){background-image:url('../img/quo02.svg')}
  .quotation_list li:nth-child(3){background-image:url('../img/quo03.svg')}
  .quotation_list li:nth-child(4){background-image:url('../img/quo04.svg')}
  .quotation_list li:nth-child(1):hover,
  .quotation_list li:nth-child(1).active{background-image:url('../img/quo011.svg')}
  .quotation_list li:nth-child(2):hover,
  .quotation_list li:nth-child(2).active{background-image:url('../img/quo021.svg')}
  .quotation_list li:nth-child(3):hover,
  .quotation_list li:nth-child(3).active{background-image:url('../img/quo031.svg')}
  .quotation_list li:nth-child(4):hover,
  .quotation_list li:nth-child(4).active{background-image:url('../img/quo041.svg')}
  .quotation_list li strong{font-size:32px; float:left;}

/* request_quotation */
  body.request_quotation.sub .cont_inner{width:800px;}
  .transfer{width:auto; height:35px;}
  .transfer img{width:auto; height:100%;filter: invert(100%);    vertical-align: top; margin-top: 3px;}
  .transfer strong{font-weight:500; display:inline-block; margin-right:6px;}
  .request_box li{border-top:1px dashed #e5e5e5; padding-top:20px; }
  .request_box li:after{display:block; content:''; clear:both;}
  .request_box li .form-group{border:0; margin-bottom:0; float:left;}
  .request_box li .form-group:nth-child(2n){margin-right:0}
  .request_box li .form-group .input_box{height:auto; text-align:left}
  .request_box li .form-group .input_box input,
  .request_box li .form-group .input_box select{width:100%}
  .request_box li .form-group .input_box input[type="radio"]{width:auto; margin-top:14px; margin-right:8px;}
  .request_box li .form-group .input_box span{font-size:13px; display:inline-block; height:40px; line-height:40px;}
  .request_box li .form-group .input_box .input{padding-left:0}
  .request_box li .form-group .input_box .input span{padding-left:0}
  .request_box li .form-group .control-label{width:100%; text-align:left; display:block; height:40px; line-height:40px; margin-bottom:0;}
  /* #request_quotation .cont_inner{width:50%; min-width:768px;} */
    .request_box li .form-group .select-wrap.dev2 select{width:49%; margin-right:2%; float:left}
    .request_box li .form-group .select-wrap.dev2 select:last-child{margin-right:0}
    .request_box li .form-group .date .inpu{width:48%}
    .request_box li .form-group .date strong{display:inline-block; width:4%; height:40px; line-height:40px; padding:0; text-align:center}
    .request_quotation_bulk {}
    .dollar{position:absolute; top:0; bottom:0; left:12px; margin:auto; height:40px; line-height:40px;}
    .btn_wrap .btn .arrow_back{    width: auto;    height: 13px;    vertical-align: middle;    margin: -4px 5px 0 0;}
    .cate_box .input_box > label{width:auto; margin-right:20px; display:inline-block; float:left;}
    .cate_box .input_box > label.select-wrap{width:120px;}
    .request_box li .form-group.cate_box .input_box span{margin-top:0}


    /** air **/
    .request_box li .form-group .input_box.textarea{height:100px;}
    .request_box li .form-group .input_box.textarea textarea{height:100%;}
/* sub common */
  body.sub{width:100%; height:calc(100vh + 80px); background-color:#ddd; background-repeat:no-repeat; background-position:center; background-size:cover; position:relative}
 .sub #container{min-height:100%; }
 .sub .cont_inner{width:90%; max-width:1400px; background-color:#fff; top:95px; left:0; right:0; margin:auto; position:absolute;}
 .sub .cont_inner .title_box{height:70px; box-sizing:border-box; padding:10px 20px; position:relative;}
 .sub .cont_inner .title_box p{height: 100%; line-height:2.2; font-size:22px; font-weight:600}
 a.home{display:inline-block; width:22px; height:22px; position:absolute; top:0; right:15px; bottom:0; margin:auto;}
 a.home img{width:100%}
 .sub .cont_inner .cont_box{padding:20px; height:calc(95vh - 165px); overflow:auto;}
 .sub .cont_inner .cont_box:after{display:block; content:''; clear:both}
.input_box .col-md-6{width:48%; margin-right:4%; float:left; display:inline-block; padding:0; text-align:left}
.input_box .col-md-6:last-child{margin-right:0}

.input_box .date-wrap.col-md-6{width:49%; margin-right:10px}

.date-wrap{position:relative;}
.date-wrap .btn_sch{position:absolute; width:20px; height:20px; right:7px; bottom:0; top:0; margin:auto;}
.date-wrap .btn_sch img{width:100%; margin:0}
.date-wrap.col-md-5{margin-right:0; max-width:47%; padding-left:0}
.date-wrap.col-md-5 input{width:100%; padding-left:0}
.date-wrap.col-md-5 > img{    position: absolute;
    width: 20px;
    height: 20px;
    right: 7px;
    bottom: 0;
    top: 0;
    margin: auto;}

.form-group{margin:0 0 10px 0; padding:0 0 10px 0; float:left;border-bottom: 1px dashed #e5e5e5}
.form-group:after,
.input_box:after{display:block; content:''; clear:both;}
.form-group .input_box{display:inline-block; padding-left:10px; float:left; height:60px;}
.form-group .control-label{font-family: 'S-CoreDream-7ExtraBold'; font-size:13px; color:#333}
.form-group .input_box input[type="password"],
.form-group .input_box input[type="text"]{display:inline-block;}

.menu01 .sub_top_bg{background-image:url('../img/submenu01.png'); background-size:cover; background-position:center}
.sub_contents{width:1080px; background-color:#fff; padding:60px 50px; margin:-250px auto 80px; text-align:left}
.sub_contents h3{font-size:22px; display:block; margin:0 auto 25px}
.sub_contents p{padding-bottom:10px; text-indent:8px; line-height:1.8; font-size:15px; color:#666}
.point{display:inline-block; position:relative; z-index:1}
.point:after{display:block; content:''; width:100%; height:35%; background-color:#FFB33F; opacity: .5; position:absolute; bottom:0; left:0; z-index:-1}
.dep_tit {
    font-size: 20px;
    line-height: 100%;
    font-weight: 500;
    color: #444;
    padding-bottom:10px
}
.sign{width:150px; margin-top:20px}


.flag{width:60px; border:1px solid #eee; line-height:40px; display:inline-block; text-align:center; font-size:13px; margin-right:10px; vertical-align: middle}
td .flag{width:35px; line-height:1}

  /* searchforbiz */
  body.sub{background-image:url('../img/bg_main.jpg');}
  .ifneed{position: absolute;    margin: -1px 0 0 10px;    display: inline-block;    width: 100px;}
  .ifneed input{width:20px; height:20px}
  .ifneed label{color:#666; font-size:13px; display:inline-block;vertical-align:top; margin-top: 2px;font-weight: normal}
  #searchforbiz .info_table{padding-top:20px; margin-top:20px; border-top:1px solid #454545; float:left; border-bottom:1px solid #e5e5e5}
  .table_top:after{display:block; content:''; clear:both;}
  .table_top label.control-label{font-family: 'S-CoreDream-7ExtraBold'; font-size: 15px;}
  .table_top p{font-size:13px; color:#666}
  .btn_view.more_view{height:30px; width:auto; padding:0 10px; line-height:30px; font-size:13px;}
  #view_info{width:800px; }
  #view_info table tbody th{width: 18%;font-size: 12px; color: #464646; text-align:left; padding:8px 0 8px 15px;background-color:#f8f8f8}
  #view_info table td{width:30%; background-color:#fff; font-size:12px;}

  /* vessels */
  #vessels, #vessels_list{background-image:url(../img/bg_vessels.jpg)}
  #ports, #ports_list{background-image:url(../img/bg_ports.jpg)}
  #vessels .table_area{}
  #vessels .cont_inner .title_box{position:relative;}
  #ports .cont_inner .title_box{position:relative;}
  .sub #search_box{    width: 500px;  height: 40px;
        position: absolute;

        right: 50px;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color:#fff;
        border-radius:2px;
    }
  .sub #search_box input{width:calc(100% - 40px);border:0; color:#333}
  .sub #search_box .btn_search{width:20px; width:20px; margin:10px 10px 0 0; float:right;}
  #vessels .table_area table th:nth-child(1),
  #vessels .table_area table th:nth-child(2),
  #vessels .table_area table th:nth-child(3){text-align:left; padding-left:10px}
  #vessels .table_area table td:nth-child(1),
  #vessels .table_area table td:nth-child(2),
  #vessels .table_area table td:nth-child(3){text-align:left; padding-left:15px}

    /** vessels_list **/
    .box_tit{font-size:20px; font-family: 'S-CoreDream-6Bold';}
    .box_tit span{font-size:14px; display:inline-block; margin-left:15px; color:#888888;font-family: 'S-CoreDream-4Regular';}
    .list_box:after{display:block; content:''; clear:both;}
    .list_box .form-group{display:inline-block; float:left; width:calc(66.667% - 20px); margin-right:20px; padding-bottom:0; border-bottom:0}
    .list_box .form-group h5{margin-bottom:8px; font-size:18px;}
    .list_box .form-group:nth-child(2n){margin-right:0}
    .list_box #map_area{padding-right:20px;height:311px;background-color:#f8f8f8;  position:relative; }
    .list_box table th{text-align:left; padding-left:10px; font-size:12px; background-color:#f8f8f8}
    table th, table td{height:35px}
    .list_box table thead th{padding:10px 9 10px 10px; text-align:left}
    .list_box table td{font-size:12px; text-align:left; padding-left:15px}
    .list_box table tbody tr:nth-child(2n) td{background-color:#fff}
    .list_box .porttable tbody tr th{border-right:1px solid #e5e5e5; text-align:center; background-color:#fff; padding-left:0}
/* ports */
  #ports .table_area table tr td{text-align:left; padding-left:15px}
  #ports .table_area table tr th{text-align:left; padding-left:10px}
  /* ports_list_box */
  .ports_list_box .form-group.col-md-5{float:right; margin-left:20px; margin-right:0}
  .ports_list_box .form-group.col-md-7{float:left}

  .ports_list_box #map_area{padding-right:0; height:311px}
  .ports_list_box .tabmenus{padding-bottom:5px;}
  .ports_list_box .tabmenus ul{box-shadow:none; width:auto; border-bottom:1px solid #0071BC; height:40px; padding-left:15px;}
  .ports_list_box .tabmenus ul li{width:auto; padding:0 20px; display:inline-block; border:1px solid #ccc; border-bottom:0;height: 40px; line-height:40px; font-size:13px; color:#ccc;margin-left:10px;}
  .ports_list_box .tabmenus ul li:nth-child(1){margin-left:0}
  .ports_list_box .tabmenus ul li.active{border:1px solid #0071BC; border-bottom:0; border-bottom: 1px solid #fff; color:#0071BC}
  .weather{display:inline-block; height:28px; vertical-align: middle; margin:-2px 5px 0 0}
  #port_select_area{width:100%}
  .table_area .btn_price {height: 32px;line-height: 30px; font-size: 13px; width: auto; padding: 0 20px}

  /* aiprospect */
  #aiprospect .form-group {
    border-bottom:0;
    border-top: 1px dashed #e5e5e5;
    margin: 20px 0 0 0;
    padding: 20px 0 0 0;
  }
  #aiprospect .form-group.port_select{margin:0; padding:0; border-top:0; position:relative;}
  #aiprospect .form-group.port_select .checkbox_wrap{margin-right:0}
  #aiprospect.sub .cont_inner .cont_box{height:auto; max-height:calc(95vh - 165px)}

  .port_select_wrap{opacity: .35; padding:0 20px}
  .port_select_wrap .col-md-12.float-left{padding-left:0}
  .port_select_wrap .col-md-6.float-left{padding-left:0}
  #aiprospect .form-group.port_select select{pointer-events: none; user-select: none}
  #aiprospect .form-group.port_select.active .port_select_wrap{opacity:1}
  #aiprospect .form-group.port_select.active select{pointer-events: auto; user-select:auto;}
   #aiprospect .form-group strong.col-md-1{
     padding-left: 0;
      position: absolute;
      left: 10px;
      right: 0;
      margin: auto;
      width: 4%;
      text-align: center;
      top: 12px;}
      .sub#aiprospect .cont_inner .title_box{padding-top:16px}
#aiprospect .cont_box{position:relative;}
  #aiprospect .tabmenus{text-align:center}
  #aiprospect .tabmenus ul{box-shadow:none;  display:inline-block; width:auto}
  #aiprospect .tabmenus ul li{border-bottom:1px solid #ddd; width:270px; padding:0 10px; float:left}
  #aiprospect .tabmenus ul li.on{border-color:#0071BC}
  #aiprospect .title_box strong{font-size:40px; line-height:1; margin-right:5px}
  #aiprospect .icon_ai{height:40px; margin-right:6px;}





/* history */
#history .sub_contents{width:900px}
#history .sub_contents h4{text-align:center; margin:30px auto; font-style:italic; color:#ddd; font-size:34px; margin:-20px auto 30px}
#history .tabmenus ul{width:100%; box-shadow:none; border:1px solid #eee; box-sizing:border-box}
#history .tabmenus ul li{width:50%;}
#history .tabmenus ul li.on{background-color:#0071BC; color:#fff}
.history_list ul{position:relative; padding-left:30px;}
.history_list ul:before{display:block; content:''; width:1px; height:100%; background-image:url('../img/dash_vert.svg'); position:absolute; left:30px; top:10px;}
.history_list ul li{padding-left:30px; position:relative; padding-bottom:10px; margin-bottom:10px;}
.history_list ul li:last-child{padding-bottom:0; margin-bottom:0;}
.history_list ul li:before{display:block; content:''; width:17px; height:19px; background-image:url('../img/polygon2.svg'); position:absolute; left:-8px; top:7px}
.history_list ul li:after{display:block; content:''; width:calc(100% - 30px); height:1px; background-color:#ddd; margin-top:10px}
.history_list ul li:last-child:after{display:none}
.history_list.tab01 ul:nth-child(1) li:nth-child(1):before{ background-image:url('../img/polygon.svg')}
.history_list ul li label{font-weight:bold; font-size:20px; display:block; padding-bottom:10px}
.history_list.tab01 ul:nth-child(1) li:nth-child(1) label{color:#0071BC}
.history_list p{text-indent:0; color:#666666}
.history_list p strong{color:#454545; display:inline-block; margin-right:10px}


/* about */
.about_list{margin:50px auto; max-width:900px}
.about_list li{width:180px; height:180px; border-radius:50%; margin-right:50px; margin-bottom:30px; overflow:hidden; position:relative; display:inline-block;}
.about_list li:last-child,
.about_list li:nth-child(4){margin-right:0;}
 .circle_wrap{width:180px; height:180px; border-radius:50%;background-size:contain; background-position:center; background-repeat:no-repeat;line-height:180px; transition: transform 500ms; position:relative;}
 .circle_wrap:before{display:block; content:''; width:100%; height:100%; background-color:#000; opacity: .5; transition: opacity 500ms; }
.about_list li:nth-child(1) .circle_wrap{background-image:url('../img/about01.png');}
.about_list li:nth-child(2) .circle_wrap{background-image:url('../img/about02.png');}
.about_list li:nth-child(3) .circle_wrap{background-image:url('../img/about03.png');}
.about_list li:nth-child(4) .circle_wrap{background-image:url('../img/about04.png');}
.about_list li:nth-child(5) .circle_wrap{background-image:url('../img/about05.png');}
.about_list li:nth-child(6) .circle_wrap{background-image:url('../img/about06.png');}
.about_list li:nth-child(7) .circle_wrap{background-image:url('../img/about07.png');}

.about_list li p{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; color:#fff;line-height:180px; text-indent:0; font-size:20px;}
.about_list li:hover .circle_wrap{transform:scale(1.4)}
.about_list li:hover .circle_wrap:before{opacity:0}
.about_list li:hover p{display:none}

  /* .map_marker{} */
  .map_marker{ display:inline-block; width:50px; height:50px; border-radius:30px; position:absolute; transform-origin: center;position:absolute}
  .map_marker img{width:14px; position:relative; z-index:1;    margin-top: 16px;}
  .map_marker:after{display:block; content:''; width:20px; height:20px; background-color:#0071bc; border-radius:50%; opacity: 0.5;  animation: map_marker 800ms cubic-bezier(0.39, 0.54, 0.41, 1.5) infinite; transition:800ms all; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;}

  @keyframes map_marker {
    0% {
      transform:scale(1.5)
    }
    100% {
      transform:scale(2)
    }
  }



/* location */
#location .sub_contents{padding:0}
#location .sub_contents .root_daum_roughmap .cont{padding-top:100px}
#location .root_daum_roughmap .cont{width:100%}
#location .root_daum_roughmap .cont .section{padding:35px 20px}
#location .root_daum_roughmap{width:100%}
.root_daum_roughmap .logo{position:absolute; left:0; right:0; margin:auto; top:442px}
.root_daum_roughmap .cont .section_address{padding-top:15px}
.root_daum_roughmap .cont .section_address > div{display:inline-block; float:left; margin-top:0}
.root_daum_roughmap .cont .section_address .address{width:60%}
.root_daum_roughmap .cont .section_address .phpone{width:40%}

.info_logo{margin:30px auto}
.transfer_info{}
#location .transfer_info tbody tr{border-bottom:1px dashed #ddd; }
#location .transfer_info tbody th{width:auto; font-weight:500; text-align:left;padding:20px 0; padding-left:10px;background-color:transparent;}
#location .transfer_info tbody td{text-align:left;background-color:transparent;padding:20px 0; color:#666}
#location .transfer_info .wrap_list li{display:inline-block; padding-right:20px;}
.loca_icon{width: auto;
    height: 22px;
    display: inline-block;
    vertical-align: text-bottom;
    margin-bottom: 2px;
    margin-right: 10px;}
.loca_icon.bustop {height: 26px; margin-bottom: -2px}

  /** pagination **/
  .pagination{margin:20px auto 0; display:block; text-align:center}
  .pagination ul{display:inline-block; padding:0 10px}
  .pagination ul li{padding:5px; border-radius:2px; font-size:12px; float:left; cursor:pointer}
  .pagination ul li.on{background-color:#0071BC; color:#fff;}
  .pagination .btn-arrow{width:8px; display:inline-block; vertical-align: top; padding-top:6px}
  .pagination .btn-arrow img{width:100%}
  .btn-next img{transform:rotate(-180deg)}





/* menu_cate_list */
.tabmenus {text-align:center; border-bottom:0; padding-bottom:30px; }
.tabmenus ul{width:450px; display:block; margin:0 auto;box-shadow:0 1px 3px #ddd}
.tabmenus li{width:150px; margin-right:0; float:left; border-bottom:1px solid #ccc; color:#222; background-color:transparent; border:0;line-height:50px; cursor:pointer}
.tabmenus li.on{ color:#0071BC; background-color:transparent; font-weight:bold}

.img_box img{width:100%;}


.sub section > h4{margin-bottom:20px;}
.sub section > h4 span{display:block; font-size:13px; color:#ccc}
hr.dashed{border-bottom:1px dashed #ddd; height:1px;}
.table_bottom *{font-size:13px; padding:5px 5px 10px}
.table_bottom > div strong{display:inline-block; font-size:18px}
.table_bottom > div:after,
.cont_inner section:after{display:block; content:''; clear:both;}

h6 .del-img{max-width:25px; max-height:20px; font-size:12px; position:absolute; line-height:18px !important; right:0; top:2px;}
h6 .del-img:before {
    display: block;
    content: '';
    width: 80%;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.video_box iframe{width:100%; height:560px; }

.table_wrap table tr td .btn-del{position:relative; display:inline-block; width:24px; height:22px; border-radius:3px; margin-top:2px;}
.table_wrap table tr td .btn-del:before{display:block; content:''; width:80%; height:2px; background-color:#fff; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;}
.txt_box textarea{height:165px;}

.info_top.search_box label{width:140px;}
.info_top.search_box .input_box{width:calc(100% - 140px)}
.menu_new_ section .img_box{display:flex; background-color:#ddd; height:165px; width:245px;}
.video_box label,
.menu_new_ section .img_box label{align-items: center; width:80px; margin:auto; display:flex}
.menu_new_ section .video_box label{width:60px;}
label[for="add_video"]{width:}
.menu_new_ section .txt_box {width:calc(100% - 245px); max-width:none; padding-right:0;}
.btn_add.bg-464646{margin-left:10px; font-size:13px; line-height:30px; padding:0 10px; border-radius:3px;}
.btn_add.bg-464646 img{transform:rotate(45deg); width: 9px; margin-top: 10px; margin-right: 7px;}



/* develop */
.file{margin-bottom:5px;}
.flie:last-child{margin-bottom:0;}
.file a{display:inline-block;border-bottom:1px solid; color:#177ad0;}
#develop_write .develop_basic_info .form-group{padding-left:0; padding-right:0;
border: 1px solid #dfdfdf;
border-width: 0 0 1px 0;}
.file_box_wrap,
.img_box_wrap{background-color:#f9f9f9; }
.img_box_wrap .input_box{background-color:#fff; width:calc(100% - 120px); float:left}
.file_box_wrap > .input_box{background-color:#fff; width:calc(100% - 120px); max-width:none;}
.file_box_wrap > .input_box .title{background-color:#fff; float:left; width:60px; height:40px; line-height:40px; padding:0;}
.file_box_wrap > .input_box input{width:calc(100% - 80px);}
.files2 li{min-height:40px;}
.files2 li:last-child{margin-bottom:5px;}

/* img upload */
.img_wrap{display:inline-block;}
.img_wrap .upImg{margin-right:10px;}
.img_wrap:after{display:block; content:''; clear:both;}
.filebox1{display:inline-block; width:100%; height:100%; text-align:center;}
.filebox1 .img .imgbox{overflow:hidden;}
.filebox1 .img .imgbox img{height:auto !important;}
.fileadd{position:relative; height:100%;}
.filebox, .upImg{
width:100%;
height:320px;
background-color: #fff;
position: relative;
display: inline-block;
float: left;
border-radius:6px;

}
.upImg{  margin:5px auto; display:inline-block; }
.filebox{float: left; position:relative; overflow:hidden;border: 1px solid #E5E5E5;}
.btn_img_add{display:inline-block; padding-top:100px}
.btn_img_add span{display:block; font-size:14px; text-align:center; margin-top:10px;}
.btn_img_add img{width:20px; height:20px; display:block; margin:0 auto;}
.no_img{position:absolute;top:0; bottom:0; left:0; right:0; margin:auto;  width:100%; font-size:13px; text-align:center;padding-top:60px}
.no_img img{opacity:.5}
.no_img p{margin:5px auto 20px; color:#666;}
.no_img a{ width:100px; font-weight:normal; height:30px; line-height:25px; border-radius:4px; display:inline-block;}

/* .inquiry_ .form-group.textarea{max-height:400px;} */
.reply_write textarea{border:1px solid #ddd}


/* imaged preview */
.upfile input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
.upfile .upload-name {-webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none; }


/* notice */
#notice .table_area{width:100%; max-width:1200px; margin:0 auto}




@media (max-height:800px){
#request_add_photo {
height: 560px;
top: 3%;
}
@media (max-height: 720px){
#request_add_photo {
  height: 540px;
}
}

}

.popup section {
box-shadow: none;
border: 0;
padding: 0;
width: auto;
height: 100%
}

.input_area {
max-width: 1000px;
}

.input_area:after {
display: block;
content: '';
clear: both;
}

.search_date label {
width: 140px;
display: inline-block;
margin-right: 22px;
position: relative;
}

.search_date label img {
width: 15px;
position: absolute;
top: 10px;
right: 10px;
}

.search_date strong {
font-size: 22px;
position: absolute;
top: 10%;
right: 33%;
font-weight: 400;
color: #666;
}

.search_date label:last-child {
margin-right: 0;
float: right;
}

.search_word {
float: right;
width: 47%;
}

.search_word input {
width: 330px;
}
.upload_wrap {
background-color: #fff;
border: 1px solid #C8C9CE;
border-radius: 2px;
width: 810px;
float: left;
}

.img_upload span {
display: block;
width: 45%;
padding: 0 15px;
position: relative;
margin: 15px 0
}

.img_upload span:nth-child(1) {
margin-bottom: 0
}

.img_upload span img {
position: absolute;
top: 10px;
right: 10px;
width: 15px;
height: 12px;
}

.img_upload input[type="file"] {
display: none
}

.img_upload a.btn_add strong {
color: #666;
font-size: 15px;
display: inline-block;
line-height: 2.3;
width: 100%;
text-align: center;
}

.img_upload label img {
width: 27px;
box-sizing: border-box;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 1px;
margin: auto;
}

/* #container{width:94%; min-width:1024px; margin:0 auto;} */




.cont_inner{width:100%;}

.table_wrap, .add_box{padding:0;}
#container:after,
.cont_inner:after,
.btn_wrap:after {
    display: block;
    content: '';
    CLEAR:BOTH;
}
.title_box{font-size:14px; text-align:center;}
.title_box p {
    font-size: 13px;
    color: #757575;
    line-height: 1.4;
}


input, select, .form-control {
    height: 30px;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    outline:none;
    font-size:12px;
    font-weight:normal;
    box-shadow:none;
    text-indent:8px;

}

a:hover, a:focus, a:active{text-decoration: none;}
input::placeholder,
textarea::placeholder{color:#c4c4c4}

body .checkbox_wrap{ margin-right:15px;float:left; line-height:40px;}
body .checkbox_wrap:last-child{margin-right:0;}
body .checkbox_wrap input{    display: inline-block;
    width: auto;
    width:auto; height:auto;
    float: left;
    top: 0;
    height: auto;
    vertical-align: top}
body .checkbox_wrap span{display:inline-block; font-size:13px; letter-spacing: 1px; padding-left:5px; font-weight:normal; line-height:1; float:left; color:#666}
body .checkbox_wrap span u{display:inline-block; letter-spacing: 1px; padding-right:2px;}
body .checkbox_wrap input{}
body input[type="checkbox"]:checked:after{display:inline-block; float:left;}

body .radio_wrap{ margin-right:15px;float:left; line-height:40px;}
body .radio_wrap:last-child{margin-right:0;}
body .radio_wrap input{    display: inline-block;
    width: auto;
    width:auto; height:auto;
    float: left;
    top: 0;
    height: auto;
    vertical-align: top;
    margin-top: 16px;}
body .radio_wrap span{display:inline-block; margin-top:14px; font-size:14px; font-weight:normal; line-height:1; float:left;}

body input[type="checkbox"]:checked:after{display:inline-block; float:left;}

.checkbox{width:20px; height:20px; display:inline-block;}
.btn_submit{padding:0;}
.btn_submit .btn {
    line-height: 40px;
    height:40px;
    padding: 0;
    font-size: 16px;
    font-weight: ;
}
.btn_submit.dev2 .btn{width:49%}
.btn_submit.dev2 .btn:last-child{float:right;}
.btn.btn-cancel {
    border: 1px solid #dfdfdf;
    color: #676767;
    float: left;
}

.contents_wrap{padding:30px 15px; max-width:1200px; position:relative;}
.contents_wrap .btn_wrap{text-align:right; margin-top:15px}
.btn.col-md-2{float:none;}

.dev4 li{width:25%; float:left; display:inline-block;}
section {
    background-color: #fff;
    box-sizing:border-box;
}

select {

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    padding-left:10px;
    outline:none;
    border:0;
    width:100%;
    padding:0;
    background-image: url(../img/arrow.svg);
    background-size: 15px 10px;
    background-repeat: no-repeat;
    background-position:right 10px center
}
.select-wrap{position:relative; height:40px}
.select-wrap select{  box-sizing:border-box;border:1px solid #E5E5E5;background-color: #fff}

select.readonly {
  background-color: #f8f8f8;
  border: 1px solid #C8C9CE;
}
 .readonly input,
 .readonly textarea{background-color:#f8f8f8 !important}
/*textarea:read-only{background-color:#f8f8f8} */
select option { text-indent: 15px;}
select::-ms-expand { display: none;}

select.active { transform:rotate(180deg); transition:2s ease-out;}
span.chk{display:inline-block; position:relative; padding-left:15px; float:left; margin-top:6px;}
span.chk:nth-child(1){padding-left:0;}
span.chk label{border:0; display:inline-block;}


  .hide{display:none;}
  .show{display:block;}
  .btn_url{background-color: #009688; color:#fff; border-radius:6px; width:110px}


.btn_wrap{}
.btn_wrap .btn{width:auto; min-width:120px; padding:0 20px}
div .btn{
    width: 90px;
    line-height:40px;
    height:40px;
    display: inline-block;
    color: #fff;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
    padding:0;
    border-radius:3px;
}

.btn img{width: 15px; display: inline-block; margin-top: 8px;}


a.btn_close {
    width: 12px;
    height: 12px;
    line-height: 1.8;
    display:inline-block;
}


.full-width{width:100% !important; margin-left:0; margin-right:0}
.half-width{width:50% !important}
.float-left{float:left }
.float-right{float:right }
.text-left{text-align:left}
.text-right{text-align:right;}
.text-center{text-align:center;}
input, select{font-size:13px;}
  textarea{
    border:1px solid #E5E5E5;
    background-color:#fff;
    height: auto;
    overflow: auto;
    padding: 10px;
    resize: none;
    box-sizing: border-box;
    font-size: 13px;
    text-indent:0;
  }

.btn_hover:hover {
    font-weight: 600;
}

.btn_img {
    border: 0;
    color: #fff;
    display: inline-block;
    border-radius: 2px;
    text-align: center;
    text-indent: 0;
    line-height: 2.2;
    font-weight: 600;
    width: 100%;
    height: 100%;
}

.btn_img_del {
    background: #ED5247;
}



.btn_img img {
    width: 22px;
    display: inline-block;
    margin-top: 6px;
    float: left;
    margin-left: 10px;
}



.popup table td .btn_img img {
    width: 16px;
    margin-top: 8px;
    margin-left: 7px;
}

.btn_img span {
    display: inline-block;
    margin-right: 8px;
    margin-top: 1px;
}

.btn_img_up img {
    margin-left: 8px;
    margin-top: 8px;
}

.img_upload label {
    width: 40px;
    height: 40px;
    display: inline-block;
    position: relative;
    float: right;
    background-color: #F8F8F8;
    text-indent: 0;
    border: 1px solid #C8C9CE;
    border-radius: 2px;
    box-shadow: 1px 1px 0.5px rgba(0, 0, 0, 0.3);
}

.btn_wrap a.btn_add {padding:0 20px; width:auto;}
.btn_wrap a.btn_add img {margin-right:5px;}
.btn_del{width:20px; height:20px; display:inline-block;}

#grid1 .tui-grid-body-area{
  /* height: 49.5vh !important;
  overflow-y: auto !important;
  box-sizing: border-box;
  overflow-x: hidden !important; */
}
.tui-grid-cell-has-input .tui-grid-cell-content{display:inline-block; border-bottom:1px solid transparent;}
.tui-grid-table{height:100%; overflow:auto;}

.top:after,
.bottom:after,
ul:after{display:block; content:''; clear:both;}
.dev2 li{width:50%; float:left;}
.dev2 li:nth-child(3n){padding-right:0;}
.dev3 li{width:33.333%; float:left;}
.dev3 li:nth-child(3n){padding-right:0;}
.dev4 li{width:25%; float:left;}
.dev4 li:nth-child(4n){padding-right:0;}

.mylist_box .form-group .control-label{text-align:left !important;height: 40px; line-height: 40px; margin-bottom: 0; margin-top: 5px; width:auto}
.mylist_box .form-group .input_box{margin-top:5px; height:auto}
.mylist_box .form-group .list_wrap.type-02 > ul > li .inner_l .il_l span{font-size:15px}
.mylist_box .form-group .list_wrap.type-02 > ul > li .inner_r p{font-size:15px; color:#222; font-weight:bold; padding-top:25px}

/* cbcalculation */
#cbcalculation .cont_box h4{font-size: 18px;
    text-align: left;
    padding: 0 0 15px 5px;
    border-bottom: 1px solid #333;
    margin-bottom: 15px;
    font-family: 'S-CoreDream-7ExtraBold';}
.calculate_mile{position:relative; width:95%; margin:0 auto}
.calculate_mile input{text-align:right; width:100%; padding-right:40px}
.calculate_mile .mile{display:inline-block; position:absolute; right:12px; top:6px; font-size:13px}
.totalmile .form-group .info_tit{padding-top: 10px;}
#cbcalculation .cont_box section{margin-bottom:50px;}
#cbcalculation .cont_box .table_area table{margin-bottom:15px}
#cbcalculation .cont_box .table_area table thead{border-width:0 0 1px 0; border-bottom:1px solid #ddd}
#cbcalculation .cont_box .table_area table thead th{height:40px; padding:0 10px; text-align:left; font-size:14px; color:#222}
#cbcalculation .cont_box .table_area table thead tr:nth-child(1) th{font-size:15px; font-family: 'S-CoreDream-7ExtraBold';}
#cbcalculation .cont_box .table_area table thead tr:nth-child(2) th{font-size:13px; height:35px; background-color:#f2f2f2;}
#cbcalculation .cont_box .table_area table tbody tr th{text-align:left; padding-left:10px; background-color:#f8f8f8; border-right:1px solid #dfdfdf; font-size:13px}
#cbcalculation .cont_box .table_area table td:nth-child(n){background-color:#fff}
#cbcalculation .cont_box .table_area table td .form-group{padding:0; margin-bottom:0; border-bottom:0; width:100%;}
#cbcalculation .cont_box .table_area .form-group .input_box{padding-right:10px; height:auto;}
#cbcalculation .cont_box .table_area .form-group .input_box input{width:100%}
#cbcalculation .cont_box .table_area .form-group .control-label {padding-left:10px; margin-bottom:0}
#cbcalculation .cont_box .table_area table tr {border-bottom:1px dashed #e5e5e5}
#cbcalculation .cont_box .table_area .totle_miles{margin:10px auto 15px}
#cbcalculation .cont_box .table_area .totle_miles .form-group .control-label{font-size:13px; padding-top: 10px;}
.ui-menu{max-height:350px; overflow-y:auto; overflow-x:hidden; box-sizing: border-box;}
.ui-menu .ui-menu-item{padding:0}
.ui-menu .ui-menu-item-wrapper{font-size:14px; padding:5px}
.ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-active{background-color:#654b24; color:#fff; background-image:none}

.portratation td .input_box{width:95%; margin:0 auto}
.portratation td input.col-md-6{width:49%; margin-right:1%; float:left}
.portratation td input.col-md-6:nth-child(2){margin-right:0}
.portratation td span{display:inline-block; padding-top:3px}
.cost_table td input{text-align:right; padding-right:8px}

label.betatest{    display: inline-block;
    font-size: 10px;
    background-color: #e21e1e;
    height: 20px;
    line-height: 20px;
    padding: 0 7px;
    border-radius: 4px;
    margin: 5px 0 0 5px;
    vertical-align: top;
    letter-spacing: 1px;}



/* 220330 cbcalculation */

#loading_Port:after{display:block; content:''; clear:both}
.add_table{border: 1px solid #e5e5e5;}
.add_table li{width:25%; float:left;}
.add_table li{border-top: 1px dashed #e5e5e5;}
.add_table li:nth-child(1),
.add_table li:nth-child(2),
.add_table li:nth-child(3),
.add_table li:nth-child(4){border-top:0}
.add_table li.li_title,
.portratation .li_title{width:100%; float:none;
  font-size: 15px;
  font-family: 'S-CoreDream-7ExtraBold';
  height: 40px;
  padding: 0 10px;
  text-align: left;
  background-color: #e9e9e9;
  line-height: 40px;

}
.add_table li.li_title .btn_add{
  margin-top: 7px;
  height: 25px;
  line-height: 25px;
  width: auto;
  padding: 0 10px;
  font-family: 'S-CoreDream-4Regular';
  font-size: 12px;
}
.add_table li p{width:100%; padding:5px}
.add_table li .input_wrap{padding-bottom:0}
.add_table li .calculate_mile .mile {top: 12px}

.portratation{margin-bottom:15px;}
.add_table3 li,
.add_table4 li{width:21.25%; float:left}
.add_table3 li.li_title2,
.add_table4 li.li_title2{width:15%}
.add_table3 li p,
.add_table4 li p{min-height:41px}
.add_table3 li.li_title2 p,
.add_table4 li.li_title2 p{ background-color: #f8f8f8; border-right: 1px solid #dfdfdf;padding:0 10px; height:35px; line-height:35px;}
.add_table3 li p:nth-child(1){background-color: #f2f2f2;  border-right:0;  font-weight:bold}
.li_th{text-align: left; padding-left: 10px; background-color: #f8f8f8; border-right: 1px solid #dfdfdf; font-size: 13px;}

.add_table3, .add_table4{border-top:0}
.add_table4 li span{font-family: 'S-CoreDream-7ExtraBold'; font-size: 13px; color: #333;display: inline-block; vertical-align: middle;}