.pc{display:block}
.tablet{display:none}
.mobile{display:none}

/* pc */

  /***** 1700px~ *****/

  @media(max-width:1700px){
    .ft-logo { font-size: 18px}
    .footer_box{width:calc(100% - 210px); padding-left:0}
    .comp_info li { padding: 0 7px 0 0; margin-right: 7px}

    #aiprospect.sub .cont_inner .cont_box .btn_wrap{margin-top:10px}

    .terms_popup{height:90vh; top:4%; bottom:auto}

    .login_bg{z-index:0}
  }



  /***** 1440px~ *****/

  @media(max-width:1440px){
    .menu_right {padding-top: 7px}
    .add_table3 li, .add_table4 li {width: 20.75%}
    .add_table3 li.li_title2, .add_table4 li.li_title2 {width: 17%}



    /* common */
    .form-group .control-label{font-size:14px}
    input, select {font-size: 12px}
    body.sub{background-size:auto}

    /* sub */
    .sub .cont_inner{left:80px; max-width:1200px}
    .sub .cont_inner .title_box { height: 50px; padding: 0px 20px;}
    .sub .cont_inner .title_box p{font-size:18px; line-height:50px}
    .sub .cont_inner .cont_box {overflow: auto}
    a.home {width: 18px; height: 18px}

    .ports_list_box .form-group.col-md-7{max-width:calc(58% - 30px)}

    .sub#aiprospect .cont_inner .title_box {padding-top: 7px}
    #aiprospect .title_box strong{font-size:33px}
    #aiprospect .icon_ai {height: 33px; margin-top: 1px}


  }

    @media(max-width:1370px){

      .loginBox{margin-top:20px}

      .quotation_list li{height:155px;background-size: 56px auto;}
      .quotation_list li strong{font-size:25px}
      .gnb_menu li {padding: 0 30px;font-size: 15px}

    }

/* tablet */

    /***** 1280px~ *****/
    @media (max-width:1280px) {

      .add_table3 li.li_title2 p, .add_table4 li.li_title2 p {font-size: 12px}

      .gnb_menu li{padding:0 30px; font-size:16px}
      .comp_info li{font-size:11px; margin-right: 6px;}
      .footer_box .footer-menu li span{font-size:13px}
      .main_search_wrap {width: 500px; height: 60px}
      .main_search_wrap .main_schbox{height:100%; border: 7px solid #0071BC}
      .main_search_wrap .btn_search {width: 28px}
      .main_search_wrap input{font-size:18px}

      .introduce_box{max-width:none}

      .loginBox {margin-top: 0}

    }

    /***** 1150px~ *****/
    @media (max-width:1150px) {
      .header_inner{padding:15px}
      .gnb_menu li {padding: 0 25px}

      .add_table3 li, .add_table4 li {width: 20%}
      .add_table3 li.li_title2, .add_table4 li.li_title2 {width: 20%}

    }

    /***** 1024px~ *****/
    @media (max-width:1024px) {

      .pc{display:none !important}
      .mobile{display:none !important}
      .table{display:block !important}

      html{min-width:0}
      body{overflow:hidden}
      #header{text-align:left; padding-left:0}
      #header .logo{font-size: 28px; font-weight: bold; color: #fff; margin: 15px auto; display: inline-block !important; padding-left:20px; z-index:10; position:relative;}
      .btn_mo_menu{position: relative;   z-index: 999; left: -48px; width: 25px; height: 20px; top: 20px; display:inline-block !important}
      .btn_mo_menu img{width:100%}
      .header_inner{right: -250px; position: absolute; transition: 500ms all; top: 0; width:250px; height:100vh; background-color:#f2f2f2; z-index:1001; padding:0;}
      .header_inner.open{right:0; transition:500ms all; }

      #gnb{position: absolute; top: 0; width: 100%; left: 0;display:flex;flex-flow: row wrap; justify-content:space-between;}
      #gnb .gnb_menu{order: 2;}
      .gnb_menu li{padding: 5px 10px; width:100%; text-align:left; color:#333 !important; font-size:14px; font-weight:bold; letter-spacing: 0;    border-bottom: 1px dashed #ddd; border-radius: 0;}
        .gnb_menu li:last-child{border-bottom:0}
      .gnb_menu li:hover,
      .gnb_menu li:focus{background-color:transparent; color:#333 !important}
      .gnb_menu li.active, .gnb_menu li:hover {
          border-radius: 0;
          background-color: transparent;
      }

      #gnb .menu_right{order: 1; width:100%; background-color:#fff; padding:0; text-align:center}
      .menu_right .class_basic{height:35px; display:block; margin:20px auto}
      .menu_right a {font-size: 13px; font-weight: bold; width:50%; float:left; background-color: #0071BC; color: #fff !important;height: 40px; line-height: 39px;margin-left:0; padding-left:0;}
      .menu_right a.btn_mypage:before, .menu_right a.btn_join:before{left:auto; right:0}
      html body #popup_notice{right: 0;margin: auto;left: 0;width: 80%;max-width: 400px}
      #gnb .footer-menu{order: 3; width:100%; display:block; border-top:1px solid #888; padding-top:15px; margin-top:15px}
      #gnb .footer-menu li{padding: 5px 10px; color:#333 !important; width:100%; text-align: left; line-height:40px;    border-bottom: 1px dashed #e5e5e5; border-radius: 0;}
      #gnb .footer-menu li a{font-size:13px; font-weight:bold; letter-spacing: 0}

      #logo2{display:none}
      #logo3{display:block; position: absolute; width: 62px; height: 62px; bottom: 22px; right: 20px; z-index:2; background-color:#0071BC; padding:15px; border-radius:62px}
      #logo3 img{filter: brightness(100) grayscale(1);}
      #leftmenu{width: 62px;  height: 62px;  bottom: 22px; right: 20px;  left: auto; top: auto;  border-radius: 62px; padding-bottom: 62px; overflow:hidden}
      #leftmenu ul{opacity: 0; transition:500ms all}
      #leftmenu.open{height: 490px; transition:500ms all}
      #leftmenu.open ul{opacity: 1; transition:500ms all;     margin: 5px auto 30px;}
      .sidebar-menu li{padding:12px 0}
      .sidebar-menu li span{margin-top:8px; letter-spacing: -0.5px}

      .ft-logo{width:100%; text-align:left; margin-bottom:0}
      .footer-menu{display:none}

      #footer{padding-left:0}
      #footer:before{display:none}
      .footer_box{width:100%;}
      .footer_box .footer-menu li:nth-child(1), .comp_info{padding-left:0}

      /* common */

      .popup{max-width:90%}
      .form-group.col-md-6{max-width:100%}
      .form-group.col-md-3{max-width:50%}
      .input_box .col-md-6 {width: 49.5%; margin-right: 1%}
      .form-group .control-label{padding-left:5px}

      /* sub */
      body.sub{background-attachment: fixed; height:calc(100vh + 70px)}
      .sub .cont_inner{left:0; top:70px;width: calc(100% - 40px)}
      .sub .cont_inner .cont_box {height: calc(95vh - 120px)}
      #portcalculator .title_box .select_wrap{margin-top:2px}
      #portcalculator .title_box .select_wrap select{height:33px; width:200px}
      .box_tit {font-size: 17px}
      /* #portcalculator .search_box table{min-width:900px} */
      #portcalculator table th{font-size:13px}
      #portcalculator table th em{font-size:10px}
      table.table01 colgroup col:nth-child(1),
      table.table01 colgroup col:nth-child(5){max-width:10%}
      table.table01 colgroup col:nth-child(4){max-width:8%}
      table.table01 colgroup col:nth-child(3),
      table.table01 colgroup col:nth-child(2),
      table.table01 colgroup col:nth-child(6){width:auto; max-width:24%}
       table.table01 tbody td input{width:163px; max-width: 163px;    font-size: 11px; text-align:left; display:inline-block; text-indent:0}
       #portcalculator .get_editor{padding:10px}
       .get_editor > p{font-size:13px}
      #portcalculator .get_editor ul li {margin-bottom: 0px;font-size: 12px}
      .search_box.cal_container .in_area{padding:0}

      #aiprospect.sub .cont_inner .cont_box{max-height:calc(95vh - 120px)}
      #aiprospect .tabmenus ul li{line-height:40px}
      #aiprospect .tab .form-group{width:50%; max-width:none; margin:0; padding:0 !important; border:0; margin-bottom:15px}
      #aiprospect .tab .form-group .input_box{display: block; max-width: none; height:auto; margin-top:4px; padding-left:0}
      #aiprospect .tab .form-group .input_box .date-wrap{margin-top:0; width:48%}
      #aiprospect .tab .form-group .input_box .date-wrap:last-child{float:right}
      #aiprospect .form-group strong.col-md-1{left:0}
      #aiprospect .tab01 .form-group:nth-child(1),
      #aiprospect .tab01 .form-group:nth-child(3){width:35%}
      #aiprospect .tab01 .form-group:nth-child(2),
      #aiprospect .tab01 .form-group:nth-child(4){width:65%}
      #aiprospect .tab01 .form-group:nth-child(1) .input_box,
      #aiprospect .tab01 .form-group:nth-child(3) .input_box {width: 90%; padding-left:2px}

      #aiprospect .tab02 .form-group:nth-child(1),
      #aiprospect .tab02 .form-group:nth-child(3) .input_box .input_box{width:100%}
      #aiprospect .tab02 .form-group:nth-child(1) .col-md-3{width:35%; max-width:none; padding-left:0}
      #aiprospect .tab02 .form-group:nth-child(1) .col-md-3 .input_box,
      #aiprospect .tab02 .form-group:nth-child(3) .input_box{width:90%}
      #aiprospect .tab02 .form-group:nth-child(2){width:100%}
      #aiprospect .tab02 .form-group:nth-child(2) .input_box{width:65%}
      #aiprospect .tab02 .form-group:nth-child(3){width:35%}
      #aiprospect .tab02 .form-group:nth-child(4){width:65%}

      #aiprospect .tab03 .form-group:nth-child(1),
      #aiprospect .tab03 .form-group:nth-child(3) .input_box .input_box{width:100%}
      #aiprospect .tab03 .form-group:nth-child(1) .col-md-3{width:35%; max-width:none; padding-left:0}
      #aiprospect .tab03 .form-group:nth-child(1) .col-md-3 .input_box,
      #aiprospect .tab03 .form-group:nth-child(3) .input_box{width:90%}
      #aiprospect .tab03 .form-group:nth-child(2){width:100%}
      #aiprospect .tab03 .form-group:nth-child(2) .input_box{width:65%}
      #aiprospect .tab03 .form-group:nth-child(3){width:35%}
      #aiprospect .tab03 .form-group:nth-child(4){width:65%}

      #aiprospect .tab .info_table .form-group{width:100%}
      #aiprospect .tab .info_table .form-group.table_top p{padding-left:2px}

      .find{padding-left:0}
      label[for="member_pass"]{margin-top:12px}
      .quotation_list li{height:145px}

      .mylist_box .list_wrap.type-02 > ul > li .inner_l{padding:15px 10px}
      .mylist_box .list_wrap > ul > li .inner_l .state_area .state span{margin-top:20px}
      .mylist_box .list_wrap > ul > li .inner_l .shipping p{font-size:16px}
      .mylist_box .list_wrap > ul > li .inner_l .date {margin: 5px 0 0; font-size: 13px}
      .mylist_box .list_wrap.type-02 > ul > li .inner_l .il_l strong{margin-top:5px}
      .mylist_box .list_wrap.type-02 > ul > li .inner_r,
      .mylist_box .list_wrap.type-02 > ul > li .inner_l .il_l{position:static}

      .mylist_box .list_wrap.type-02 > ul > li .inner_r{width:92%; margin:0 auto; border-top:1px solid #ddd}
            .mylist_box .list_wrap.type-02 > ul > li .inner_r:before{display:none}
      .mylist_box .form-group .list_wrap.type-02 > ul > li .inner_r p{padding-top:5px}
      .mylist_box .form-group{margin-bottom:0; padding-bottom:0}

      body.request_quotation.sub .cont_inner{    top: 70px; width: calc(100% - 40px);}


      .hide_table.portratation .add_table3 li p,
      .hide_table.portratation .add_table4 li p{min-height:40px; height:auto; padding:5px}
      .add_table3 li.li_title2 p, .add_table4 li.li_title2 p{line-height:1.2}
      .add_table4 li span{font-size:10px}



    }


    /***** 850px~ *****/
    @media (max-width:850px){
      .list_box{display: flex; flex-flow: row wrap; justify-content: space-between;}
      .list_box #map_area{padding-right:0}
      .list_box > div.form-group{min-width:100%}
      .vessels_list_box > div:nth-child(1){order:2}
      .vessels_list_box > div:nth-child(2){order:1}
      .vessels_list_box > div:nth-child(3){order:3}
      .vessels_list_box > div:nth-child(4){order:4}
      .list_box.list_box .form-group.portscall{margin-left:0}
      #vessels_list .cont_inner .cont_box{padding-left:5px; padding-right:5px}
      #ports_list .cont_inner .cont_box{padding-left:5px; padding-right:5px;}
      .ports_list_box .form-group.col-md-5{margin-right:0; margin-left:0}




    }

    @media (max-width:812px){

      #aiprospect .tabmenus ul{width:100%}
      #aiprospect .tabmenus ul li{width:33.333%}

      .cost_table td input{max-width:100%}
      .cost_table td .input{position:relative;}
      .cost_table td .input .percent{position:absolute; top:3px; right:3px}

    }


    /***** 768px~ *****/
    @media (max-width:768px){

      #header{text-align:center; padding:0}
      #header .logo{padding:0}
      #gnb{max-height:100vh; overflow:auto}

      #vessels table tbody tr td{font-size:10px}
      #vessels.sub .cont_inner .cont_box{padding:0}
      #vessels td .flag{display:block}
      #vessels table thead th{width:50px}
      #vessels table thead th:nth-child(1){width:60px}
      #vessels table thead th:nth-child(2){width:70px}
      #vessels table thead th:nth-child(3){width:70px}
      #vessels #search_box {width: calc(100% - 54px)}

      #ports table tbody tr td{font-size:10px}
      #ports.sub .cont_inner .cont_box{padding:0}
      #ports table colgroup col:nth-child(1){width:100px}
      #ports table colgroup col:nth-child(2){width:120px}
      #ports #search_box {width: calc(100% - 54px)}

      #footer{padding-left:0}
      #footer:before{display:none}

      .scope_area ul{margin-top:0}
      .scope_area ul li{    margin-bottom: 5px;}
      .scope_area ul li label,
      .introduce_box p{font-size:15px; }
      .scope_area ul li:last-child label{padding-top:3px}
      .sub .cont_inner .cont_box{padding-left:5px; padding-right:5px}
      .login_bg{font-size:25px}

      #cbcalculation .cont_box .table_area .totle_miles .form-group{width:325px}
      #cbcalculation .cont_box .table_area .totle_miles .form-group .control-label{width:110px; max-width:none; display:inline-block;}
      #cbcalculation .cont_box .table_area .form-group .input_box{width:calc(100% - 115px); padding-right:0}

    }



/* mobile */

  @media (max-width:700px){

    /** index **/
    .main_search_wrap{max-width:86%}
    .main_search_wrap input {font-size: 16px; width:calc(100% - 30px)}

    table.table01{min-width:700px}
    #portcalculator .cal_container  table.mt_20{min-width:700px}

    .sub#portcalculator .cont_inner .title_box{height:auto}
    .sub#portcalculator .cont_inner .title_box a.home{bottom:auto; top:15px;}
    #portcalculator .title_box .select_wrap{width:100%; margin:0 auto 10px; padding:0}
    #portcalculator .title_box .select_wrap select{width:49%}
    .sub#portcalculator .cont_inner .cont_box{padding:10px;height: calc(95vh - 145px)}

    #aiprospect .tabmenus ul li {width: 100%;line-height: 50px;  margin-bottom: 5px; border:1px solid #ddd}
    #aiprospect .tab .form-group,
    #aiprospect .tab .form-group .input_box{min-width:100%}
    #aiprospect .tab .form-group:nth-child(1) .col-md-3{width:100%}
    #aiprospect .tab .form-group .input_box{margin-bottom:15px}

    .scope_area ul li{width:100%}
    .scope_area ul li label{width:calc(100% - 80px)}

    .quotation_list{width:100%}
    .quotation_list li{width:48%; margin-right:4%; float:left}
    .quotation_list li:nth-child(2n){margin-right:0}

    #mypage .tabmenus{padding-bottom:0}
    #mypage .tabmenus ul{width:100%}
    #mypage .tabmenus ul li {width: 100%;line-height: 50px;  margin-bottom: 5px; border:1px solid #ddd}
    #mypage .tab .tab_inner{width:96%}
    #mypage .tab .tab_inner h3{font-size:23px}
    .form-group .class_box.input_box{width:100%}
    #mypage .tab03 .tab_inner p {font-size: 20px;}

    .request_box li:nth-child(2) .form-group .select-wrap{display:inline-block; width:100%}
    .request_box li:nth-child(2) .form-group.form-quantity{width:100%}
    .request_box li:nth-child(2) .form-group.form-quantity input{width:calc(100% - 160px)}
    .request_box li:nth-child(2) .form-group.form-quantity .select-wrap{width:160px}
    .request_box li:nth-child(2) .form-group.form-quantity .select-wrap select{width:100%}

    .request_box li:nth-child(2) .form-group.form-tarket .input{width:48%}
    .request_box li:nth-child(2) .form-group.form-tarket .input .dollar{display:inline-block; width:10px}
    .request_box li:nth-child(2) .form-group.form-tarket .input #priceSel{width:calc(100% - 20px)}
    .request_box li:nth-child(2) .form-group.form-tarket .select-wrap{width:160px}
    .request_box li:nth-child(2) .form-group.form-tarket .select-wrap select{width:100%}

    .request_box li .form-group .input_box .input span{width:auto; font-size:13px}
    .request_box li:nth-child(2) .form-group.cate_box .input_box > label.select-wrap{width:auto}




    /* .request_box li:nth-child(2) .form-group:nth-child(2) .select-wrap{}
    .request_box li:nth-child(2) .form-group:nth-child(8) .datetwo input{width:46%}
    .request_box li .form-group .input_box.date .input{width:46%} */



  }

    /***** 500px~ *****/
  @media (max-width:690px){

    /** header **/
    #header .logo { font-size: 18px}
    a.home {width: 15px;height: 15px}
    .btn_mo_menu{    left: -36px;    width: 20px;height: 17px;}
    .menu_right .class_basic {margin: 10px auto}
    .gnb_menu li, #gnb .footer-menu li{line-height:35px}
    #gnb .footer-menu{padding-top:0; margin-top:20px}
    #leftmenu{z-index:2}



    .main_search_wrap{top:25%}
    .main_search_wrap .main_schbox input{font-size:15px}
    #main #resulttop .sitem{position:relative;}
    #main .vesselinport{position:absolute; right:10px; font-size:12px}
    .main_search_wrap .main_schbox .btn_search{width:26px}

    #popup_notice .popup_content p {font-size: 12px}
    #popup_notice .popup_bottom {padding: 0 10px 10px}
    #popup_notice .popup_bottom span{font-size:10px}
    #popup_notice .popup_bottom .noticeclose {font-size: 10px; padding: 5px 0px 0px 10px}


    /** common **/
    .sub .cont_inner{width: calc(100% - 20px); top:55px}
    .sub .cont_inner .cont_box{padding-left:5px}
    .sub .cont_inner .title_box {height: 45px}
    .sub .cont_inner .title_box p {font-size: 14px;line-height: 45px}
    .popup{top:15%}
    .popup_header h3{font-size:16px}
    .popup_header .close {top: 18px}
    .form-group .input_box{height:auto;}
    .input_box .col-md-6{width:100%; max-width:100%; margin-right:0}


    /** sub **/
    #searchforbiz .info_table{overflow-x:auto;}
    #searchforbiz .info_table .table_top{max-width:100%; width:100%;min-width:800px}
    #searchforbiz .info_table table{min-width:800px}
    #searchforbiz .form-group.col-md-3.bb0.mb0.pb0{max-width:100%;margin-top:20px}
    #searchforbiz .form-group.col-md-3.bb0.mb0.pb0 .input_box{margin-top:5px }
    #searchforbiz .col-md-12.text-right.btn_wrap.float-right.bb0{margin-top:15px}
    #view_info table tbody th { font-size: 10px;padding: 8px 0 8px 5px}
    #view_info table td{font-size:10px}



    #portcalculator table th{font-size:11px}
    #portcalculator table th em{font-size:10px}

    table.table01 colgroup col:nth-child(1),
    table.table01 colgroup col:nth-child(5){max-width:11%}
    table.table01 colgroup col:nth-child(4){max-width:8%}
    table.table01 colgroup col:nth-child(3),
    table.table01 colgroup col:nth-child(2),
    table.table01 colgroup col:nth-child(6){width:auto; max-width:23%}
    table.table03 colgroup col:nth-child(1){width:20%}
    table.table03 colgroup col:nth-child(2){width:30%}
    table.table03 colgroup col:nth-child(3){width:50%}
    table.table03 tbody tr td:last-child{text-align:left}
    .table05 {margin-bottom:15px}
    #portcalculator table tbody tr td,
    .get_editor ul li label{font-size:12px}
    .get_editor ul li label input[type=radio],
    #portcalculator table td input[type="radio"]{margin-left:5px}
    #portcalculator table.table06 tbody tr td strong{display:block}
    #portcalculator table td select.cck{min-width:70px}
    #portcalculator .cal_container .in_area{padding:10px}
    #portcalculator table td{padding-left:5px !important}
    #portcalculator .cal_container .in_area p{font-size:10px}
    #portcalculator .cal_container .in_area p strong,
    #portcalculator .cal_container .in_area p.mb_10.title_h3{font-size:13px}
    #portcalculator .cal_container .in_area p input[type="checkbox"]{width:18px !important}
    #portcalculator .cal_container .in_area p input.cal_result{height:23px; display:inline-block;}
    #portcalculator .cal_container .list_area li{padding-left:0;font-size:12px}
    #portcalculator .cal_container .get_editor > div{width:33% !important;; margin-right:0.5% !important;}
    #portcalculator .cal_container .get_editor > div:nth-child(3){margin-right:0 !important}
    #portcalculator .cal_container .r_input{width:100px}
    #portcalculator .cal_container  table.mt_20.table03{min-width:0}


    #ports_list .pl_tab00{width:100%; overflow:auto}
    #ports_list .ps_tab00{width:100%; overflow:auto}

    #port_select_area,
    .ports_list_box .form-group.col-md-7{width:100%; overflow:hidden}
    #port_select_area .table_area .table_area,
    .ports_list_box .form-group.col-md-7 .table_area .table_area{width:100%; overflow:auto}
    #port_select_area .table_area table{min-width:800px; overflow:auto}
    .ports_list_box .form-group.col-md-7 .table_area table{min-width:500px; overflow:auto}
    .ports_list_box .tabmenus ul{height:35px; padding-left:5px}
    .ports_list_box .tabmenus ul li{height:35px; line-height:35px; font-size:12px;}
    .ports_list_box .tabmenus.pl_tab ul li{width:32.3%; margin:0}
    .ports_list_box .tabmenus ul li:nth-child(2){margin:0 1%}
    .ports_list_box .tabmenus.ps_tab ul li:nth-child(1){width:20%}
    .ports_list_box .tabmenus.ps_tab ul li:nth-child(2){width:32%}
    .ports_list_box .tabmenus.ps_tab ul li:nth-child(3){width:45%; margin-left:0}
    .table_area .table_bottom{font-size:12px}
    .table_area .btn_price{display:block; margin:15px auto; width:120px}

    #aiprospect.sub .cont_inner .cont_box{padding-left:5px; padding-right:5px}
    #aiprospect .info_table table{min-width:800px}

    .terms_popup{top:4%}
    .terms > li{font-size:14px}
    .terms > li h4{font-size:16px}
    .terms ol {padding: 10px 0 10px 15px; font-size:13px}

    .loginBox {width: 94%}
    .loginBox h3 {font-size: 24px}

    .mylist_box .form-group .input_box{padding-left:0}
    .mylist_box .form-group .list_wrap.type-02 > ul > li .inner_l .il_l span { font-size: 13px; width: auto; padding: 0 20px}
    .mylist_box .list_wrap.type-02 > ul > li .inner_l .il_l strong{display:inline-block; margin-top:0}
    .mylist_box .list_wrap > ul > li .inner_l .state_area .state{width:30%}
    .mylist_box .list_wrap > ul > li .inner_l .state_area .state span { margin-top: 15px; font-size: 11px}
    .mylist_box .list_wrap > ul > li .inner_l .shipping p {font-size: 13px}
    .mylist_box .list_wrap.type-02 > ul > li .inner_r br{display:none}
    .list_wrap.type-02 > ul > li .inner_r span{margin-top:5px}


    .date-wrap.col-md-5{max-width:46.5%}


    /** footer **/
    .footer_inner {padding: 10px}
    .ft-logo{margin-bottom:0}
    .comp_info li {font-size: 10px; line-height:1.4}
    .footer_box .footer-menu li:nth-child(1), .comp_info {width: calc(100% - 70px)}


    #cbcalculation .cont_box section{min-width:800px}
    #cbcalculation .cont_box h4 {font-size: 15px;  padding: 0 0 10px 5px}
    #cbcalculation .cont_box .table_area table thead th{height:30px; font-size:12px !important}
    #cbcalculation .cont_box .table_area table thead tr:nth-child(2) th {font-size: 12px !important; height: 30px; color: #666}
    #cbcalculation .cont_box .table_area table tbody tr th{font-size:10px; letter-spacing: -0.5px}
    .portratation td span{font-size:10px; padding-top:9px}
    .add_table3 li p, .add_table4 li p{background-color:#fff;}
    .add_table3, .add_table4{background-color:#f8f8f8}



  }

  @media (max-width:414px){

    /** index **/



    #popup_notice .popup_bottom .noticeclose {font-size: 10px; padding: 5px 0px 0px 10px}
    #popup_notice .popup_header {height: 40px; line-height: 42px; padding: 5px 10px}
    #popup_notice .popup_header .popupheaderimg {width: 25px; height: 25px; padding: 1px}
    #popup_notice .popup_content p {font-size: 12px}
    #popup_notice .popup_bottom {padding: 0 10px 10px}
    #popup_notice .popup_bottom span {font-size: 10px}
    #popup_notice .popup_bottom input{vertical-align: top; width:14px; height:14px}
    #popup_notice input[type="checkbox"]:after{width:14px; height:14px;margin-top:1px}


    /* portcalculator */
    #portcalculator.sub .cont_inner{overflow:hidden}
    #portcalculator .box_tit {font-size: 14px}
    /* .sub#portcalculator .cont_inner .cont_box{min-width:700px} */
    #portcalculator table tbody tr td, .get_editor ul li label{font-size:11px}

    #vessels .table_area table{min-width:700px}
    #vessels .search_box .page a {width: auto; min-width:20px; height: 20px; line-height: 20px; font-size: 10px}
    #vessels .search_box .page a.on{border:1px solid #ccc}
    #vessels .search_box .page a.bg{min-width:20px}
    #vessels .search_box .page .prev{margin-right:0;}
    #vessels .search_box .page .next{margin-left:0}

    .list_box > div table tbody tr td,
    .list_box table th{font-size: 10px}

    #ports .table_area table{min-width:700px}
    #ports .search_box .page a {width: auto; min-width:20px; height: 20px; line-height: 20px; font-size: 10px}
    #ports .search_box .page a.on{border:1px solid #ccc}
    #ports .search_box .page a.bg{min-width:20px}
    #ports .search_box .page .prev{margin-right:0;}
    #ports .search_box .page .next{margin-left:0}

    .ports_list_box .tabmenus ul li{padding:0}

    .scope_area{padding-top:20px}
    .scope_area ul li label, .introduce_box p{font-size:14px;}

    .adt thead th,
    .adt tbody th,
    .adt tbody tr td,
    #advertisement p.text-left{font-size:12px}

    #quotation .cont_box { padding: 40px 20px}

    #mypage .tab03 .btn_wrap .btn{width:100%; margin-right:0; margin-bottom:10px}

    .request_box li:nth-child(2) .form-group.form-tarket .select-wrap { width: 140px}









  }

  @media (max-width:400px){

        #main #resulttop .sitem .cright{width:auto}
        #main #resulttop .sitem .flags{width: 35px; height: 25px; margin-top:5px}
        #main #resulttop .sitem .typeicon {margin: 0 5px 0 0; width: 35px}

  }



  @media (max-width:375px){


    #ports td .flag{display:block}

  }
  @media (max-width:360px){

    .date-wrap.col-md-5 {max-width: 45.5%}
    .request_box li:nth-child(2) .form-group.form-tarket .select-wrap {width: 120px}
    .transfer {height: 30px}

  }


  /* mobile vertical */

  @media (max-height:812px){}
  @media (min-height:768px){}
  @media (min-height:375px){}



/*******************************************************************************
	@media
*******************************************************************************/

@media (min-width: 356px) and (max-width: 460px) {
    /* #wrapper {max-width:460px;}
    #header {height:60px;}
    #header h1 {width:150px; padding-top:24px}

    #header div.all_cate {position:absolute; top: 12px; width:42px;}
    #header .hw_btn{position:absolute; right:60px; top:12px; height:42px; background-size:50%;}
    #header .hw_btn a{font-size:13px; letter-spacing:-0.5pt; line-height:16px; padding-top:5px}


    .menu li a:link, .menu a:visited{font-size:14px; letter-spacing:-0.5pt; padding:14px 0; line-height:16px;}



        .footer_in p{line-height:18px; color:#c2c2c2; padding:0 0 17px 0; font-size:12px;}
        .footer_in span{color:#8f8f8f; font-size:12px; line-height:18px}
        .footer_in a{color:#8f8f8f;font-size:12px; letter-spacing:0.1pt; }

        .foot_btn a{ display:block; float:right;  margin-right:2px; width:30%;}

    #navCategory > ul > li > a {font-size:14px; line-height:100%;} */

    }




    /*******************************************************************************
        @media 320px~ 460px
    *******************************************************************************/

    /* @media all and (max-width:355px) {



    #wrapper {max-width:460px;}
    #header {height:60px;}
    #header h1 {width:150px; padding-top:24px}

    #header div.all_cate {position:absolute; top: 12px; width:42px;}
    #header .hw_btn{position:absolute; right:60px; top:12px; height:42px; background-size:50%; }
    #header .hw_btn a{font-size:13px; letter-spacing:-0.5pt; line-height:16px; padding-top:5px}

    .menu li a:link, .menu a:visited{font-size:14px; letter-spacing:-0.5pt; padding:14px 0; line-height:16px;}
    .menu li.longtxt a:link, .menu .menu_bn li.longtxt a:visited{padding:7px 0}
    .menu li.longtxt a span{display:block;}


        .footer_in p{line-height:18px; color:#c2c2c2; padding:0 0 17px 0; font-size:12px;}
        .footer_in span{color:#8f8f8f; font-size:12px; line-height:18px}
        .footer_in a{color:#8f8f8f;font-size:12px; letter-spacing:0.1pt; }

        .foot_btn a{ display:block; float:right;  margin-right:2px; width:30%;}

    #navCategory > ul > li > a {font-size:14px; line-height:100%;} */



/*******************************************************************************
	@media 461px~640px
***************************************************************************
****/
/* @media all and (min-width:461px) and (max-width:640px) {
    .dna_banner li a{display:block; text-align:center; color:#fff; font-size:18px; line-height:18px; padding:60px 0}


    }
     */


    /*******************************************************************************
        @media 320px~ 460px
    *******************************************************************************/
    /* @media all and (max-width:460px) {


    .dna_banner li a{display:block; text-align:center; color:#fff; font-size:15px; line-height:18px; padding:40px 0}
    .quick li a{color:#444; letter-spacing:-0.5pt; line-height:100%; font-size:13px;}
    }


    @media all and (max-width:320px) {

    .dna_banner li a{display:block; text-align:center; color:#fff; font-size:15px; line-height:18px; padding:25px 0}
    .quick li a{color:#444; letter-spacing:-0.5pt; line-height:100%; font-size:13px;}


    } */