@font-face {
    font-family: 'scdream';
    font-weight: 100;
    font-style: normal;
    src: url(/font/SCDream1.woff) format('woff');
}
@font-face {
    font-family: 'scdream';
    font-weight: 200;
    font-style: normal;
    src: url(/font/SCDream2.woff) format('woff');
}
@font-face {
    font-family: 'scdream';
    font-weight: 300;
    font-style: normal;
    src: url(/font/SCDream3.woff) format('woff');
}
@font-face {
    font-family: 'scdream';
    font-weight: 400;
    font-style: normal;
    src: url(/font/SCDream4.woff) format('woff');
}

@font-face {
    font-family: 'scdream';
    font-weight: 500;
    font-style: normal;
    src: url(/font/SCDream5.woff) format('woff');
}@font-face {
    font-family: 'scdream';
    font-weight: 600;
    font-style: normal;
    src: url(/font/SCDream6.woff) format('woff');
}
@font-face {
    font-family: 'scdream';
    font-weight: 700;
    font-style: normal;
    src: url(/font/SCDream7.woff) format('woff');
}
@font-face {
    font-family: 'scdream';
    font-weight: 800;
    font-style: normal;
    src: url(/font/SCDream8.woff) format('woff');
}
@font-face {
    font-family: 'scdream';
    font-weight: 900;
    font-style: normal;
    src: url(/font/SCDream9.woff) format('woff');
}


:root {
    --fsize-small:0.7rem;
    --fsize-bsmall:0.8rem;
    --fsize-sbasic:0.9rem;
    --fsize-basic:1rem;
    --fsize-mid:1.3rem;
    --font-menu:1.2rem;
    --font-title:3.6rem;
    --font-stitle:2.2rem;
    --font-body:1.15rem;
    --color-reds:#E85D1C;
    --color-yellows:#FFE618;
    --color-blues:#35C9EA;
    --color-greens:#00BCA1;
    --color-violet:#5B5AAA;

    --color-font-basic:#4A4A4A;
    --color-good:#29CC97;
    --color-bad:#FB104A;
}

html {
    font-size: 16px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: 'scdream' !important;
}

body {
    font-family: 'scdream' !important;
    font-weight:400;
    font-size: 16px;
}

.container-full{width:100%;}
.container {
    width:100%;
    padding-right: 10%;
    padding-left: 10%;
    margin-right: auto;
    margin-left: auto;
}

.btns {
    display: inline-block;
    padding: 9px 34px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 4px;
    font-weight: 500;
}

.btns-wide {
    display: inline-block;
    padding: 11px 80px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 4px;
    font-weight: 500;
}

.btns-full {
    display: inline-block;
    padding: 12px 34px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 4px;
    font-weight: 500;
    width:100%;
}

.btns-primary {
    color: #fff;
    background-color: #065AD8;
    border:2px solid #065AD8;
    margin:0 10px;
}

.btns-primary:hover {
    color: #065AD8;
    background-color: #fff;
    border:2px solid #054db9;
}

.btn {
    display: inline-block;
    padding: 11px 26px !important;
    margin-bottom: 0;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 6px;
}

.btn-small {
    display: inline-block;
    padding: 6px 20px !important;
    margin-bottom: 0;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 4px;
    min-width:105px;
}

button{border:0px;}

.btn-mid {
    display: inline-block;
    padding: 16px 70px !important;
    margin-bottom: 0;
    font-size: 1.4rem !important;
    font-weight: 500 !important;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 6px;
}

.btn-big {
    display: inline-block;
    padding: 12px 70px !important;
    margin-bottom: 0;
    font-size: 1.8rem !important;
    font-weight: 500 !important;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 6px;
}

.btn-xbig {
    display: inline-block;
    padding: 20px 70px !important;
    margin-bottom: 0;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 6px;
}

.btn-black{
    color: #fff !important;
    background-color: #000000;
    border:2px solid #000;
}

.btn-black:hover{
    color: #000 !important;
    background-color: rgba(255, 255, 255, 0);
    border:2px solid #000;
}

.btn-white{
    color: #000 !important;
    background-color: #fff;
    border:2px solid #000;
}

.btn-white:hover{
    color: #fff !important;
    background-color: #000;
    border:2px solid #000;
}

.btn-black{
    color: #fff !important;
    background-color: #000000;
    border:2px solid #000;
}

.btn-blue{
    color: #fff !important;
    background-color: #2136ac;
    border:2px solid #2136ac;
}

.btn-dark{
    color: #fff !important;
    background-color: #3f3f3f;
    border:2px solid #3f3f3f;
}

.btn-red{
    color: #fff !important;
    background-color: #E85D1C;
    border:2px solid #E85D1C;
}

.btn-green{
    color: #fff !important;
    background-color: #0c7566;
    border:2px solid #0c7566;
}

.btn-violet{
    color: #fff !important;
    background-color: #3a398b;
    border:2px solid #3a398b;
}




h2{font-size: 3rem;}
h3{font-size: 2.2rem;}
h4{font-size: 1.7rem;}
h5{font-size: 1.5rem;}
h6{font-size: 1.0rem;}
p{font-size: 1.1rem;}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
    margin: 0 0 15px;
    letter-spacing: -1px; 
  }

.fl-row{display: flex; flex-direction: row; align-items: center;}
.fl-col{display: flex; flex-direction: column;}
.fl-center{display: flex; justify-content: center; align-items: center;}
.row {
    margin-right: 0px;
    margin-left: 0px;
}

.tl-center{text-align: center !important;}
.tl-left{text-align: left !important;}
.bot_btn_area{display: flex; justify-content: flex-end; margin:10px 0 0 0 !important; }



/*------------------------------------------------------------------
  	오션시작
------------------------------------------------------------------*/

.alram_memo{height:200px;}




/*로그인*/
.loginFrm{width:100%; height:100vh; display: flex; justify-content: center; align-items: center;}
.loginFrm .card{width:60%; border:1px solid #cccccc; padding:0px; border-radius: 15px;}

@media (max-width: 1200px) {
    .loginFrm .card{width:80%;}
}
@media (max-width: 960px) {
    .loginFrm .card{width:90%;}
}

@media (max-width: 460px) {
    .loginFrm .card{width:90%;}
}

.loginFrm .card .card-body{padding:0px;}
.loginFrm .card .card-body form{display: flex; flex-direction: row; }
.loginFrm .card .loginLeft{width:40%; background-color: #065AD8; border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loginFrm .card .loginLeft{ background-image: url('/img/login_left_bg.png');
background-position: right top;
background-repeat: no-repeat;}
.loginFrm .card .loginLeft img{margin-right:25px;}
.loginFrm .card .loginRight{width:60%; padding:20px 30px 20px 10px;}
.loginFrm .card .loginRight h6{margin:30px 0 0px 0; font-weight:400;}
.loginFrm .card .loginRight h6 bold{font-weight:700;}
.loginFrm .card .loginRight hr{margin-bottom:30px;}
.loginFrm .card .loginRight h3{display: inline-block; width:100%; text-align: center; margin-bottom:10px; font-weight: 700;}
.loginFrm .card .loginRight input{margin:10px 0;}
.loginFrm .card .loginRight button{margin:20px 0;}


/*헤더*/

.container {
    width: 100% !important;
    padding-right: 5%;
    padding-left: 5%;
    margin-right: auto;
    margin-left: auto;
}

.container-full {
    width: 100% !important;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 100% !important;
    }
}
.navbar-brand img{height:36px; width:auto;}
.sub_right_logo img{height:36px; width:auto;}

/*서브헤더*/
.sub_title{font-size: 1.5rem; font-weight:300; }
.sub_title bold{font-weight: 700;}

.sub_header{display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: #F5F6FA; height:60px;
    padding-right: 5%; padding-left: 5%;border-top:1px solid #E5E8F1; border-bottom:1px solid #E5E8F1; margin-bottom: 50px;}

.sub_header .sheader_left{display: flex; flex-direction: row; justify-content: space-around; align-items: center; height:60px;}




/*Home*/
.sub_header .sheader_left div{font-size:0.8rem; font-weight: 500;}

.stat_1{display: flex; align-items: center; margin-right: 30px;}
.state_good_ic{width:14px; height:14px; border-radius: 7px; background-color: #29CC97; display: inline-block; margin-right: 5px; }

.stat_2{display: flex; align-items: center; }
.state_bad_ic{width:14px; height:14px; border-radius: 7px; background-color: #FB104A; display: inline-block; margin-right: 5px; }
.sheader_right {display: flex; flex-direction: row;}
.sheader_right a{font-size:0.8rem; font-weight: 500; text-decoration: none;}

a.top_menu{text-decoration: none; font-size:0.8rem; font-weight: 500; color: inherit; display: flex;  align-items: center; margin-right:20px;}
span.icons{font-weight: 600; font-size: 1.2rem; padding: 0 5px;}


#clock{margin-left:30px;}

.home_state{padding:0 5%;}
.ikcard-area{padding:30px 20px; background-color: #F5F6FA; border:1px solid #D1D4DE; border-radius: 5px; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap;}



.ikcard{background-color: #fff; border: 1px solid #ddd; border-radius: 4px; padding:5px 10px; min-width:24%; margin:1.5% 0.5%}
.ikcard .card_head{display: flex; justify-content: space-between; padding:5px 0; margin:5px 0 10px 0;}
.ikcard .card_head .comm_state{font-size:0.6rem; font-weight:500; display: flex; justify-content: center; align-items: center; padding:3px 10px;}
.ikcard .card_head .comm_good{background-color: #E2F6F0; border:1px solid #98C5B6; border-radius: 2px; }
.ikcard .card_head .comm_bad{background-color: #F6E8EC; border:1px solid #CD95A3; border-radius: 2px; }
.ikcard .card_body{background-color: #F1F1F1; border:1px solid #E2E2E2; border-radius: 5px; padding:10px 15px; }
.ikcard  a{font-size: 0.8rem; text-decoration: none; color: var(--color-font-basic);}
.ikcard .card_body p{font-size: 0.8rem; color: var(--color-font-basic);}
.ikcard .card_foot{font-size: 0.8rem; margin-top:10px;}
.ikcard .card_foot strong{font-size: 1.3rem; font-weight: 700;}

/*푸터*/
#footer{height:120px; background-color: #013684; display: flex; flex-direction: row; justify-content: center; align-items: center; margin-top:100px; color:#fff;}
#footer .copyright{width: 100%;  display: flex;  justify-content: center;  align-items: center;}

#footer .copy_left{font-size:0.8rem; font-weight:200; letter-spacing: 1px; font-family: 'scdream'; margin-right:5%;}
#footer .copy_left bold{font-weight: 700;}

#footer .copy_right{display: flex; flex-direction: row;    align-items: center;}
#footer span.partner_box{ display: flex; justify-content: center; align-items: center; padding: 6px 25px; background-color: #fff; color: #013584;
    border-radius: 16px; font-size: 0.8rem; font-weight: 500; margin-right: 20px;}

#footer .copy_right ul{margin:0; padding: 0; }
#footer .copy_right ul li{list-style: none; float:left; font-size:0.8rem; font-weight:200; margin-right:50px;}



/*모니터링*/
.sheader_left .monitor_title{background-color: #065AD8; border-radius: 4px; padding:6px 15px;  color:#fff;display: flex; align-items: center; justify-content: flex-start;}
.sheader_left .monitor_title span{width:32px; height:32px; border-radius: 16px; background-color: #fff;display: flex;  justify-content: center;  align-items: center;
    margin-right: 10px;}
.sheader_left .monitor_title span img{width:24px; height:auto;}


.monitor-area{display: flex; flex-direction: column; padding:0 5%;}
.monitor-area .cctv_area{display: flex; flex-direction: row; width:100%; padding-left:0px; padding-right:0px;}
.monitor-area .cctv_area .cctv_view{width:50%; border:1px solid #ddd; border-radius: 10px; padding:15px; text-align: center;}
.monitor-area .cctv_area .state_area_blank{width:5%; display: inline-block;}
.monitor-area .cctv_area .cctv_state{width:45%; border:1px solid #ddd; border-radius: 10px; padding:15px; }
.monitor-area .cctv_area .cctv_state .state_area{display: flex; flex-direction: row;}
.monitor-area .cctv_area .cctv_state img.cctvImage{width:100%;}
.monitor-area .cctv_area .cctv_view embed{width:100% !important;}
.monitor-area .cctv_area .cctv_view img{width:100% !important;}
#cctvFrame img {
    width: 100% !important;  /* 이미지 너비를 부모의 100%로 설정 */
    height: auto !important; /* 비율에 맞게 높이를 자동 조정 */
}
#cctvFrame body{background-color: #000;}

.monitor-area .cctv_area .cctv_state h6{font-weight: 700; font-size:1.2rem;}
.monitor-area .cctv_area .cctv_state .state_area .state_area_data{display: flex; flex-direction: column; width:65%; padding-right:25px;}
.monitor-area .cctv_area .cctv_state .state_area .state_area_data .state_area_data_per{display: flex; flex-direction: row; justify-content: center; align-items: flex-end; background-color: #F5F6FA; border:1px solid #D3D8EA; border-radius: 5px; padding:10px 0;}
.monitor-area .cctv_area .cctv_state .state_area .state_area_data .state_area_data_per h1{margin: 0 10px 0 0; color:var(--color-bad); font-weight: 800;}
.monitor-area .cctv_area .cctv_state .state_area .state_area_data .state_area_data_per h6{margin:0px; margin:0 0 5px 0;}

.monitor-area .cctv_area .cctv_state .state_area .state_area_data .state_area_data_table{margin-top:10px;}
.monitor-area .cctv_area .cctv_state .state_area .state_area_data .state_area_data_table dl{display: flex; flex-direction: row; margin:0px;}
dl.data_top{border-top: 2px solid #9797D3; border-left: 1px solid #9797D3; border-bottom: 1px solid #9797D3;}
dl.data_bot{border-bottom: 2px solid #9797D3; border-left: 1px solid #9797D3;}
.monitor-area .cctv_area .cctv_state .state_area .state_area_data .state_area_data_table dl dt{width:30%; background-color: #DCDCF2; font-size: 0.7rem; font-weight: 500; text-align: center; padding:8px 0;}
.monitor-area .cctv_area .cctv_state .state_area .state_area_data .state_area_data_table dl dd{width:20%; font-size: 0.7rem; font-weight: 700; text-align: center; border-left: 1px solid #9797D3; border-right: 1px solid #9797D3; padding:8px 0; margin:0px;}

#modalic{cursor:pointer;}

.monitor-area .cctv_area .cctv_state .state_area .state_area_status{width:35%; border-radius: 10px; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.good{background-color: #065AD8; }
.bad{background-color: #d85a06; }
.worst{background-color: #da0707; }


.monitor-area .cctv_area .cctv_state .state_area .state_area_status img{margin-top:15px; width:40%; height: auto;   color: #fff;}
.monitor-area .cctv_area .cctv_state .state_area .state_area_status p{color:#fff; font-weight:500; margin-top:5px; font-size:1.0rem;}

.monitor-area .cctv_area .cctv_state .alram_area{margin-top:20px; background-color: #F5F6FA; border:1px solid #D3D8EA; border-radius: 10px; padding:15px;}
.monitor-area .cctv_area .cctv_state .alram_area span{background-color: #FB104A; font-size: 0.8rem; font-weight:600; padding:5px 16px; border-radius: 14px; color:#fff;}
.monitor-area .cctv_area .cctv_state .alram_area p{font-size: 0.9rem; margin-top: 10px;}

@media screen and (min-width: 1201px){
    .monitor-area .cctv_area_multi{display: grid; grid-template-columns: repeat(3, 33%); row-gap: 20px;  column-gap: 10px; width:100%}
}

@media only screen and (min-device-width : 800px) and (max-device-width : 1200px) {
    .monitor-area .cctv_area_multi{display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 20px;  column-gap: 10px; width:100%}
}
@media screen and (max-width: 540px){

}
.monitor-area .cctv_area_multi .cctv_area_col{display: flex; justify-content: center;}
.monitor-area .cctv_area_multi .cctv_area_col .cctv_view_box{width:550px; cursor: pointer;}
.monitor-area .cctv_area_multi .cctv_area_col .cctv_view_box img{width:100%; height:auto;} 
.monitor-area .cctv_area_multi .cctv_area_col .cctv_view_box .cctv_view_box_top{background-color: rgba(208, 224, 248, 0.8); display: flex; flex-direction: row; justify-content: flex-start; 
    align-items: center; padding:10px; border-top-left-radius: 5px; border-top-right-radius: 5px; border:1px solid #96b3dd;}
.monitor-area .cctv_area_multi .cctv_area_col .cctv_view_box .cctv_view_box_top h6{font-size: 0.8rem; font-weight: 600; color: #000; margin: 0 0 0 5px; letter-spacing: 0px;}


/*스피너추가*/
.cctv_view_box {
    overflow: hidden;
    position: relative;
}


.cctv_view_box_body {
    position: relative;
    width: 100%;
    height: 310px; /* 적절히 조정 가능 */
}

.loading-spinner {
    position: absolute;
    top: 40%;
    left: 45%;
    transform: translate(-40%, -45%);
    width: 40px;
    height: 40px;
    border: 4px solid #ccc;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
}

.cctvImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/*엔트*/
@media (min-width: 576px) {
    #cctvmodal .modal-dialog {
        max-width: 1800px;
        margin: 1.75rem auto;
    }
}

    #cctvmodal .cctv_area{display: flex; flex-direction: row; width:100%; padding-left:0px; padding-right:0px;}

/* @media screen and (min-width: 600px){
    #cctvmodal .cctv_area{height: 570px;
        background-color: #000;}
} */

#cctvmodal .cctv_area .cctv_view{width:65%; border:1px solid #ddd; border-radius: 10px; padding:15px; text-align: center;
    overflow: hidden;
    height: 564px;
    background-color: #000;
}

#cctvmodal .cctv_area .cctv_view img{width: auto;
    height: 100%;
    object-fit: cover;
}
#cctvmodal .cctv_area .state_area_blank{width:2%; display: inline-block;}
#cctvmodal .cctv_area .cctv_state{width:33%; border:1px solid #ddd; border-radius: 10px; padding:15px; }
#cctvmodal .cctv_area .cctv_state .state_area{display: flex; flex-direction: column;}
#cctvmodal .cctv_area .cctv_state img.cctvImage{width:100%;}
#cctvmodal .cctv_area .cctv_view embed{width:100% !important;}


#cctvmodal .cctv_area .cctv_state h6{font-weight: 700; font-size:1.2rem;}
#cctvmodal .cctv_area .cctv_state .state_area .state_area_data{display: flex; flex-direction: column; width:100%;}
#cctvmodal .cctv_area .cctv_state .state_area .state_area_data .state_area_data_per{display: flex; flex-direction: row; justify-content: center; align-items: flex-end; background-color: #F5F6FA; border:1px solid #D3D8EA; border-radius: 5px; padding:10px 0;}
#cctvmodal .cctv_area .cctv_state .state_area .state_area_data .state_area_data_per h1{margin: 0 10px 0 0; color:var(--color-bad); font-weight: 800;}
#cctvmodal .cctv_area .cctv_state .state_area .state_area_data .state_area_data_per h6{margin:0px; margin:0 0 5px 0;}

#cctvmodal .cctv_area .cctv_state .state_area .state_area_data .state_area_data_table{margin-top:10px; margin-bottom: 10px;}
#cctvmodal .cctv_area .cctv_state .state_area .state_area_data .state_area_data_table dl{display: flex; flex-direction: row; margin:0px;}
#cctvmodal .cctv_area .cctv_state .state_area .state_area_data .state_area_data_table dl dt{width:20%; background-color: #DCDCF2; font-size: 0.7rem; font-weight: 500; text-align: center; padding:8px 0;}
#cctvmodal .cctv_area .cctv_state .state_area .state_area_data .state_area_data_table dl dd{width:30%; font-size: 0.7rem; font-weight: 700; text-align: center; border-left: 1px solid #9797D3; border-right: 1px solid #9797D3; padding:8px 0; margin:0px;}


/* #cctvmodal .cctv_area .cctv_state .state_area .state_area_status{width:35%; border-radius: 10px; display: flex; justify-content: center; align-items: center; flex-direction: column;}
#cctvmodal .cctv_area .cctv_state .state_area .state_area_status img{margin-top:15px; width:40%; height: auto;   color: #fff;}
#cctvmodal .cctv_area .cctv_state .state_area .state_area_status p{color:#fff; font-weight:500; margin-top:5px; font-size:1.0rem;}
*/


#cctvmodal .cctv_area .cctv_state .state_area .state_area_stat{display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top:20px;
border:1px solid #ddd; border-radius: 15px; height: 203px;}
#cctvmodal .cctv_area .cctv_state .state_area .state_area_stat .state_area_stat_img{width:30%; display: flex; flex-direction: column; justify-content: center; align-items: center; height:100%;
    border-top-left-radius: 15px;  border-bottom-left-radius: 15px;}
#cctvmodal .cctv_area .cctv_state .state_area .state_area_stat .state_area_stat_img img{margin-top:15px; width:40%; height: auto;   color: #fff;border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;}
#cctvmodal .cctv_area .cctv_state .state_area .state_area_stat .state_area_stat_img p{color:#fff; font-weight:500; margin-top:5px; font-size:1.0rem;}
#cctvmodal .cctv_area .cctv_state .state_area .state_area_stat .state_area_stat_msg{width:70%; display: flex; flex-direction: column; justify-content: flex-start; padding: 15px 15px 15px 30px;}
#cctvmodal .cctv_area .cctv_state .state_area .state_area_stat .state_area_stat_msg .msg-title{padding: 10px 0 5px 0;
    font-size: 0.8rem;
    font-weight: 500;}
#cctvmodal .cctv_area .cctv_state .state_area .state_area_stat .state_area_stat_msg .msg-area textarea{height:80px;}
#cctvmodal .cctv_area .cctv_state .state_area .state_area_stat .state_area_stat_msg .msg-btn{text-align: center;}

#cctvmodal .cctv_area .cctv_state .alram_area{margin-top:20px; background-color: #F5F6FA; border:1px solid #D3D8EA; border-radius: 10px; padding:15px;}
#cctvmodal .cctv_area .cctv_state .alram_area span{background-color: #FB104A; font-size: 0.8rem; font-weight:600; padding:5px 16px; border-radius: 14px; color:#fff;}
#cctvmodal .cctv_area .cctv_state .alram_area p{font-size: 0.9rem; margin-top: 10px;} 

.btn-msg {
    display: inline-block;
    padding: 10px 34px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 4px;
    font-weight: 500;
    width:100%;
    color: #fff;
    background-color: #065AD8;
    margin:10px 0;
}

















.monitor-area .can_area{background-color: #F5F6FA; border:1px solid #D1D4DE; border-radius: 10px; padding:15px; width:100%;
    display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin:20px 0px; }
.monitor-area .can_area .ikcard2{background-color: #ffffff; border:1px solid #E0E0E0; border-radius: 10px; display: flex; flex-direction: column; padding:10px; width:16%; margin:0 1%;}
.monitor-area .can_area .ikcard2 h5{font-weight: 700; font-size: 1.2rem; margin-bottom: 5px;}
.monitor-area .can_area .ikcard2 .canonoff{width:100%; display: flex; flex-direction: row;  margin-bottom: 5px;}

.monitor-area .can_area .ikcard2 .canonoff .canonoffbox1{width:50%; display: flex; justify-content: center; align-items: center; font-size:1.2rem; font-weight: 800; padding:5px 0;
    border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.monitor-area .can_area .ikcard2 .canonoff .canonoffbox2{width:50%; display: flex; justify-content: center; align-items: center; font-size:1.2rem; font-weight: 800; padding:5px 0;
    border-top-right-radius: 5px; border-bottom-right-radius: 5px; padding:5px 0; border-left:1px solid #fff;}

.monitor-area .can_area .ikcard2 .canonoff .on{background-color: #065AD8; color:#fff;  }
.monitor-area .can_area .ikcard2 .canonoff .noton{width:50%; background-color: #DFE0EB; color:#000; display: flex; justify-content: center; align-items: center; font-size:1.2rem; font-weight: 800;
    border-top-left-radius: 5px; border-bottom-left-radius: 5px; padding:5px 0;}

.monitor-area .can_area .ikcard2 .canonoff .off{background-color: #DFE0EB; color:#000; }

.monitor-area .can_area .ikcard2 dl{display: flex; flex-direction: row; padding:0; margin:0px;}
.monitor-area .can_area .ikcard2 dl dt{width:50%; font-size: 0.8rem; font-weight:500; display: flex; justify-content: center; align-items: center; padding: 6px 0;}
.monitor-area .can_area .ikcard2 dl dd{width:50%; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; padding: 4px 10px 4px 20px; margin-bottom: 0px; border-bottom:1px solid #ddd;}
.dtbg1{background-color: #DCF2EB;}
.dtbg2{background-color: #F2E6DC;}
.dtbg3{background-color: #DCDCF2;}

.monitor-area .can_area .ikcard2 .cantable{border-top:1px solid #ddd;border-left:1px solid #ddd;border-right:1px solid #ddd;}

#alertModal .modal-title{font-size: 1.1rem; font-weight: 700;}
#alertModal .modal-body h6{font-size:0.8rem; font-weight: 400; letter-spacing: 0;}
#alertModal .modal-body .msg-area textarea{height: 120px;}
#alertModal .modal-body .msg-bot{text-align: center; margin: 10px 0 5px 0;}


#calendar .fc-center h2{font-size: 1.8rem;}
#calendar .fc-button-group .fc-state-default{color: #000000;  background-color: #ffffff !important;  border-color: #eee; font-size: 0.9rem; background-image: none; }
#calendar .fc-button-group .fc-state-default:hover{color: #fff;  background-color: #2136ac !important; }
#calendar .fc-button-group span.fc-icon{font-size:0.9rem;}
#calendar .fc-icon-left-single-arrow:after {
    content: "\2039";
    font-weight: bold;
    font-size: 160% !important;
    top: -7%;
}
#calendar .fc-icon-right-single-arrow:after {
    content: "\203A";
    font-weight: bold;
    font-size: 160% !important;
    top: -7%;
}
#calendar .fc-today-button{font-size: 0.75rem !important;  min-height: 30.23px !important;}
.fc table {
    font-size: 0.9rem !important;
}

.fc th{padding:6px 0 !important; font-weight:500;}

.fc-unthemed td.fc-today {
    background: #e3f3fc !important;
}
.fc-day-grid-event {
    padding: 5px 4px !important;
}
/* .fc-event, .fc-event-dot {
    background-color: #3a45ad !important;
} */

.fc-toolbar .fc-left {
    padding-top: 15px;
}
.bot{padding: 15px 5% 0 5%; text-align: right;}

.state_sea {padding:0px 8px; color:#fff; background-color: #3a45ad; border-radius: 2px; font-size: 0.7rem; line-height: 1.2rem; margin-right: 5px;}
.state_water{padding:0px 8px; color:#fff; background-color: #ad683a; border-radius: 2px; font-size: 0.7rem; line-height: 1.2rem; margin-right: 5px;}

.ikcard-area-water{padding:15px 20px; background-color: #f1f1f1; border:1px solid #D1D4DE; border-radius: 5px; display: flex; 
    flex-direction: row; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.ikcard-area-water dl{display: flex; flex-direction: row; font-size:0.8rem; margin-bottom: 0px; display: flex;  align-items: center;} 
.ikcard-area-water dl dt{font-weight: 500; padding-right:10px;margin:0; display: flex;  align-items: center;}
.ikcard-area-water dl dd{margin:0;}
.list-table{padding:0px; margin-top: 30px;}
table.watertb, table.watertb2 {width:100%;}
table.watertb, table.watertb th, table.watertb td, table.watertb2, table.watertb2 th, table.watertb2 td {
    border: 1px solid #eee;
  }

  
table.watertb thead tr th{text-align: center; font-size:0.8rem; padding:10px 0; text-align: center; color:#fff; background-color: #000000; font-weight: 500; }
table.watertb thead tr th:nth-child(1){width:5%;}
table.watertb thead tr th:nth-child(2){width:15%;}
table.watertb thead tr th:nth-child(3){width:15%;}
table.watertb thead tr th:nth-child(4){width:30%;}
table.watertb thead tr th:nth-child(5){width:20%;}
table.watertb thead tr th:nth-child(6){width:15%;}


table.watertb tr td{font-size:0.8rem; padding:10px 10px 10px 15px; color:#000; background-color: #fdfdfd; font-weight: 400; }
table.watertb tr td:nth-child(1){text-align: center;}
table.watertb tr td:nth-child(2){text-align: left;}
table.watertb tr td:nth-child(3){text-align: left;}
table.watertb tr td:nth-child(4){text-align: left;}
table.watertb tr td:nth-child(5){text-align: center;}
table.watertb tr td:nth-child(6){text-align: center;}


table.watertb2 tr th{text-align: center; font-size:0.8rem; padding:10px 0; text-align: center; color:#fff; background-color: #000000; font-weight: 500; }
table.watertb2 tr th:nth-child(1){width:5%;}
table.watertb2 tr th:nth-child(2){width:15%;}
table.watertb2 tr th:nth-child(3){width:15%;}
table.watertb2 tr th:nth-child(4){width:6%;}
table.watertb2 tr th:nth-child(5){width:6%;}
table.watertb2 tr th:nth-child(6){width:6%;}
table.watertb2 tr th:nth-child(7){width:6%;}
table.watertb2 tr th:nth-child(8){width:6%;}
table.watertb2 tr th:nth-child(9){width:6%;}
table.watertb2 tr th:nth-child(10){width:29%;}


table.watertb2 tr td{font-size:0.8rem; padding:10px 10px 10px 15px; color:#000; background-color: #fdfdfd; font-weight: 400; }
table.watertb2 tr td:nth-child(1){text-align: center;}
table.watertb2 tr td:nth-child(2){text-align: left;}
table.watertb2 tr td:nth-child(3){text-align: left;}
table.watertb2 tr td:nth-child(4){text-align: center;}
table.watertb2 tr td:nth-child(5){text-align: center;}
table.watertb2 tr td:nth-child(6){text-align: center;}
table.watertb2 tr td:nth-child(7){text-align: center;}
table.watertb2 tr td:nth-child(8){text-align: center;}
table.watertb2 tr td:nth-child(9){text-align: center;}
table.watertb2 tr td:nth-child(10){text-align: center;}


.waterstate h6{background-color: #eef2f8; padding:10px 20px; margin-bottom:30px;}
.waterstate h6 bold{font-weight:600; padding-bottom:20px;}
.waterstate h6 .form-inline-group{display: flex; flex-direction: row; justify-content: space-between; margin-top: 10px;}

.tips{font-size: 0.8rem; text-align: left; padding:10px;}

/*------------------------------------------------------------------
  	오션끝
------------------------------------------------------------------*/



@media screen and (max-width: 559px){
    .navbar-toggler{display: none !important;}
    .navbar-brand img {
        height: 20px;
        width: auto;
    }
    .navbar-brand {
         margin-right: 0px;
    }
    .sub_right_logo img {
        height: 20px;
        width: auto;
    }

    .sub_title {
        font-size: 1rem; letter-spacing: -1px;
        font-weight: 300;
    }
    .sub_header {
        padding-right: 3%;
        padding-left: 3%;
        margin-bottom: 30px;
        justify-content: flex-end;
    }

    .ikcard {
        width: 100%;
    }
    .ikcard-area {
        padding: 10px;
    }

    .row {
        margin-right: 0px;
        margin-left: 0px;
    }

    .row>* {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    #login .container{padding:0px; margin: 0;}
    #login .card-body form{flex-direction: column;}
    .loginFrm .card .loginLeft {
        width: 100%;
        background-color: #065AD8;
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px 0;
    }

    .loginFrm .card .loginLeft img {
        width: 30%;
        height: auto;
    }
    .loginFrm .card .loginRight h6 {
        margin: 10px 0 20px 0;
        font-weight: 400;
    }
    .loginFrm .card .loginRight {
        width: 100%;
        padding: 20px 30px 20px 30px;
    }

    .monitor-area .cctv_area {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .monitor-area .cctv_area .cctv_view {
        width: 100%;
        margin-bottom:30px;
    }

    .monitor-area .cctv_area .cctv_view img {
        width: 100%;
    }

    .monitor-area .cctv_area .cctv_state {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 15px;
    }
    .monitor-area .cctv_area .cctv_state .state_area .state_area_data .state_area_data_per {
        padding: 5px 0;
    }
    .monitor-area .cctv_area .cctv_state .state_area .state_area_data {
        width: 60%;
        padding-right: 10px;
    }
    .monitor-area .cctv_area .cctv_state .state_area .state_area_status {
        width: 40%;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: auto;
    }

    .monitor-area .can_area {
        background-color: #F5F6FA;
        border: 1px solid #D1D4DE;
        border-radius: 10px;
        padding: 15px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin: 20px 0px;
    }

    .monitor-area .can_area .ikcard2 {
        width: 100%;
        margin: 0 1%;
    }





    #footer {
        height: auto;
        padding:30px 15px;
        margin-top: 50px;
        color: #fff;
    }
    #footer .copyright {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    #footer .copy_right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 15px;
    }
    #footer span.partner_box {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 3px 25px;
        background-color: #fff;
        color: #013584;
        border-radius: 16px;
        font-size: 0.9rem;
        font-weight: 500;
        margin-right: 20px;
        margin-bottom: 5px
    }

   

























    











}


































/*메인*/

/*------------------------------------------------------------------
  	[Header]
------------------------------------------------------------------*/
/* Fixed Top */
@media screen and (min-width: 560px){
    .navbar-fixed-top .navbar-collapse {
        max-height: 100%;
    }

    .carousel-centered {
        position: absolute;
        top: 50%;
        left: 20%;
    }




}





/* Navbar */
.header .navbar {
margin-bottom: 0;
height:80px;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}


.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
    height: 80px;
    background-color: #fff;
}
.header .logo {
    width: 15%;
    height: auto;
    max-height: 50px;
    line-height: 26px;
}
.header .logo a{
    color: #000;
    font-size: 26px;
    font-weight: 700;
    font-family: 'scdream';
    display: flex;
    align-items: center;
    height: 80px;
}
.header .nav-item-child {
    font-family: 'scdream';
    font-size: 1.2rem;
    font-weight: 600;
    color: inherit;
    line-height: 18px;
    padding: 12px;
    color:#000;
}

.mt-110{margin-top:110px !important;}
.mt-50{margin-top:50px !important;}
.mt-80{margin-top:80px !important;}
.mt-100{margin-top:100px !important;}

.navbar-nav .nav-group-center li a.nav-item-child:hover{color:var(--color-reds);}
.header .navbar .container{ display: flex; justify-content: space-between; }

.header .navbar .container .nav-left{width:15%;}
.header .navbar .container .navbar-collapse {width: 85%;}
.header .navbar .container .navbar-collapse .nav-right{width:100%;}
.header .logo { width: 100%;}


.header .navbar-nav-right {display: flex; flex-direction: row; width: 100%;  justify-content: flex-end; padding: 18px 0 0 0;}
.nav-group-center{display: flex; flex-direction: row; width:60%; justify-content:space-around;}
.nav-group-right{display: flex; flex-direction: row; width:30%; justify-content: flex-end;}
.nav-group-right li a{margin-left:18px;}

.carousel-inner .main-first{background-color:#FFE618 ;}
.carousel-inner .sub-first{background-color:var(--color-greens) ;}
.full-screen {
    background-size: auto;
    background-position: right bottom;
    background-repeat: no-repeat;
}

dl dt strong{color: rgb(201, 1, 1);}
.carousel-centered h3{padding-left:10px; width:80%; color:#000; margin-bottom:0px !important;}
.carousel-centered .btn{font-size:22px !important; font-weight:600; padding:20px 100px !important; margin-left:16px;}
.carousel-centered .btn:hover{background-color: #cc4202 !important; border:2px solid #cc4202 !important; color: #fff !important;}
.regular{font-weight:400;}
.thin{font-weight:200;}

.carousel-title {
    font-size: 5rem;
    font-weight: 700;
    color: #000;
    line-height: 1.1;
    text-transform: uppercase;
}

.main-intro-section{padding: 150px 10%;}


.section-title{text-align: center;  font-family: 'scdream'; margin-bottom:130px;}
.section-title h2{color:#000; font-weight:600;}
.section-title h5{color:#000; font-weight:200;}

.sub-stitle{text-align: left;  font-family: 'scdream'; margin-top:50px;}
.sub-stitle h3{color:#000; font-weight:600;}


.area-full{display: flex; flex-direction: row; justify-content: space-between; width:100%;}
.area-full .area-left{width:50%; display: flex; justify-content: center; align-items: center;}
.area-full .area-left img{width: 90%; height: auto;}

.area-full .area-right{width:50%; padding-right:0px;}
.text-box p{color:#000; font-weight:400; line-height: 28px; text-align: justify; margin-bottom: 40px;}


.main-banner-section{width:100%; background-color:#00BCA1; border-radius: 10px; padding:0px 10%; display: flex; justify-content: space-around; flex-direction: row;}
.main-banner-section img{width:280px; height:auto;}
.main-banner-section .banner-box{color:#fff; width:40%; padding:50px 0;}
.main-banner-section .banner-box h3{font-weight: 600;}

.main-gusung-section{background-color:#FFF9E7; padding:130px 10% 150px 10%;}
.main-gusung-section .gusung-area{display: flex; justify-content: space-around; background-color:#F8F9FF; border: 2px dashed #6F81F7; border-radius: 10px; padding:20px;}
.main-gusung-section .gusung-area .box-out{border:2px solid #00BCA1; background-color: #fff; border-radius: 20px; padding:15px;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; width:22%;}

.main-gusung-section .gusung-area .box4{width:20%;display: flex; justify-content: center; align-items: center; color: #00BCA1; font-size: 1.4rem; font-weight: 700;flex-direction: column;}
.main-gusung-section .gusung-area .box4 p{margin-top: 20px;  font-weight: 400;  font-size: 1.0rem; color:#333; line-height: 1.6rem;}

.main-gusung-section .gusung-area div{text-align: center; }
.main-gusung-section .gusung-area div ul{margin: 0; padding:0; width:100%; }
.main-gusung-section .gusung-area div ul li{list-style: none; border: 1px solid #42b39e; background-color: #e1f7f3; text-align: center; padding:8px 10px; margin-bottom:10px;
    width:100%; border-radius: 5px; font-size:1.1rem;}

.main-gusung-section .gusung-area .box-text .box-text-icon{
    background-color: #00BCA1;
    width: 70px;
    height: 70px;
    border-radius: 35px;
    padding: 10px;
}
.main-gusung-section .gusung-area .box-text{margin-top:50px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.main-gusung-section .gusung-area .box-text .box-text-icon img{width:100%;}
.main-gusung-section .gusung-area .box-text p{margin-top:20px; font-weight:600; font-size: 1.3rem;}

.gusung-area-text{margin-top:80px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around;}

.gusung-area-text div{width:40%; height: 160px; margin-bottom: 30px;}
.gusung-area-text div h5{font-weight: 600;}
.gusung-area-text div h5 img{vertical-align: top; padding: 2px 0 0 0;  width: 30px;}
.gusung-area-text div p{text-align: justify;}
.gusung-area-text div.text-box4 p{font-weight:500; color:#E85D1C}



/*진행*/
.sub-first{background-position: 80% 90%;}

.sub-banner-section{width:100%; background-color:var(--color-violet); border-radius: 10px; padding:50px 20% 30px 20%; display: flex; justify-content: space-around; flex-direction: row;
margin:150px 0;}
.sub-banner-section .banner-img{width:30%;}
.sub-banner-section .banner-text{width:70%; color:#fff;}
.sub-banner-section .banner-text h3{font-weight: 600; }
.sub-banner-section .banner-text p{text-align: justify;}
.sub-banner-section .banner-text strong{color:#FAA910; font-weight: 600;}

.sub-intro .item p{font-weight:500;padding: 0 0 30px 10px; width: 62%;}
.sub-intro .item strong{color:#fdf902;}
.sub-intro .item a{margin-left:10px;}

.survey-intro-section{padding: 150px 10%;}
.survey-intro-section .text-box p{font-weight:500;}
.survey-intro-section .text-box strong{color:#E85D1C;}

.ik-card{border:1px solid #ddd; padding:50px 100px; border-radius: 20px; background-color: rgba(238, 238, 238, 0.5);}
.ik-card-white{border:1px solid #ddd; padding:20px 80px; border-radius: 20px; background-color: rgba(238, 238, 238, 0.2); text-align: justify; line-height: 2rem;}
.ik-card-green{border:1px solid #ddd; padding:50px 80px; border-radius: 20px; background-color: rgba(193, 248, 214, 0.2); text-align: justify; line-height: 2rem;}
.ik-card-blue{border:1px solid #ddd; padding:50px 80px; border-radius: 20px; background-color: rgba(181, 204, 255, 0.2); text-align: justify; line-height: 2rem;}
.ik-card-gray{border:1px solid #ddd; padding:50px 80px; border-radius: 20px; background-color: rgba(223, 223, 223, 0.2); text-align: justify;}

/*서브 스텝1*/
#heads-top{width:100%; height:220px; padding:0 10%; background-color: var(--color-greens);}
#heads-top-result{width:100%; height:220px; padding:0 10%; background-color: var(--color-violet);}
#heads-top-blank{width:100%; height:220px; padding:0 10%; background-color: var(--color-violet);}


#heads-top .step-top{ width:100%; background-image: url('/imgs/sub_bg1.png');background-repeat: no-repeat; background-position: center 70%; background-size: 60%;}
.step-top h2{color:#fff; font-weight:700; text-align: center; width:100%; position: absolute; top: 115px; left: 0; font-size: 2.6rem; }
#heads-top-blank .step-top{ width:100%;}




.step1-intro-section{height:90vh; padding:0 10%;}
.result-section{padding:0 10%; margin-bottom:100px;}
.qna-area {
    padding: 0 10%;
    margin-bottom: 100px;
}


.sub-section-title h2{font-size: 2.5rem; font-weight: 600; text-align: center; padding: 50px; }
.sub-section-title h5{font-size: 1.5rem; font-weight: 700; text-align: left; padding: 80px 0 0 0; }
.ik-card{border:1px solid #ddd; border-radius: 10px; padding:50px 40px;}
.ik-card .text-agree{height:30vh; overflow: hidden; overflow-y: scroll;}
.ik-card .text-agree{background-image: url('/imgs/pnu_logo_2.jpg');background-repeat: no-repeat; background-position: center center;}
.ik-card .text-agree dl dt{margin-bottom: 10px;}
.ik-card .text-agree dl dd{margin-left: 0; padding: 0 40px 50px 20px; font-size: 0.85rem; line-height: 1.6rem;}
.ik-card .text-agree .agree-tit{font-size: 1.6rem; text-align: center; font-weight: 600;}
.ik-card .text-agree .agreetb{border-top:1px solid rgb(139, 139, 139);border-left:1px solid rgb(139, 139, 139); width:100%;}
.ik-card .text-agree .agreetb tr td{border-bottom: 1px solid rgb(139, 139, 139); border-right:1px solid rgb(139, 139, 139); padding:6px; text-align: center;}

.agree-chk{padding:20px; text-align: center; font-weight:600; color:#000;}
.bot-btn-area{padding:20px; text-align: center;}
.mid-btn-area{padding:0px; text-align: right;}
.btn-area-right{padding:20px; text-align: right;}
.btn-area-right a{margin:0 5px;}
.bot-btn-area form{display: inline;}


.step2-intro-section{padding:0 25%;}
.step3-intro-section{padding:50px 10%;}
.josa-intro-section{padding:50px 10%;}
.exam-end-section{padding:50px 10%;}


.ik-box-agree1{border:2px solid #000; padding:80px 20px 40px 20px; margin:30px 20px 40px 20px;}
.ik-box-agree1{background-image: url('/imgs/pnu_logo_2.jpg'); background-position: center center; background-repeat: no-repeat; -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact !important;}


.ik-box-agree1 h3{width:100%; font-weight:700; text-align: center; font-size: 50px; color:#000;}
.ik-box-agree1 h5{width:100%; font-weight:400; text-align: center; margin: 15px 0 100px 0;}
.ik-box-agree1 .ik-box-list {margin:0 0 50px 0;}
.ik-box-agree1 .ik-box-list ol li{padding:10px 0;}

.ik-box-agree1 .ik-box-st1, .ik-box-agree1 .ik-box-st2, .ik-box-agree1 .ik-box-st3{padding: 0px 10px;}
.ik-box-agree1 .ik-box-st1 h6, .ik-box-agree1 .ik-box-st2 h6, .ik-box-agree1 .ik-box-st3 h6{ font-size:16px; font-weight:500; letter-spacing: -1px; padding-right:10px;
display: flex; align-items: center; justify-content: start;}


.ik-box-agree1 .ik-box-st1 h6, .ik-box-agree1 .ik-box-st2 h6, .ik-box-agree1 .ik-box-st3 h6{width:114px;}
.ik-box-agree1 .ik-box-st2 h6{width:114px !important;}
/*width: 85%;*/
.ik-box-agree1 .ik-box-st1 dl, .ik-box-agree1 .ik-box-st2 dl, .ik-box-agree1 .ik-box-st3 dl{display: flex; align-items: center; justify-content: start;}
/*width:11%; */
.ik-box-agree1 dt{width:71px;  font-size:16px; font-weight:500;}
.ik-box-agree1 dt.ag-top1-t1, .ik-box-agree1 dt.ag-top2-t1, .ik-box-agree1 dt.ag-top3-t1{width:71px; }
.ik-box-agree1 dd.ag-top1-d1{width:225px;}
.ik-box-agree1 dt.ag-top1-t2{width:225px;}
.ik-box-agree1 dt.ag-top2-t2, .ik-box-agree1 dt.ag-top3-t2{width:55px;}
.ik-box-agree1 dd.ag-top2-d2, .ik-box-agree1 dd.ag-top3-d2{width:100px;}
.ik-box-agree1 dd.ag-top2-d1, .ik-box-agree1 dd.ag-top3-d1{width:170px;}

/* .ik-box-agree1 dt.pr-longtit{width:16% !important; } */
/*width:35%; */
.ik-box-agree1 dl dd{font-size:16px; font-weight:500; letter-spacing: -1px; display: flex; align-items: center; justify-content: start;}
.ik-box-agree1 dl dd.ik-box-date{width:151px;}
.ik-box-agree1 dl dd input{width:auto;}
.ik-box-agree1 dl dd select{width:auto;}
.ik-box-agree1 .ik-box-date span{font-size: 1rem; color:#000;}
.ik-box-agree1 dd.signimg{ height:110px;}
.ik-box-agree1 dd.signimg img{height:100%; width:auto;}
.ik-box-agree1 dt.agree-relay{width: 280px;  text-align: right;}

.ta-r{text-align: right;}
.ta-c{text-align: center;}
.sign-table{margin:0 20px;}
.sign-table tr td{padding:20px 0;font-size:16px; font-weight:500;}
.sig-year{margin-left:10px;}

#savedsign{width:100px;}
.signimg img{width:160px;}
/* .ik-box-agree1 .ik-box-st3 img.main_sign{position: relative; top:0px; width:100px; height:auto;} */

.signature-pad{border:1px solid rgb(187, 187, 187); border-radius: 10px; background-color: #eee;}
.sign-pad-area{display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;}
.sign-pad-area .signayure-btn{display: flex; justify-content: space-between;}
.sign-pad-area .signayure-btn button{margin:4px 5px;}

.ik-box-agree{border:2px solid #000; padding:80px 20px 40px 20px; margin:30px 20px 40px 20px;}
.ik-box-agree{background-image: url('/imgs/pnu_logo3.png'); background-position: center center; background-repeat: no-repeat; -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact !important;}

.ik-box-agree h3{width:100%; font-weight:700; text-align: center; font-size: 50px; color:#000;}
.ik-box-agree h5{width:100%; font-weight:400; text-align: center; margin: 15px 0 100px 0;}
.ik-box-agree .ik-box-list {margin:0 0 50px 0;}
.ik-box-agree .ik-box-list ol li{padding:10px 0;}

.ik-box-agree .ik-box-st1, .ik-box-agree .ik-box-st2, .ik-box-agree .ik-box-st3{padding: 30px 10px;}
.ik-box-agree .ik-box-st1 h6, .ik-box-agree .ik-box-st2 h6, .ik-box-agree .ik-box-st3 h6{width: 15%; font-size:16px; font-weight:500; letter-spacing: -1px; padding-right:10px;}
.ik-box-agree .ik-box-st1 dl, .ik-box-agree .ik-box-st2 dl, .ik-box-agree .ik-box-st3 dl{width: 85%;}

.ik-box-agree dt{width:16%;  font-size:16px; font-weight:500;}
.ik-box-agree dt.pr-longtit{width:16% !important; }
.ik-box-agree dl dd{width:30%;  font-size:16px; font-weight:500; letter-spacing: -1px;}
.ik-box-agree .ik-box-date span{font-size: 1rem; color:#000;}
.ik-box-agree .ik-box-st3 img.main_sign{position: relative; top:-40px; width:100px; height:auto;}


.ik-card-white-exam{border:6px solid rgb(19, 151, 134); border-radius: 15px; background-color: rgba(238, 238, 238, 0.2); text-align: justify; line-height: 2rem;padding:10px;}
.josa-intro-section .ik-card-white-exam{display: flex; justify-content: center; align-items: center; padding:0px;  margin: 0 auto;width: 55%;}
.josa-intro-section .mon-sound{width:500px; }
.josa-intro-section .mon-sound .mon-sound-pic{display: flex; justify-content: center; align-items: center;}
.josa-intro-section .mon-sound img{width:100%; height:auto;}
.josa-intro-section .mon-sound .mon-sound-mp3{display: flex; justify-content: center; align-items: center;}
.josa-btn{display: flex; justify-content: center; align-items: center; padding:20px 0 50px 0;  margin: 0 auto;width: 55%;}
.josa-btn .btn-small{margin:0 10px;}

.josa-intro-section .josa-reply{margin-top:50px;}
.ik-card-josa{border:2px solid rgb(74, 179, 165); padding:20px 30px; border-radius: 20px; background-color: rgba(238, 238, 238, 0.2); text-align: justify; line-height: 2rem;}

.josa-intro-section .josa-reply ul{display: flex; flex-direction: row; justify-content: space-around; padding:0;}
.josa-intro-section .josa-reply h5{font-weight:600;}

.josa-intro-section .josa-reply ul li{list-style: none; width:25%;text-align: center; padding: 0 10px;}
.josa-intro-section .josa-reply ul li .josa-reply-num{text-align: center;}
.josa-intro-section .josa-reply ul li .josa-reply-num span{font-weight:700; font-size:16px; color:#000; width:26px; height:26px; border-radius: 13px; border:2px solid #000;    display: inline-block;
    line-height: 22px;}
.josa-intro-section .josa-reply ul li .reply-btn{background-color: #3d3d3d; color:#fff;  border: 1px solid #3d3d3d;
    font-weight:600; font-size:14px; padding: 2px 20px;  border-radius: 8px;}
.josa-intro-section .josa-reply ul li .reply-btn span{font-weight:700; font-size: 12px;
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: 2px solid #fff;
    display: inline-block;
    line-height: 16px;
    margin-right: 5px;}


.josa-intro-section .josa-reply ul li .reply-btn.active {
    background-color: #cc4202;
    border: 1px solid #cc4202;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-weight:600; font-size:14px; padding: 2px 20px;  border-radius: 8px;
    transition-duration: 0.4s;
    cursor: pointer;
}

.josa-intro-section .josa-reply ul li .reply-btn.active:hover {
    background-color: #cc4202; border: 1px solid #cc4202;
}

.josa-intro-section .josa-reply ul li .reply-btn:hover {
    background-color: #cc4202; border: 1px solid #cc4202;
}

#sig canvas{border:1px solid #ddd;}

.blank-area-section{margin:120px 10% 150px 10%;}
.justify-content-center{display: flex; justify-content: center; align-items: center;}
.card{border:1px solid #ddd; border-radius: 10px; padding:20px 30px;}

h3.blank-sub-title{color: #000; font-weight:700;text-align: center;}
.login-form{display: flex; flex-direction: column; width:100%;}
.login-form .login-input{margin:10px 0; display: flex; flex-direction: row;}
.login-form .login-input label{width: 30%; display: flex; justify-content: center; align-items: center;}
.login-form .login-input .login-input-form{width:70%; padding-right:10%;}
.login-form .id-remember{padding:15px 0; display: flex; justify-content: center; width:100%;}
.login-form .btn-area{display: flex; justify-content: center; width:100%; padding:0 10%;}
.idpw-area{display: flex; justify-content: center;}

.blank-area-section .card{display: flex;  justify-content: center;  width: 80%; margin: 0 auto; flex-direction: column;margin-bottom: 20px;}
.blank-area-section .card .card-bottom{display: flex;  justify-content: center; align-items: center; margin:30px 0; width: 100%;}

.blank-area-section .card .card-body-rec{border:1px solid #ddd; background-color: rgba(238, 238, 238, 0.3); overflow-y:scroll;font-size: 0.8rem;
    padding: 30px;
    line-height: 1.6rem;
    height: 180px;}
.blank-area-section .card .yak-area{display: flex; flex-direction: row; justify-content: center; align-items: center; font-weight:500; font-size:0.9rem;margin-top: 10px;}
.blank-area-section .card .yak-area input{margin: 0 5px 4px 0;}


.register-section .register-form{display: flex; flex-direction: column;}
.register-section .register-form dl{display: flex; flex-direction: row; width:100%; border-left:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #ddd; margin:0;}
.register-section .register-form dl.tb-top{border-top:2px solid #000;}
.register-section .register-form dl dt{width:16%; background-color: rgba(220, 220, 243, 0.5); display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight:600;}
.register-section .register-form dl dd{width:34%;padding:6px 20px;  display: flex; flex-direction: column; align-items: start; justify-content: center; min-height: 42px;
    font-size: 14px;font-weight:400; }
.register-section .register-form dl dd.full{width:84%}
.register-section .register-form h5{font-size: 1.3rem; font-weight: 600; margin: 50px 0 2px 0;}
.register-section h5.registertit{font-size: 1.3rem; font-weight: 600; margin: 10px 0 5px 0;}
.register-section .register-form span{margin:0 10px;}
.register-section .register-form bold{margin:0 12px 0 2px;}
.register-section .register-form dl dd span.invalid-feedback strong{color:var(--color-reds); font-weight:500; font-size:12px;}

.form-control {
    height: 42px;
    font-size: 14px;
    font-weight: 400;
    background: #fafafa;
    border: 1px solid #ddd;
    box-shadow: none;
    border-radius: 6px;
    padding-left: 15px;
}

.form-inline-ik{display: flex; flex-direction: row; width: 100%;  align-items: center;}



.form-check-inline{margin-right:20px;}
.mlr-10{margin:0 10px;}
.mr-10{margin-right:10px;}
.w-30{width:30%;}

.dl-table dl{display: flex; flex-direction: row; width:100%; padding:5px 0; min-height:30px; margin:0;}
.dl-table dl dt{line-height: 32px;  font-size: 14px; font-weight:400; text-align: right; padding-right:20px;}
.dl-table dl dd{line-height: 32px;  font-size: 14px; font-weight:600; }
.four-cell dl dt{width:15%;}
.four-cell dl dd{width:35%;}

.six-cell dl dt{width:13.3%;}
.six-cell dl dd{width:20%;}

.ul-table ul li{list-style: none; border-left:1px solid #ddd; border-bottom:1px solid #ddd; border-right:1px solid #ddd; font-size:14px; padding:10px 0;}
.ul-table ul{display: flex; flex-direction: row; margin:0; padding:0; width:100%;}
.ul-table ul.ul-top{text-align: center; border-top:2px solid #000;}
.ul-table ul.ul-body li{text-align: left; padding:10px 20px; font-size:14px; font-weight:400;}


.ul-table-sur li:nth-child(1){width:15%;}
.ul-table-sur li:nth-child(2){width:40%;}
.ul-table-sur li:nth-child(3){width:45%;}
/* .ul-table-sur li:nth-child(4){width:25%;} */

.ul-table-qna li:nth-child(1){width:10%;}
.ul-table-qna li:nth-child(2){width:55%;}
.ul-table-qna li:nth-child(3){width:10%;}
.ul-table-qna li:nth-child(4){width:10%;}
.ul-table-qna li:nth-child(5){width:15%;}

.invalid-feedback{font-size:12px; color:rgb(218, 67, 47); font-weight:500;}

#sign-modal .modal-dialog {
    width: 500px;
    margin: 30px auto;
}

#sign-modal .modal-body {
    text-align: center;
}

a.ul-a-basic{ font-size:14px; font-weight:400;}
a.ul-a-re{ font-size:14px; font-weight:400;}









/*------------------------------------------------------------------
  	[Footer]
------------------------------------------------------------------*/
.footer { background-color: #000;}

.footer .content{display: flex; flex-direction: column;}
.footer .content .footer-area{display: flex; flex-direction: row; width:100%; justify-content: space-between; padding:10px 10%; margin-bottom:40px;}
.footer .content .footer-area .footer-logo{display: flex; flex-direction: column; width:30%; }
.footer .content .footer-area .footer-logo ul{padding:0; margin:0;}
.footer .content .footer-area .footer-logo ul li{list-style: none;}
.footer .content .footer-area .footer-logo ul li.st1{color:rgba(255, 255, 255, 0.5); font-size:0.7rem; font-weight:500;}
.footer .content .footer-area .footer-logo ul li.st2{color:rgba(255, 255, 255, 0.6); font-size:1.3rem; font-weight:700;}
.footer .content .footer-area .footer-logo ul li.st3{color:rgba(255, 255, 255, 0.4); font-size:0.7rem; font-weight:300;}

.footer .content .footer-area .footer-contact{display: flex; flex-direction: column; width:70%;}
.footer .content .footer-area .footer-contact span{font-size:1rem; font-weight:600; color:rgba(255, 255, 255, 0.8); margin-left:8.5%; margin-bottom:15px;}
.footer .content .footer-area .footer-contact ul{padding:0; margin:0; display: flex;  flex-direction: row; width:100%; justify-content: space-around; font-weight:400;}
.footer .content .footer-area .footer-contact ul li{list-style: none; color:rgba(255, 255, 255, 0.7); font-size:0.9rem;}

.footer .content .footer-copy{display: flex; justify-content: center; align-items: center; padding:20px; border-top:1px solid rgba(221, 221, 221, 0.2); font-size:1rem; padding-top:30px; color:rgba(255, 255, 255, 0.6);}


.exam-end-section h3.end{font-weight:700; color:var(--color-reds); text-align: center;}
.exam-end-section h4{font-weight:600; font-size:1.3rem; margin:20px 0;}

#sign-modal h5.modal-title{display: inline; font-weight: 600;}
#sign-modal .modal-header button.close {display: none;}
/* #sign-modal .modal-header button.close span {
    font-size: 22px;
    font-weight: 400;
    color: #000;
    opacity: 1;
} */


/*페이징*/
.bot_paging{ width:100%; height:80px; margin-top: 10px;}
.bot_paging nav{background-color: rgba(224, 223, 223, 0) !important; pointer-events: auto !important;}
.bot_paging ul.pagination{list-style: none; display: flex; justify-content: center; }
.bot_paging ul.pagination li{color: #444;
    border: 1px solid rgb(221, 221, 221);
    background-color: #fff;
    min-width: 30px;
    min-height: 28px;
    margin: 0 5px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-size: calc(1rem - 0.1vw);
    font-family: 'scdream';
    font-weight: 400;
}
.bot_paging ul.pagination li.active{color: #211ca0; font-weight: 600;}
.bot_paging ul.pagination li a{z-index: 1000;padding: 5px 8px;}
.bot_paging nav div:nth-child(1) span{background-color: rgb(71, 71, 71) !important;
    color: #fff;
    font-family: 'scdream';
    font-weight: 500;
    font-size: 0.75rem;
    padding: 2px 20px !important;
    line-height: 1.9rem;
    text-transform: uppercase;
    min-width:120px !important;
    text-align: center;
    display: inline-block;
}
.bot_paging nav div:nth-child(1) a{background-color: rgb(43, 58, 196) !important;
    color: #fff;
    font-family: 'scdream';
    font-weight: 500;
    font-size: 0.75rem;
    padding: 2px 20px !important;
    line-height: 1.9rem;
    text-transform: uppercase;
    min-width:120px !important;
    text-align: center;
    display: inline-block;
}



.table-top-area{display: flex; flex-direction: row ; justify-content: space-between; padding:10px 5px 10px 5px;}
.table-basic tbody tr td.graph1{background-color: var(--graph-type1) !important;}
.table-basic tbody tr td.graph2{background-color: var(--graph-type2) !important;}
.table-basic tbody tr td.graph3{background-color: var(--graph-type3) !important;}

.ik-card{background-color: #fff;}
.ik-card .card-body-layout .card-left{padding:5px 40px 20px 0;width:50%;}
.ik-card .card-body-layout .card-left .memo-area{background-color: rgba(221, 221, 221, 0.2); height:100%;padding:20px; color:#000; font-size:14px;}
.ik-card .card-body-layout .card-right{width:50%;}
.ik-card .card-body-layout {width:100%; display: flex; }
.ik-card h5{font-size: 1.2rem;  font-weight: 600;}











@media screen and (min-width: 1023px){

}






@media only screen and (min-device-width : 768px) and (max-device-width : 1023px) {

}