* {
         padding: 0;
         margin: 0;
     }
     #popuplayer {
         position: fixed;
         top: 150px;
         left: 150px;
         width: 500px;
         border: 1px solid #333;
         background-color: #29559f;
         z-index: 999999;
     }
     .clse {
         position: relative;
         width: 100%;
         height: 30px;

     }

     .clse p {
         position: absolute;
         right: 0;
         width: 60px;
         height: 30px;
         line-height: 30px;
         text-align: center;
         cursor: pointer;
         color: #fff;
     }



     .clse p:hover {
         background-color: #2a66cc;
     }
     .popupInfo {
         width: 100%;
         background-color: #fff;
     }

     .popupInfo ul{
         width: 100%;
     }

     .popupInfo ul li {
         padding: 15px 15px 15px 15px;
         font-size: 16px;
     }

     #dialog-confirm ol {
         margin-top: 10px;
     }

     #dialog-confirm ol li {
         display: inline;
     }
     #dialog-confirm ol li a {
         display: block;
         width: 100%;
         height: 70px;
         line-height: 70px;
         text-align: center;
         color: #fff;
         font-weight: 600;
         text-decoration: none;
         background-color: #29559f;
         border-bottom: 1px solid #464c5e;
     }

     #dialog-confirm ol li a:hover {
         background-color: #2a66cc;
     }

     .bordernone {
         border-bottom: none;
     }


     .allClse {
         text-align: right;
         color: #fff;
     }
     .allClse input[type="checkbox"] {
         vertical-align: middle;
     }

     #dialog-confirm {
         line-height: 1.45em;
     }

     #first-confirm-popup {
         ;
     }

     #first-confirm-popup img{
         width: 100%;
     }


     #second-confirm-popup img{
         width: 100%;
     }

 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed,
 figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
     text-decoration: none;
     list-style: none;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
     display: block;
 }
 body {
     line-height: 1;
     font-family:  "Nanum Gothic", sans-serif;
 }
 ol, ul {
     list-style: none;
 }
 blockquote, q {
     quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
     content: '';
     content: none;
 }
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }

clearfix {
  *zoom: 1; }
  .clearfix:after {
    display: block;
    clear: both;
    content: ''; }

.inner {
  width: 970px;
  margin: 0 auto; }

.sr_only {
  position: absolute;
  left: -99999px; }

#wrap {
  width: 100%; }

/*------------- standard Set ------------*/
.loginBox {
  width: 430px;
  height: 610px;
  margin: 150px auto 0;
  background-color: #b8b8b8; }
  .loginBox > .loginBox_TopBar {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: #4272b2; }
    .loginBox > .loginBox_TopBar > ul {
      position: absolute;
      bottom: 0;
      left: 50%;
      margin-left: -150px;
      width: 300px;
      height: 40px;
       }
      .loginBox > .loginBox_TopBar > ul > li {
        float: left;
        width: 150px;
        height: 40px;
        background-color: #535151; }
        .loginBox > .loginBox_TopBar > ul > li.on {
          background-color: #fff; }
        .loginBox > .loginBox_TopBar > ul > li > a {
          display: block;
          width: 100%;
          height: 100%;
          line-height: 40px;
          text-align: center;
          font-size: 14px;
          font-weight: 600;
          color: #b9b9b9;
          letter-spacing: 1.5px; }
          .loginBox > .loginBox_TopBar > ul > li > a.on {
            color: #4272b2; }
  .loginBox > .loginBox_BotBar {
    position: relative;
    width: 100%;
    height: 560px;
    background-color: green; }
    .loginBox > .loginBox_BotBar > .ocean {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      z-index: 100; }
      .loginBox > .loginBox_BotBar > .ocean > .hellow {
        width: 100%;
        height: 200px; }
        .loginBox > .loginBox_BotBar > .ocean > .hellow > h3 {
          position: relative;
          padding-top: 80px;
          text-align: center;
          font-size: 45px;
          font-weight: 600;
          color: #4272b2; }

          .loginBox > .loginBox_BotBar > .ocean > .hellow > .hellow_name {
              padding-top: 10px;
              font-size: 16px;
              color: #222;
              text-align: center;
              font-weight: 600;
          }
          /* .loginBox > .loginBox_BotBar > .ocean > .hellow > h3:after {
            position: absolute;
            bottom: -25px;
            left: 50%;
            transform: translateX(-50%);
            width: 235px;
            font-size: 16px;
            color: #222;
            content: '이곳은 국제해양정보시스템입니다'; } */
      .loginBox > .loginBox_BotBar > .ocean > .id_pw {
        width: 100%;
        height: 90px; }
        .loginBox > .loginBox_BotBar > .ocean > .id_pw > div > ul {
          height: 45px; }
          .loginBox > .loginBox_BotBar > .ocean > .id_pw > div > ul > li {
            float: left;
            font-size: 17px;
            font-weight: 600;
            color: #4272b2;
            line-height: 45px;
            text-align: center; }
            .loginBox > .loginBox_BotBar > .ocean > .id_pw > div > ul > li:first-child {
              width: 100px;
              height: 100%; }
            .loginBox > .loginBox_BotBar > .ocean > .id_pw > div > ul > li > input {
              display: block;
              width: 300px;
              height: 30px;
              margin-top: 5px;
              padding-left: 10px;
              border: 1px solid #4272b2;
              color: #222;
              letter-spacing: 2px; }
        .loginBox > .loginBox_BotBar > .ocean > .id_pw > .id_section {
          width: 100%;
          height: 45px; }
        .loginBox > .loginBox_BotBar > .ocean > .id_pw > .pw_section {
          width: 100%;
          height: 45px; }
      .loginBox > .loginBox_BotBar > .ocean > .remember_id {
        position: relative;
        width: 100%;
        height: 30px;
        line-height: 30px; }
        .loginBox > .loginBox_BotBar > .ocean > .remember_id > input[type="checkbox"] {
          width: 20px;
          height: 20px;
          padding: 0;
          margin: 0;
          position: absolute;
          top: 6px;
          right: 120px;
          background-color: transparent;
          border: 2px solid #4272b2;
          overflow: hidden; }
        .loginBox > .loginBox_BotBar > .ocean > .remember_id > label {
          position: absolute;
          top: 0px;
          right: 20px;
          }
          .loginBox > .loginBox_BotBar > .ocean > .remember_id > label > span {
            font-size: 13px; }
      .loginBox > .loginBox_BotBar > .ocean > .login_Sign {
        width: 100%;
        height: 110px; }
        .loginBox > .loginBox_BotBar > .ocean > .login_Sign > div {
          width: 400px;
          height: 40px;
          margin: 0 auto; }
        .loginBox > .loginBox_BotBar > .ocean > .login_Sign > .login {
          text-align: center;
          margin-top: 5px;
          margin-bottom: 10px;
          background-color: #4272b2; }
          .loginBox > .loginBox_BotBar > .ocean > .login_Sign > .login > a {
            display: block;
            line-height: 40px;
            font-size: 16px;
            letter-spacing: 3px;
            color: #fff; }
            .loginBox > .loginBox_BotBar > .ocean > .login_Sign > .login > input {
            display: block;
            width : 100%;
            height : 100%;
            line-height: 40px;
            font-size: 16px;
            letter-spacing: 3px;
            color: #fff;
            background-color : #29559f;
            border : none;
            outline : none;
            cursor : pointer;
            }
        .loginBox > .loginBox_BotBar > .ocean > .login_Sign > .sign {
          position: relative;
          text-align: center;
          background-color: #4272b2; }
          .loginBox > .loginBox_BotBar > .ocean > .login_Sign > .sign > a {
            display: block;
            line-height: 40px;
            font-size: 16px;
            letter-spacing: 3px;
            color: #fff; }
          .loginBox > .loginBox_BotBar > .ocean > .login_Sign > .sign:after {
            position: absolute;
            bottom: -35px;
            left: 50%;
            transform: translateX(-13%);


            }
         .msg {
             margin-right: 20px;
             padding-top: 10px;
             float: right;
             width: 200px;
             font-size: 12px;
             line-height: 1.4em;
             text-align: right;
         }
      .loginBox > .loginBox_BotBar > .ocean > .logo {
        margin: 40px auto 0;
        width: 182px;
        height: 62px;
        text-indent: -99999px;
        background-image: url(/images/new/logo.png);
        background-repeat: no-repeat;
        background-size: contain; }
    .loginBox > .loginBox_BotBar > .ocean {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      }



      #footer {
       margin-top: 89px;
        width: 100%;
        height: 100px;
        background: #191919; color: #fff;
    }

       h1 {float: left; display: block; margin-top: 13px; margin-left: 100px;width: 108px; height: 72px; text-indent: -99999px; background-image: url(/images/new/f_logo.png); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;}
       address {position: relative; float: left; margin-left: 30px; margin-top: 13px;}
       .topic { font-size: 22px; margin-bottom: 10px; font-weight: 600; letter-spacing: 3px;}
       .f_info {width: 100%;}
       .f_info ul {;}
       .f_info ul li {display: block; font-size: 12px; font-weight: normal; line-height: 1.7em;}
       .w3c {position: absolute; top: 10px; right: -100px; width: 77px; height: 59px; background-image: url(/images/new/w3c.png); background-size: cover; text-indent: -99999px;}

     .mVisual_img {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
     .mVisual_img ul li{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; text-indent: -99999px;}
     .mVisual_img ul li.img01 {background-image: url(/images/new/img01.jpg);}
     .mVisual_img ul li.img02 {background-image: url(/images/new/img02.jpg);}
