/*@charset "utf-8";*/



/*********************************************/
/* notokr-thin:100;
   notokr-light:300;
   notokr-regular:500;
   notokr-medium:700;
   notokr-bold:900; */
/********************************************/





/********************************************************************************************************************/
/* 공통 */
/********************************************************************************************************************/

/* 공통 */
#wrap { min-width: 1280px; }

.section { margin: 0 auto; width: 1280px; padding: 0 42px; }

a,
button { transition: all .3s; }


/* wave */
@keyframes move_wave {
  0% { transform: translateX(0) translateZ(0) scaleY(1) }
  50% { transform: translateX(-25%) translateZ(0) scaleY(0.55) }
  100% { transform: translateX(-50%) translateZ(0) scaleY(1) }
}

.waveWrapper { min-width: 1280px; overflow: hidden; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; z-index: -1; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00152c+0,162d46+32,1f364f+69,041629+100 */ background: #00152c; /* Old browsers */ background: -moz-linear-gradient(-45deg, #00152c 0%, #162d46 32%, #1f364f 69%, #041629 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #00152c 0%,#162d46 32%,#1f364f 69%,#041629 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #00152c 0%,#162d46 32%,#1f364f 69%,#041629 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00152c', endColorstr='#041629',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ /*background: #00152c url('../images/common/bg_icon.png') repeat-x center top 54px;*/ }
.waveWrapper.bg-login { background: #00152c url('../images/common/bg_icon.png') repeat-x center top 54px; }

.waveWrapper.bg-login:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: url('../images/common/bg_icon.png') repeat-x center top 54px; z-index: 999; }
.waveWrapper.main { height: 546px; bottom: inherit; }





.waveWrapperInner { position: absolute; width: 100%; overflow: hidden; height: 100%; bottom: -1px; /* background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%); */ /* background:#152c45;  */ }
.bgTop { z-index: 15; opacity: 0.5; }
.bgMiddle { z-index: 10; opacity: 0.75; }
.bgBottom { z-index: 5; }
.wave { position: absolute; left: 0; width: 200%; height: 100%; background-repeat: repeat no-repeat; background-position: 0 bottom; transform-origin: center bottom; }
.waveTop { background-size: 50% 150px; }
.waveAnimation .waveTop { background-image: url('../images/common/wave-top.png'); animation: move_wave 20s linear infinite; }
.waveMiddle { background-size: 50% 200px; }
.waveAnimation .waveMiddle { background-image: url('../images/common/wave-mid.png'); animation: move_wave 30s linear infinite; }
.waveBottom { background-size: 40% 150px; }
.waveAnimation .waveBottom { background-image: url('../images/common/wave-bot.png'); animation: move_wave 40s linear infinite; }









/* 헤더 */
#header { height: 70px; background-color: #081829; }
#header .left { float: left; }
#header .left .logo { float: left; margin-top: 5px; }
#header .left .logo a { display: inline-block; width: 112px; height: 60px; background: url('../images/common/logo.png') no-repeat; text-indent: -9999px; }
#header .left .gnb { float: left; margin-left: 80px; }
#header .left .gnb li { float: left; }
#header .left .gnb li a { display: inline-block; font-size: 16px; color: #fff; font-weight: 900; line-height: 70px; }
#header .left .gnb li a:hover { color: #ff9e8d; }

#header .left .gnb li + li { margin-left: 60px; }


#header .right { float: right; }
#header .right .user { float: left; position: relative; margin-top: 18px; padding-left: 42px; font-size: 14px; color: #fff; line-height: 32px; }
#header .right .user em { font-size: 14px; color: #fff; line-height: 32px; }
#header .right .user:before { content: ''; position: absolute; top: 0; left: 0; width: 32px; height: 32px; background: #43576c url('../images/common/ico_user.png') no-repeat 50%; border-radius: 100%; }


#header .right .logout { float: left; margin-left: 42px; margin-top: 25px; width: 18px; height: 18px; background: url('../images/common/ico_logout.png') no-repeat 50%; text-indent: -9999px; }
#header .right .btn-sitemap { float: left; margin-left: 20px; margin-top: 25px; width: 18px; height: 16px; background: url('../images/common/btn_sitemap.png') no-repeat 50%; text-indent: -9999px; }




/* 메인 */

.main-top { /*margin-top:80px;*/ /*margin-bottom:90px;*/ }
.main-top .section { position: relative; /*margin-top: 80px;*/ /*margin-bottom: 90px;*/ }
.main-top .section .main-date { padding: 0 70px; position: relative; padding-top: 80px; }
.main-top .section .main-date .inner { position: relative; padding-right: 424px; width: 100%; }

.main-top .section .main-date .top { padding-bottom: 20px; border-bottom: 1px solid #415368; }
.main-top .section .main-date .top strong { float: left; font-size: 20px; color: #cbe6f8; font-weight: 900; }
.main-top .section .main-date .top .btn-area { float: right; font-size: 0; }
.main-top .section .main-date .top .btn-area a { display: inline-block; width: 90px; line-height: 30px; height: 32px; border-radius: 50px; font-size: 13px; color: #fff; text-align: center; background-color: #081829; }
.main-top .section .main-date .top .btn-area a + a { margin-left: 12px; }
.main-top .section .main-date .top .btn-area a:before { content: ''; display: inline-block; margin-right: 4px; width: 16px; height: 16px; vertical-align: -3px; }
.main-top .section .main-date .top .btn-area a:first-child:before { background: url('../images/common/btn_refresh.png') no-repeat 50%; }
.main-top .section .main-date .top .btn-area a:last-child { background-color: #3d536a; }
.main-top .section .main-date .top .btn-area a:last-child:before { background: url('../images/common/btn_restart.png') no-repeat 50%; }


.timebox { float: left; }
.timebox .row > li { float: left; }
.timebox .row > li .txt { display: block; margin-top: 12px; font-weight: 700; font-size: 14px; color: #919ba6; text-align: center; }


.timebox .row > li + li { position: relative; margin-left: 28px; }
.timebox .row > li + li:before { content: ''; position: absolute; left: -18px; top: 25px; width: 8px; height: 18px; background: url('../images/common/img_time.png') no-repeat 50%; }


.timebox .row > li .time { overflow: hidden; }
.timebox .row > li .time li { float: left; width: 60px; height: 70px; line-height: 68px; background-color: #273e55; border-radius: 5px; font-size: 40px; color: #fff; font-weight: 900; text-align: center; }
.timebox .row > li .time li + li { margin-left: 4px; }


.timebox-area { margin-top: 60px; }
/*.timebox-area .prevVm {
        float: left;
        width: 22px;
        height: 70px;
        margin-right: 50px;
        background: url('../images/common/btn_prev.png') no-repeat 50%;
        cursor : pointer;
    }
    .timebox-area .nextVm {
        float: right;
        width: 22px;
        height: 70px;
        background: url('../images/common/btn_next.png') no-repeat 50%;
        cursor: pointer;
    }*/



/*.model-num{ margin-top:56px; text-align:center;   }*/
.model-num { top: 240px; text-align: center; position: absolute; left: 180px; }
.model-num .txt { display: inline-block; padding-left: 28px; background: url('../images/common/ico_model.png') no-repeat 0 50%; font-size: 18px; color: #fff; font-weight: 700; min-width: 150px; }
.model-num .state { display: inline-block; margin-left: 28px; width: 100px; height: 36px; line-height: 34px; font-size: 18px; color: #fff; font-weight: 700; border-radius: 25px; text-align: center; background-color: #ed4101; }




.main-board-area { float: left; width: 870px; overflow: hidden; padding-top: 40px; }
.main-board { margin: 0 -15px; }
.main-board > li { float: left; position: relative; width: 50%; padding: 0 15px; }
.main-board > li .btn-more { position: absolute; top: 5px; right: 15px; width: 24px; height: 24px; background: #dc092c url('../images/common/btn_more.png') no-repeat 50%; border-radius: 3px; text-indent: -9999px; }
.main-board .tit-area { padding-bottom: 8px; }
.main-board .tit-area .tit { font-size: 20px; color: #222; font-weight: 900; }




/*.board{  }*/
.board { border-top: 2px solid #5f6671; }
.board li { display: table; width: 100%; height: 48px; table-layout: fixed; }
.board li + li { border-top: 1px solid #dadada; }
.board li .left { display: table-cell; width: 80%; vertical-align: middle; }
.board.st2 li .left { width: 100%; }
.board li .subject { display: inline-block; max-width: 90%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 14px; color: #222; font-weight: 700; }
.board li .subject:hover { text-decoration: underline; }
.board li .right { display: table-cell; width: 95px; vertical-align: middle; text-align: right; }
.board li .date { font-size: 13px; color: #666; text-align: right; }


.main_new { display: inline-block; width: 16px; height: 16px; line-height: 16px; border-radius: 2px; background-color: #ef7c06; font-size: 10px; color: #fff; font-weight: 900; text-align: center; vertical-align: 5px; margin-left: 7px; }

/*.main-btm {
    display: inline !important;
    position: static;
}*/




.main-btm .main-info { float: right; width: 290px; margin-top: 15px; }
.main-btm .main-info li + li { margin-top: 10px; }
.main-btm .main-info li .ibtn { position: relative; display: block; padding: 0 30px; height: 70px; line-height: 70px; border: 1px solid #ccc; border-radius: 5px; }
.main-btm .main-info li .ibtn:hover { background-color: #fff8f6; }

.main-btm .main-info li .ibtn:after { content: ''; position: absolute; right: 30px; top: 50%; margin-top: -20px; width: 40px; height: 40px; background: #efefef url('../images/common/ico_download.png') no-repeat 50%; border-radius: 100%; }
.main-btm .main-info li .ibtn span { display: inline-block; padding-left: 58px; line-height: 70px; font-size: 16px; font-weight: 700; background-repeat: no-repeat; background-position: 0 50%; }


.main-btm .main-info li .ibtn span.ico01 { background-image: url('../images/common/btn_maininfo01.png'); }
.main-btm .main-info li .ibtn span.ico02 { background-image: url('../images/common/btn_maininfo02.png'); }


.main-btm .main-info li .number { padding: 0 9px; height: 70px; line-height: 70px; border-radius: 5px; background-color: #0e243c; font-size: 16px; color: #ccc; }
.main-btm .main-info li .number span { margin-left: 10px; font-size: 16px; color: #fff; line-height: 70px; font-weight: 900; }

#visual_wrap { width: 100%; /*height: 478px;*/ height: 476px; position: relative; }

#visual_wrap .visual_area { width: 1264px; margin: 0 auto; height: 100%; }






/* .pulse-animation {

  margin: 50px;
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ff8717;
  cursor: pointer;
  -moz-box-shadow: 0 0 0 0 rgba(237,65,1, 0); 
	transition:all .2s


	position:absolute; 
	top:50%; 
	margin-top:;
	right:0;
	width:200px;
	height:200px;
	background-color:#ed4101;
}

.pulse-animation:hover {
   animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(237,65,1, 0.4);
    box-shadow: 0 0 0 0 rgba(237,65,1, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 30px rgba(237,65,1, 0);
    box-shadow: 0 0 0 30px rgba(237,65,1, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(237,65,1, 0);
    box-shadow: 0 0 0 0 rgba(237,65,1, 0);
  }
} */





/*.pulse-multiple {
    overflow: hidden;
    position: fixed;
    top: 20%;
    
    right: 429px;
    width: 260px;
    height: 260px;
    background-color: rgba(237,65,1,.2);
    border-radius: 100%;
    border: 1px solid #ed4101;
    outline: none;
}*/


.pulse-multiple { overflow: hidden; position: absolute; top: 106px; /*/*margin-top:-64px;*/ right: 70px; width: 260px; height: 260px; background-color: rgba(237,65,1,.2); border-radius: 100%; border: 1px solid #ed4101; outline: none; }
.pulse-multiple em { overflow: hidden; position: absolute; top: 50%; margin-top: -100px; right: 50%; margin-right: -100px; width: 200px; height: 200px; background-color: #ed4101; border-radius: 100%; line-height: 200px; color: #fff; font-weight: 900; font-size: 30px; text-align: center; }

.pulse-multiple:hover { animation: pulse 0.6s infinite ease-out; }



@keyframes pulse {
  0% { -moz-box-shadow: 0 0 0 0 rgba(237,65,1, 0.4); box-shadow: 0 0 0 0 rgba(237,65,1, 0.4); }
  70% { -moz-box-shadow: 0 0 0 30px rgba(237,65,1, 0); box-shadow: 0 0 0 30px rgba(237,65,1, 0); }
  100% { -moz-box-shadow: 0 0 0 0 rgba(237,65,1, 0); box-shadow: 0 0 0 0 rgba(237,65,1, 0); }
}




.gps_ring { border: 3px solid #999; -webkit-border-radius: 30px; height: 18px; width: 18px; position: absolute; left: 20px; top: 214px; -webkit-animation: pulsate 1s ease-out; -webkit-animation-iteration-count: infinite; opacity: 0.0 }

@-webkit-keyframes pulsate {
  0% { -webkit-transform: scale(0.1, 0.1); opacity: 0.0; }
  50% { opacity: 1.0; }
  100% { -webkit-transform: scale(1.2, 1.2); opacity: 0.0; }
}



/* 로그인 */
.login-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.login-area .logo a { position: absolute; top: 30px; left: 50px; width: 112px; height: 60px; background: url('../images/common/logo.png') no-repeat; text-indent: -9999px; }
.login-box { position: absolute; left: 50%; margin-left: -220px; top: 50%; margin-top: -290px; width: 400px; height: 580px; padding: 64px 40px 48px; background-color: #30465d; border-radius: 25px; box-sizing: border-box; -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.25); -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.25); box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.25); }
.login-box .title { margin-bottom: 35px; font-size: 24px; color: #cbe6f8; font-weight: 900; text-align: center; }



.login-box .inpbox li + li { margin-top: 10px; }

.login-box .inpbox li input { overflow: hidden; width: 100%; height: 50px; border-radius: 5px; border: 0; background-color: #42556a; font-size: 16px; color: #fff; font-weight: 700; background-position: 26px 50%; background-repeat: no-repeat; border: 1px solid #414c58; outline: none; }
/*.login-box .inpbox li input[type="text"]{ padding-left:64px; background-image:url('../images/common/ico_login_id.png'); }
.login-box .inpbox li input[type="password"]{ padding-left:64px; background-image:url('../images/common/ico_login_password.png'); }
    .login-box .inpbox li input[type="vFrontOTP"] {
        padding-left: 64px;
        background-image: url('../images/common/ico_login_password.png');
    }*/
.login-box .inpbox li .loginId { padding-left: 64px; background-image: url('../images/common/ico_login_id.png'); }

.login-box .inpbox li .password { padding-left: 64px; background-image: url('../images/common/ico_login_password.png'); }

.login-box .inpbox li .vFrontOTP { padding-left: 64px; background-image: url('../images/common/ico_login_password.png'); width: 70%; }

.login-otp { width: 70%; }
.login-box .inpbox li input::-webkit-input-placeholder { color: rgba(255,255,255,.2); font-weight: 500 }
.login-box .inpbox li input::-moz-placeholder { color: rgba(255,255,255,.2); font-weight: 500; }
.login-box .inpbox li input:-ms-input-placeholder { color: rgba(255,255,255,.2); font-weight: 500; }
.login-box .inpbox li input:-moz-placeholder { color: rgba(255,255,255,.2); font-weight: 500; }
.btn-login { display: block; height: 50px; line-height: 48px; margin-top: 25px; font-size: 16px; color: #fff; font-weight: 900; text-align: center; background-color: #ed4101; border-radius: 5px; }
.btn-login:hover { background-color: #f46936; }

.otp_btn_area { display: inline-block; height: 50px; width: 26%; margin-left: 3%; line-height: 44px; font-size: 16px; color: #fff; font-weight: 900; text-align: center; background-color: #ed4101; border-radius: 5px; }

.otp_btn_area:hover { background-color: #f46936; }



.btn-guide-area { text-align: right; margin-top: 18px; }
.btn-guide-area a { display: inline-block; padding-right: 22px; font-size: 14px; color: #aaa; background: url('../images/common/ico_guide.png') no-repeat right 1px center; }
.btn-guide-area a:hover { color: #fff; }



.prog-btn { overflow: hidden; margin-top: 18px; }
.prog-btn li { float: left; width: 50%; }
.prog-btn li:first-child { padding-right: 5px; }
.prog-btn li:last-child { padding-left: 5px; }
.prog-btn li a { display: block; height: 45px; line-height: 43px; color: #ded3cf; text-align: center; font-size: 13px; color: #ded3cf; border: 1px solid #ded3cf; border-radius: 5px; }
.prog-btn li a:hover { border-color: #fff; color: #fff; }

.login-footer { margin-top: 32px; }
.login-footer .caption { font-size: 13px; color: #aaa; text-align: center; }
.login-footer .copyright { margin-top: 4px; font-size: 13px; color: #777; text-align: center; }


.login_info { text-align: center; margin-top: 30px; }

.login_info span { color: red; font-size: 14px; }






#contents_wrap { width: 100%; min-height: 100%; background: #fff; margin: 0 0 35px 0; display: inline-block; }

#contents_wrap h3 { height: 38px; font-size: 26px; color: #00152c; font-weight: bold; margin: 15px 0 10px; letter-spacing: -0.5px; cursor: pointer; }


#contents_wrap .history_wrap { height: 41px; }

#contents_wrap .history_wrap .history_area { margin: 0 auto; width: 1264px; line-height: 41px; }

#contents_wrap .history_wrap .history_area .history { margin-left: 60px; font-size: 13px; float: right; margin-right: 33px; }

#contents_wrap .history_wrap .history_area .history img { vertical-align: middle; margin-top: -2px; }

#contents_wrap .history_wrap .history_area .history span.mark { display: inline-block; text-indent: -9999px; width: 7px; height: 13px; background: url(../image/history_mark_ico.png) no-repeat; margin: 0 20px; vertical-align: middle; }

#contents_wrap .history_wrap .history_area .history span.text { color: #000000; }

#contents_wrap .sub_title_wrap.type01 { height: 100px; }

#contents_wrap .sub_title_wrap.type01 .sub_title_area { margin: 0 auto; width: 1264px; height: 100%; /*background: url(../image/new/base_bg.png) no-repeat center 0;*/ }

#contents_wrap .sub_title_wrap.type02 { background-color: #486478; height: 155px; border-top: 2px solid #3f596c; border-bottom: 1px solid #3f596c; }

#contents_wrap .sub_title_wrap.type02 .sub_title_area { margin: 0 auto; width: 1264px; height: 100%; /*background: url(../image/new/base_bg.png) no-repeat center 0;*/ }

#contents_wrap .sub_title_wrap .sub_title_area .title_area { text-align: center; padding-top: 15px; }

#contents_wrap .sub_title_wrap .sub_title_area .title_area .line_ico { display: block; width: 44px; height: 2px; background: #e34f1b; margin-bottom: 21px; }

#contents_wrap .sub_title_wrap .sub_title_area .title_area h3 { display: inline-block; font-size: 28px; color: #2a2a2a; }

#contents_wrap .sub_title_wrap.type01 .sub_title_area .title_area h3 span { display: block; font-size: 14px; color: #d4ebf6; margin-top: 17px; border: 1.5px solid #d4ebf6; line-height: 25px; padding: 0 20px; }

#contents_wrap .sub_title_wrap.type02 .sub_title_area .title_area h3 span { display: block; font-size: 14px; color: #d4ebf6; margin-top: 17px; border: 1.5px solid #d4ebf6; line-height: 25px; padding: 0 20px; }

#contents_wrap .content_area { position: relative; width: 1180px; margin: 0 auto; padding: 10px 0; }



/* button_style */

.board_bottom.bt_type01 { position: absolute; top: 0; right: 0; }

.board_bottom.bt_type { position: relative; overflow: hidden; padding-top: 20px; }

.btngroup { clear: both; overflow: hidden; }

.BtnGroupL { float: left; }

.BtnGroupC { position: relative; text-align: center; }

.BtnGroupR { float: right; }

a.btn01 { display: inline-block; min-width: 38px; height: 38px; line-height: 38px; padding: 0 30px; background: #425563; text-align: center; font-size: 15px; }
a.btn01 span { color: #fff; font-weight: 900; }

a.btn01:hover { display: inline-block; height: 38px; line-height: 38px; color: #fff; padding: 0 30px; background: #2b4a60; text-align: center; font-size: 15px; }
a.btn01:hover span { color: #fff; font-weight: 900; }
a.btn02 { display: inline-block; min-width: 38px; height: 38px; line-height: 38px; color: #fff; padding: 0 30px; background: #aeaeae; text-align: center; font-size: 15px; }
a.btn02 span { color: #fff; font-weight: 900; }
a .btn02:hover { display: inline-block; height: 38px; line-height: 38px; color: #fff; padding: 0 30px; background: #9e9e9e; text-align: center; font-size: 15px; }
a .btn02:hover span { color: #fff; font-weight: 900; }

.mR10 { margin-right: 10px; }


.rolling_img_area { width: 1064px; float: left; height: 342px; }

.rolling_img_area .inner { width: 889px; height: 262px; margin: 35px 75px 0 100px; }


.bx-prev { /*position: absolute;
    background: url(../image/main_img_prev_ico.png);
    width: 37px;
    height: 64px;
    top: 165px;
    z-index: 1;
    margin-top: 30px;*/ float: left; width: 22px; height: 70px; margin-right: 40px; background: url('../images/common/btn_prev.png') no-repeat 50%; cursor: pointer; }


.bx-next { /*position: absolute;
    background: url(../image/main_img_next_ico.png);
    width: 37px;
    height: 64px;
    top: 165px;
    z-index: 1;
    margin-top: 30px;*/ float: right; width: 22px; height: 70px; background: url('../images/common/btn_next.png') no-repeat 50%; cursor: pointer; }


/*.btm{
    width : 600px;
}*/