@charset "UTF-8";
/* list */
.board_info{
    margin-top:30px;
    width:100%;
    text-align:right;
    font-weight: 300;
    font-size:15px;
}

.board_info > p{    
    margin:0;
    padding:0;
}

.board_info > p > span{    
    padding:0 10px;
}

.board_info > p > span.total{    
    background: url(../../../../images/subpage/icon_gridtop_allpaper.png) left center no-repeat;
    padding-left:20px;
    border-right:1px solid #bbc0c8;
}

.board_info > p > span.page{    
    text-align:right;
    padding-right:2px;
}

/* list common */
.pc .board_wrap{
    position: relative;
    width:100%;
    margin-top:6px;
}





/* list style1 */
.board_wrap ul.list_style1{
    display:block;
    border-top:2px solid #bcc7da;
}

.board_wrap ul.list_style1 li{
    display:block;
    border-bottom:1px solid #dbe0e8;
}
.board_wrap ul.list_style1 li > a{
    position: relative;
    display:block;
    width:100%;
    padding:1.2em 1.6em;
    color:#000000;
    background:#fff;
}
.board_wrap ul.list_style1 li > a:hover{
    background:#ffffef;
}


.pc .board_wrap ul.list_style1 li > a > .num{
    position: absolute;
    left:0;
    top:0;
    width:50px;
    height:100%;
    text-align: center;
}

.pc .board_wrap ul.list_style1 li > a > .num > span{
    position: relative;
    display:block;
    top:50%;
    font-size:14px;
    margin-top:-0.2em;
}

.pc .board_wrap ul.list_style1 li > a > .bullet{
    position: absolute;
    left:50px;
    top:0;
    width:50px;
    height:100%;
    text-align: center;
}

.pc .board_wrap ul.list_style1 li > a > .bullet > span{
    position: relative;
    display:block;
    top:50%;
    margin-top:-1em;
    font-size:16px;
    padding:15px 0;
    color:#e6514a;
    background:#fff;
    border:1px solid #e6514a;
    border-radius: 3px;;
}
.board_wrap ul.list_style1 li > a:hover .bullet > span{
    color:#fff;
    background:#e6514a;
    border:1px solid #e6514a;
}


.pc .board_wrap ul.list_style1 li > a > .list_detail{
    display:block;
    width:100%;
    padding-left:100px;
}

.board_wrap ul.list_style1 li > a > .list_detail .tit{
    font-size:22px;
    line-height: 1.5em;
    font-weight: 700;
}

/* PC 1280 ~ 1024px 까지  --- START */
@media screen and (max-width: 1280px) {
    .pc .board_wrap ul.list_style1 li > a > .bullet > span{
        margin-top:-1.3em;
    }
    

    .board_wrap ul.list_style1 li > a > .list_detail .tit{
        font-size:18px;
        line-height: 1.3em;
    }    


}/* PC 1280 ~ 1024px 까지  --- END */



.board_wrap ul.list_style1 li > a > .list_detail .con{
    display:block;
    width:100%;
    font-size:16px;
    line-height: 1.3em;
    font-weight: 400;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.board_wrap ul.list_style1 li > a > .list_detail .info{
    font-size:15px;
    line-height: 1.3em;
    font-weight: 400;
    margin-top:3px;
}

.board_wrap ul.list_style1 li > a > .list_detail .info > strong{
    display:inline-block;
    margin-right:15px;
}

.board_wrap ul.list_style1 li > a > .list_detail .info > span{ color:#677482;}



/* list_style1 - thumnail_list : 썸네일형 리스트*/
.board_wrap ul.thumnail_list{
	font-size:0;
}
.board_wrap ul.thumnail_list li{ 
	display:inline-block;
	font-size:1.6rem;
	width:49%;
	margin-left:1%;
}
/* Medium PC 1280px 이하 --- START */
@media screen and (max-width: 1280px) {
	.board_wrap ul.thumnail_list li{ 
		width:100%;
	}
}/* Medium PC 1280px 이하 --- END */

/* Small PC 1024px 이하 --- START */
@media screen and (max-width: 1024px) {
	.board_wrap ul.thumnail_list li{ 
		width:100%;
		margin-left:0%;
	}
}/* Small PC 1024px 이하 --- END */


.board_wrap ul.thumnail_list li a{ 
	position:relative;
	min-height:250px;
	padding:0;
}


.board_wrap ul.thumnail_list li a .imageBox{
	position: absolute;
	left:1.6em;
	top:50%;
	margin-top:-100px;
    box-shadow: .2em .2em .4em rgba(19, 26, 43, 0.16);
	width:150px;
	height:200px;
}
.board_wrap ul.thumnail_list li a .imageBox img{
	display:block;
	width:100%;
	height:100%;
}

.board_wrap ul.thumnail_list li .detailBox{
	position: absolute;
	padding-left:210px;
	height:100%;
	padding-top:30px;
	padding-right:25px;
	word-break: break-all;
}

/* Small PC 1024px 이하 --- START */
@media screen and (max-width: 1024px) {
	.board_wrap ul.thumnail_list li a{ 
		min-height:180px;
	}
	.board_wrap ul.thumnail_list li a .imageBox{
		left:1.0em;
		margin-top:-80px;
		width:120px;
		height:160px;
	}
	.board_wrap ul.thumnail_list li .detailBox{
		padding-left:170px;
		padding-top:20px;
	}	
}/*Small PC 1024px 이하 --- END */




.board_wrap ul.thumnail_list li .detailBox .num{
	display:block;
	color:#323336;
	font-size:1.5rem;
	font-weight: 300;
	padding-bottom:5px;
}

.board_wrap ul.thumnail_list li .detailBox .h3{
	font-size:2.2rem;
	color:#000;
	line-height:2.8rem;
}

.board_wrap ul.thumnail_list li .detailBox .info{
	position: absolute;
	bottom:22px;
}

.board_wrap ul.thumnail_list li .detailBox .info .date{
	font-size:1.4rem;
	color:#677482;
}
.board_wrap ul.thumnail_list li .detailBox .info .writer{
	font-size:1.4rem;
	color:#000;
}


/* Small PC 1024px 이하 --- START */
@media screen and (max-width: 1024px) {
	.board_wrap ul.thumnail_list li .detailBox .h3{
		font-size:2.0rem;
		line-height:2.4rem;
	}	
	.board_wrap ul.thumnail_list li .detailBox .info{
		bottom:12px;
	}
}/*Small PC 1024px 이하 --- END */






/* pagination */
.pc .pagination_wrap{
    position:relative;
    margin-top:20px;
}

.pagination{
    position:relative;
    overflow:hidden;
    width:100%;
    font-size:0;
    text-align:center;
}
.pagination.pc_ver{ display:block; }
.pagination.mobile_ver{display:none;}

/* Tablet 1024px ~ 768 이하 */
@media screen and (max-width: 1024px) {
    .pagination.pc_ver{ display:none; }
    .pagination.mobile_ver{display:block;}
    
}


.pagination a{
    display:inline-block;
    font-size:16px;
    margin:0 2px;
    background:#fff;
    color:#323336;
    padding:14px 14px 9px 14px;
    border-radius: 3px;
    -webkit-transition-property: color, border-color, background-color, box-shadow;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-in-out ;
    transition-property: color, border-color, background-color, box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out ;
}
.pagination  a:hover{ background:#cde1ff;}
.pagination a.active{ background:#cde1ff;}

.pagination a.btn_page{
    border:1px solid #71777d;
    background:#fff;
    padding:12px 14px 8px 14px;
    box-sizing: border-box;
    line-height:1.1em;
    border-radius: 15px;
}
.pagination a.btn_page:hover{
    background:#cde1ff;
    border:1px solid #cde1ff;
}
.mobile_ver{display:none;}






/* Components : 해양경찰청 컴퍼넌트 */

/* Components : 01. Title H1 ~ H6, H1 subtxt ~ H6 sub txt */
.content_start h1.title_lv1{
	display:block;
	width:100%;
	color:#0a0b0b;
	font-size:2.2rem;
	padding:0 0 10px 0;
	font-weight:600;
}

.content_start > * span.subtxt{
	display:inline-block;
	vertical-align:middle;
	font-weight:400;
	padding-left:5px;
}
.content_start h1.title_lv1 .subtxt{
	color:#54565b;
	font-size:1.6rem;
}

.content_start h2.title_lv1{
	display:block;
	width:100%;
	color:#215abd;
	font-size:2.0rem;
	padding:0 0 8px 20px;
	font-weight:600;
	background:url(../../../../images/h2.jpg) no-repeat 4px 1px;
}
.content_start h2.title_lv1 .subtxt{
	color:#54565b;
	font-size:1.6rem;
}

.content_start h3.title_lv1{
	display:block;
	width:100%;
	color:#2f343c;
	font-size:1.8rem;
	padding:0 0 8px 32px;
	font-weight:600;
	background:url(../../../../images/h3.gif) no-repeat 20px 5px;
}
.content_start h3.title_lv1 .subtxt{
	color:#54565b;
	font-size:1.4rem;
}

.content_start h4.title_lv1{
	display:block;
	width:100%;
	color:#1056d0;
	font-size:1.6rem;
	padding:0 0 5px 44px;
	font-weight:600;
}
.content_start h4.title_lv1 .subtxt{
	color:#54565b;
	font-size:1.4rem;
}

.content_start h5.title_lv1{
	display:block;
	width:100%;
	color:#1d1f22;
	font-size:1.4rem;
	padding:0 0 5px 58px;
	font-weight:600;
}
.content_start h5.title_lv1 .subtxt{
	color:#54565b;
	font-size:1.3rem;
}

.content_start h6.title_lv1{
	display:block;
	width:100%;
	color:#21437e;
	font-size:1.15rem;
	padding:0 0 5px 72px;
	font-weight:700;
}
.content_start h6.title_lv1 .subtxt{
	color:#54565b;
	font-size:1.3rem;
}
/* Components : 01. Title H1 ~ H6, H1 subtxt ~ H6 sub txt -- END*/


/* Components : 02. TEXT H1 ~ H6, H1 subtxt ~ H6 sub txt START*/
.contxt{
	display:block;
	width:100%;
	font-weight:400;
}

.h1contxt{
	padding:0 0 10px 0;
	font-size:1.6rem;
	line-height:2.2rem;
	color:#212529;
	text-align:justify;
}
.h2contxt{
	padding:0 0 10px 18px;
	font-size:1.6rem;
	line-height:2.2rem;
	color:#212529;
	text-align:justify;
}
.h3contxt{
	padding:0 0 10px 32px;
	font-size:1.5rem;
	line-height:2.2rem;
	color:#1d1f22;
	text-align:justify;
}
.h4contxt{
	padding:0 0 10px 42px;
	font-size:1.4rem;
	line-height:1.8rem;
	color:#1d1f22;
	text-align:justify;
}
.h5contxt{
	padding:0 0 10px 58px;
	font-size:1.4rem;
	line-height:1.8rem;
	color:#5d6164;
	text-align:justify;
}
.h6contxt{
	padding:0 0 10px 72px;
	font-size:1.2rem;
	line-height:1.6rem;
	color:#5d6164;
	text-align:justify;
}
p.sumtxt{
	display:block;
	width:100%;
	font-weight:400;
	
}
.sumtxt1{
	padding:15px 20px;
	font-size:1.6rem;
	line-height:2rem;
	color:#212529;
	text-align:justify;
	background:#eff5ff;
}
.sumtxt2{
	padding:15px 20px;
	font-size:1.6rem;
	line-height:2rem;
	color:#212529;
	text-align:justify;
	background:#eeeff1;
}
.sumtxt3{
	padding:15px 20px;
	font-size:1.5rem;
	line-height:2rem;
	color:#1d1f22;
	text-align:justify;
	background:white;
	border-radius:8px;
	border:1px solid #a7b1ba;
}
.sumtxt4{
	padding:15px 20px;
	font-size:1.4rem;
	line-height:1.8rem;
	color:#1d1f22;
	text-align:justify;
	background:white;
	border-radius:5px;
	border:1px solid #cfd8e1;
}
.sumtxt5{
	padding:10px 15px;
	font-size:1.4rem;
	line-height:1.8rem;
	color:#5d6164;
	text-align:justify;
	background:hsl(217, 100%, 96%);
}
.sumtxt6{
	padding:10px 15px;
	font-size:1.2rem;
	line-height:1.6rem;
	color:#5d6164;
	text-align:justify;
	background:#eeeeee;
}
/* Components : 02. TEXT H1 ~ H6, H1 subtxt ~ H6 sub txt END*/


/* Components : 03. LIST START*/
.orderlist{
	display:block;
	width:100%;

}
.orderlist > li{
	padding-bottom:15px;
	font-size:1.4rem;
	color:black;
	width:100%;
}
.orderlist > li > span{
	display:inline-block;
	min-width:24px;
	height:24px;
	color:#dee1e6;
	background:#76808a;
	text-align:center;
}
.orderlist > li > p{
	display:block;
	width:100%;
	padding:0 0 0 26px;
}


.orderlist2{
	margin-top:10px;
	margin-bottom:30px;
	
	padding:0 0 0 40px;
	display:block;
	width:100%;
}
.orderlist2 > li{
	margin-bottom:8px;
	font-size:1.6rem;
	color:black;
	width:100%;
	font-weight:400;
}
.orderlist2 > li > span{
	display:inline-block;
	min-width:24px;
	height:24px;
	color:#4f8fff;
	background:white;
	text-align:center;
	border-radius:12px;
	font-weight:400;
	border:1px solid #4f8fff;
}
.orderlist2 > li > b{
	color:#4f8fff;
	font-weight:400;
}
.orderlist2 > li > p{
	display:block;
	width:100%;
	padding:0 0 0 30px;
	color:#5f6368;
	line-height:2.2rem;
}


.orderlist3{
	margin-top:5px;
	margin-bottom:25px;
	
	padding:0 0 0 50px;
	display:block;
	width:100%;
}
.orderlist3 > li{
	margin-bottom:5px;
	width:100%;
	font-size:1.5rem;
	line-height:2rem;
}
.orderlist3 span{
	display:inline-block;
	font-weight:700;
	color:black;
}
.orderlist3 > li > p{
	display:block;
	width:100%;
	padding:0 0 0 16px;
	color:#5f6368;
	line-height:2rem;
}


.orderlist4{
	margin-top:5px;
	margin-bottom:25px;
	
	padding:0 0 0 30px;
	display:block;
	width:100%;
	font-size:1.4rem;
	line-height:1.6rem;
	font-weight:400;
}
.orderlist4 span{
	font-size:1.4rem;
	line-height:1.6rem;
	display:inline-block;
	font-weight:400;
	color:black;
}
.orderlist4 b{font-weight:400;}
.orderlist4 > li{
	margin-bottom:8px;
	width:100%;
	font-size:1.4rem;
	line-height:1.8rem;
}
.orderlist4 > li > p{
	display:block;
	width:100%;
	padding:0 0 0 16px;
	color:#516992;
}


.orderlist5{
	margin-top:5px;
	margin-bottom:15px;
	
	padding:0 0 0 30px;
	display:block;
	width:100%;
	font-size:1.4rem;
	line-height:1.6rem;
	font-weight:400;
}
.orderlist5 > li{
	margin-bottom:5px;
	width:100%;
	font-size:1.2rem;
	line-height:1.6rem;
}

.noorderlist{
	display:block;
	width:100%;
}
.noorderlist > li{
	margin-bottom:15px;
	font-size:1.6rem;
	color:black;
	width:100%;
	padding:0 0 0 12px;
	background:url(../../../../images/ul1.png) no-repeat 0 6px;
}
.noorderlist > li > p{
	display:block;
	width:100%;
	padding:0 0 0 3px;
}


.noorderlist2{
	margin-top:10px;
	margin-bottom:30px;
	
	padding:0 0 0 20px;
	display:block;
	width:100%;
	font-weight:400;
}
.noorderlist2 > li{
	margin-bottom:8px;
	font-size:1.6rem;
	color:black;
	width:100%;
	font-weight:400;
	padding:0 0 0 12px;
	background:url(../../../../images/ul2.gif) no-repeat 0 8px;
}
.noorderlist2 > li > b{
	color:#4f8fff;
	font-weight:400;
}
.noorderlist2 > li > p{
	display:block;
	width:100%;
	padding:0 0 0 0px;
	color:#5f6368;
	line-height:2.2rem;
}


.noorderlist3{
	margin-top:5px;
	margin-bottom:25px;
	padding:0 0 0 30px;
	display:block;
	width:100%;
}
.noorderlist3 > li{
	margin-bottom:5px;
	width:100%;
	font-size:1.5rem;
	line-height:2rem;
	padding:0 0 0 10px;
	background:url(../../../../images/ul3.gif) no-repeat 0 8px;
}
.noorderlist3 > li > p{
	display:block;
	width:100%;
	padding:0 0 0 0;
	color:#5f6368;
	line-height:2rem;
}


.noorderlist4{
	margin-top:5px;
	margin-bottom:25px;
	padding:0 0 0 10px;
	display:block;
	width:100%;
	font-size:1.4rem;
	line-height:1.6rem;
	font-weight:400;
}
.noorderlist4 b{font-weight:400;}
.noorderlist4 > li{
	margin-bottom:8px;
	width:100%;
	font-size:1.4rem;
	line-height:1.8rem;
	padding:0 0 0 8px;
	background:url(../../../../images/ul4.gif) no-repeat 0 8px;
}
.noorderlist4 > li > p{
	display:block;
	width:100%;
	padding:0 0 0 0;
	color:#516992;
}


.noorderlist5{
	margin-top:5px;
	margin-bottom:15px;
	padding:0 0 0 10px;
	display:block;
	width:100%;
	font-size:1.4rem;
	line-height:1.6rem;
	font-weight:400;
}
.noorderlist5 > li{
	margin-bottom:5px;
	width:100%;
	font-size:1.2rem;
	line-height:1.6rem;
}

/* Components : 03. LIST  END */






/* Components : 05. SEARCH ITEM  START */
/* seach wrap */
.search_wrap{
    position: relative;
    margin-top:15px;
}

.search_box{
    padding:8px 15px;
    background:#f4f6f8;
}


/* PC 1680 이하 */
@media screen and (max-width: 1680px) {
    .search_box{
        padding:5px 15px;
    }
	.search_box + .search_box{
		padding-top:0;
	}
}

/* Tablet 1024 이하 */
@media screen and (max-width: 1024px) {
	.search_wrap{margin-top:0;}
}
/* Mobile 768 이하 */
@media screen and (max-width: 768px) {
		.search_box{
        padding:5px;
    }
}

.form_footer{
    margin-top:10px;
}


.form_control{
    display:flex;
    position: relative;
    padding:0 2px;
	margin:0;
    font-size:0;
    align-items: center; 
}

.form_control > * {
    font-size:1.6rem;
}

.form_control label { 
    display:inline-flex;
    font-weight: 700;
    line-height:32px;
    color: #1d1f22;
    cursor: text; 
    height:100%;
    font-size:1.6rem;
    padding-left:1em;
    padding-right:.2em;
    background:url(../../../../images/subpage/form_serchtit_bg.png) 5px 8px no-repeat;
    text-align:left;
	min-width:110px;
} 

.form_control input{
    display:block;
    height: auto; /* 높이값 초기화 */
    border: 1px solid #7e9ad1;
    border-radius: 3px; /* iSO 둥근모서리 제거 */ 
    padding: .4em .5em;
    outline-style: none; /* 포커스시 발생하는 효과 제거를 원한다면 */ 
    -webkit-appearance: none; /* 브라우저별 기본 스타일링 제거 */ 
    -moz-appearance: none; 
    appearance: none;
}
.form_control input[type="radio"] {
	display: inline-block; /* 블록 형태로 표시 */
	width: 20px; /* 너비 설정 */
	height: 20px; /* 높이 설정 */
	border: 1px solid #7e9ad1; /* 테두리 설정 */
	border-radius: 50%; /* 원 형태로 설정 */
	padding: 0; /* 패딩 제거 */
	outline-style: none; /* 포커스 시 효과 제거 */
	-webkit-appearance: none; /* 기본 스타일 제거 */
	-moz-appearance: none;
	appearance: none;
	position: relative; /* 위치 설정 */
}

/* 체크된 상태의 라디오 버튼 스타일 */
.form_control input[type="radio"]:checked {
	background-color: #7e9ad1; /* 체크된 상태의 배경색 */
	border: 1px solid #5a7bb0; /* 체크된 상태의 테두리색 */
}

/* 라디오 버튼을 선택했을 때 표시되는 점 스타일 */
.form_control input[type="radio"]:checked::after {
	content: ""; /* 내용 비우기 */
	position: absolute; /* 절대 위치 설정 */
	top: 50%; /* 세로 중앙 정렬 */
	left: 50%; /* 가로 중앙 정렬 */
	width: 10px; /* 내부 원의 너비 */
	height: 10px; /* 내부 원의 높이 */
	border-radius: 50%; /* 내부 원 형태 */
	background-color: white; /* 내부 원의 배경색 */
	transform: translate(-50%, -50%); /* 중앙으로 이동 */
}


.form_control > input{
    width: calc(100% - 110px );
}

/* Mobile 768 이하 */
@media screen and (max-width: 768px) {
	.form_control > input{width: 100%;}
}

.form_inline{
    font-size:0;
}
.form_inline > .form_control{
    display:inline-block;
    min-width:130px;

}

.form_singleitem > input{   width: 100%;}


.form_control select{
    display:block;
    width:calc(100% - 110px);
    border: 1px solid #7e9ad1;
    height: auto; /* 높이값 초기화 */
    border-radius: 3px;
    padding: .4em 5% .4em .5em;
    position: relative;
	background: url(../../../../images/subpage/icon_selectbox_arrow.png) no-repeat 98% center #fff;
	-webkit-appearance: none; /* 기본 화살표 제거 (Chrome, Safari) */
	-moz-appearance: none;    /* 기본 화살표 제거 (Firefox) */
	appearance: none;         /* 기본 화살표 제거 (기타 브라우저) */
}

.form_control > .btnDelete{
	margin-left: 7px;
}

/* Mobile 768 이하 */
@media screen and (max-width: 768px) {
	.form_control select{width: 100%;}
}


/* large_label : 5~12자 긴 제목 조회조건  */
.large_label label{min-width:140px;}
.large_label input,
.large_label select{ width: calc(100% - 140px );}


/* Mobile 768 이하 */
@media screen and (max-width: 768px) {
	.large_label input{ width:100%; }
	.large_label select{width: 100%;}
}


/* big_label : 12~18자 제목 조회조건  */
.big_label label{min-width:180px;}
.big_label input,
.big_label select{ width: calc(100% - 180px );}
/* Mobile 768 이하 */
@media screen and (max-width: 768px) {
	.big_label input,
	.big_label select{ width:100%}
}


/* Form - double item select : 셀렉트 2개 */
.form_doubleitem {
	display:flex;
    width:calc(100% - 110px);
}
.large_label .form_doubleitem { width:calc(100% - 140px);}
.big_label .form_doubleitem { width:calc(100% - 180px);}

.form_doubleitem input,
.form_doubleitem select{
    width:calc(50% - 2px);
}
.form_doubleitem input + input,
.form_doubleitem select + select{
	margin-left:4px;
}

/* Medium Desk top 1280 이하 */
@media screen and (max-width: 1280px) {
	.form_doubleitem select{
		background: url(../../../../images/subpage/icon_selectbox_arrow.png) no-repeat 97% center #fff; /* 네이티브 화살표 대체 */
	}
}
/* Mobile 768 이하 */
@media screen and (max-width: 768px) {
	.form_doubleitem,
	.large_label .form_doubleitem,
	.big_label .form_doubleitem{width:100%;}
	.form_doubleitem select{width:calc(50% - 2px);}
}



/* Form - double item select + range : 셀렉트박스 + 기간 */
.form_doubleitem_range{
	display:flex;
    width:calc(100% - 110px);
	font-size:1.6rem;
}

.large_label .form_doubleitem_range { width:calc(100% - 140px);}
.big_label .form_doubleitem_range { width:calc(100% - 180px);}

.form_doubleitem_range input,
.form_doubleitem_range select{width:calc(50% - 10px);}


.form_doubleitem_range .rangearea{
    display:inline-block;
    width:20px;
    height:32.78px;
    line-height:3.2rem;
	text-align:center;
	font-size:1.6rem;
}

/* Mobile 768 이하 */
@media screen and (max-width: 768px) {
	.form_doubleitem_range,
	.large_label .form_doubleitem_range,
	.big_label .form_doubleitem_range{width:100%;}
}


/* Form - Small + Large Set select : 셀렉트 2개 */
.form_smallLarge_set{
	display:flex;
	width:calc(100% - 110px); 
}
.form_smallLarge_set select.small_select{ width:25%; }
.form_smallLarge_set select.large_select{ width:calc(75% - 4px); }
.form_smallLarge_set select + select{
	margin-left:4px;
}
/* Mobile 768 이하 */
@media screen and (max-width: 768px) {
	.form_smallLarge_set{width:100%; }
	.form_smallLarge_set select.small_slect{ width:30%; }
	.form_smallLarge_set select.large_select{ width:calc(70% - 4px); }
	
}


/* Small Mobile 460 이하 */
@media screen and (max-width: 460px) {
	.form_smallLarge_set select.small_select{ width:100%; }
	.form_smallLarge_set select.large_select{ width:100%; margin-top:4px; margin-left:0; }
}

.form_control input:focus,
.form_control select:focus{
    border: 1px solid #004be1;
    box-shadow: .2em .2em .4em rgba(19, 26, 43, 0.5);
}

.form_control select + input{ margin-left:4px;}



/* Date Picker : 인풋 날짜 선택  */
.datepick_group{
	width:calc(100% - 110px);
	font-size:0;
}


/* Date Picker Tween 2개 + 큰 라벨 시 크기 */
.large_label .datepick_group{
	width:calc(100% - 150px);
	font-size:0;
}


/* Mobile 768 이하 */
@media screen and (max-width: 768px) {
	.datepick_group,
	.large_label .datepick_group{
		width: 100%;
	}
}
.tui-datepicker-input{
    width:100%;
    height:auto;
    border:none;
}

.tui-datepicker-input>input{
    font-size:1.6rem;
    line-height: inherit;
}

/* Date Picker : 날짜달력 레이어팝업 */
.datapicker_pop{
    position: relative;
    z-index:210;
}

/* Date Picker Tween 2개일경우*/
.date-picker-tween{
    width:calc(50% - 10px);
	min-width:110px;
}

.date-picker-rangearea{
    display:inline-block;
    width:20px;
    height:32.78px;
    line-height:3.2rem;
	text-align:center;
	font-size:1.6rem;
}


/* Date Picker Tween : 인라인 2개일 경우 */
.inline_date_picker{
    display:inline-block;
    margin-left:4px;
}
.inline_date_picker .date-picker-tween{
    width:110px;
    min-width:110px;
}

@media screen and (max-width: 768px) {
    .inline_date_picker{
        margin-left:0px;
    }
    .inline_date_picker .date-picker-tween{
        width:calc(50% - 10px);
        min-width:110px;
    }

    .inline_date_picker .date-picker-rangearea{
        width:20px;
    }    
}

/* form inner text : 폼안에 안내텍스트 */
.form_control p.form_inner_txt{
	padding:4px 0;
	font-size:1.5rem;
	color:#3f4144;
}





/* serch_confirm */
.search_confirm{
	position:relative;
    text-align:center;
}
.search_confirm button.btn{
    padding:.7em 3.5em .6em;
    background:#3f4144;
    border-radius: 3px;
    color:#fff;
    box-shadow: .2em .2em .2em rgba(19, 26, 43, 0.5);
	border:1px solid transparent
}
.search_confirm button.btn:hover,
.search_confirm button.btn:focus,
.search_confirm button.btn:active{
    background:#285dba;
	border:1px solid #1056d0
}

.search_confirm button.btn_fn{
    padding:.7em 0.9em .6em;
    background:#3f4144;
    border-radius: 3px;
    color:#fff;
    box-shadow: .2em .2em .2em rgba(19, 26, 43, 0.5);
	border:1px solid transparent
}

.search_confirm button.btn_reset{
    background:#fff;
    color:#5f6368;
	border:1px solid #5f6368;
    box-shadow:none;
}
.search_confirm button.btn_reset:hover{
    background:#aaa;
    color:#fff;
	border:1px solid #aaa;
}

.search_confirm button.btn_reset:focus,
.search_confirm button.btn_reset:active{
    background:#aaa;
	border:1px solid #aaa;
}

.search_confirm button.btn_excel{
    background:#1f8d51;
    color:#fff;
	border:1px solid #1f8d51;
    box-shadow:none;
}
.search_confirm button.btn_excel:hover{
    background:#aaa;
    color:#fff;
	border:1px solid #aaa;
}

.search_confirm button.btn_excel:focus,
.search_confirm button.btn_excel:active{
    background:#aaa;
	border:1px solid #aaa;
}

/* 모바일 */
@media screen and (max-width: 768px) {
	.search_confirm button.btn{	padding:.5em 2.3em .4em;}
	.search_confirm button.btn_fn{padding:.5em 1em .4em;}
	.search_confirm button.btn_excel{
		text-align:left;
		text-indent: -9999px;
		overflow:hidden;
		width:30px;
		background:url(../../../../images/subpage/icon_excel.png) center center no-repeat #1f8d51;
	}

	.search_confirm button.btn_excel:hover{
		background:url(../../../../images/subpage/icon_excel.png) center center no-repeat #aaa;
	}

	.search_confirm button.btn_excel:focus,
	.search_confirm button.btn_excel:active{
		background:url(../../../../images/subpage/icon_excel.png) center center no-repeat #aaa;
	}

}



/* button */
.form_control .btn{
    display:block;
    width:100%;
    padding:5px 10px;
    font-size:1.4rem;
    line-height:2.1rem;
    border-radius: 3px;
    background:#fff;
    color:#323336;
    border:1px solid #7e9ad1;
}

.form_control .btn:focus,
.form_control .btn:active{
    border:1px solid #7e9ad1;
	background:#285dba;
	color:#fff;
}

.form_control .btn:hover{
    background:#21437e;
    color:#fff;
}
.form_control .inline_btn_group {
	display:flex;
	width:calc(100% - 110px);
	font-size:0;
	justify-content: space-between;
	flex-wrap:nowrap;
}
.none_label .inline_btn_group {
	width:100% !important;
}

/* Mobile 768 이하 */
@media screen and (max-width: 768px) {
	.form_control .inline_btn_group {
		width: 100%;
	}
}

.form_control .inline_btn_group .btn{
    display:flex;
	flex:1 2px;
	justify-content: center;
	margin:0 1px;
}






/* FAQ LIST */
.faq_wrap{
	position:relative;
	display:block;
}

.faq_wrap .faq_list{
	position: relative;
}

.faq_wrap .faq_list li{
	display:block;
	margin:0 0 15px 0;
	padding:0;
	border-radius: 15px;
	border:1px solid #dbe0e8;

}

.faq_wrap .faq_list li.active{
	border:1px solid #ff8f35;
    box-shadow: .2em .2em .4em rgba(19, 26, 43, 0.2);

}
.faq_wrap .faq_list li div{
	position:relative;
	display:block;
	margin:0;
	padding:0px;
}

.faq_wrap .faq_list li div.faq_a{
	display:none;
}
.faq_wrap .faq_list li div p{
	position: relative;
	display:block;
	margin:0;
	padding:30px 10px 30px 90px;
	color:#000000;
	font-size:2.0rem;
	line-height: 2.6rem;
}
.faq_wrap .faq_list li div.faq_q p{color:#000}
.faq_wrap .faq_list li div.faq_a p{color:#303030}

.faq_wrap .faq_list li div.faq_a p::before{
	content: "";
	position: absolute;
	display:block;
	margin:0 auto;
	top:0;
	left:50%;
	margin-left:-48%;
	width:96%;
	height:1px;
	background:#dbe0e8;
}

.faq_wrap .faq_list li div i.faq_icon{
	position:absolute;
	display:block;
	left:20px;
	top:16px;
	width:51px;
	height:51px;
	text-align:left;
	text-indent: -9999px;
	overflow:hidden;
}

.faq_wrap .faq_list li div i.icon_q{
	background:url(../../../../images/subpage/icon_q.png) center center no-repeat;
}
.faq_wrap .faq_list li.active div i.icon_q{
	background:url(../../../../images/subpage/icon_q_on.png) center center no-repeat;
}

.faq_wrap .faq_list li div i.icon_a{
	background:url(../../../../images/subpage/icon_a_on.png) center center no-repeat;
}

/* Tablet 1024 이하 */
@media screen and (max-width: 1024px) {

	.faq_wrap .faq_list li div p{
		padding:20px 10px 20px 90px;
		font-size:1.8rem;
		line-height: 2.4rem;
	}	

	.faq_wrap .faq_list li div i.faq_icon{
		left:20px;
		top:6px;
	}


}





/* Mobile 768 이하 */
@media screen and (max-width: 768px) {

	.faq_wrap .faq_list li div p{
		padding:15px 10px 15px 60px;
		font-size:1.6rem;
		line-height: 2.2rem;
	}	

	.faq_wrap .faq_list li div i.faq_icon{
		left:10px;
		top:5px;
		width:40px;
		height:40px;
	}
	
	.faq_wrap .faq_list li div i.icon_q{
		background:url(../../../../images/subpage/icon_q.png) center center no-repeat;
		background-size:contain;
	}
	.faq_wrap .faq_list li.active div i.icon_q{
		background:url(../../../../images/subpage/icon_q_on.png) center center no-repeat;
		background-size:contain;
	}
	
	.faq_wrap .faq_list li div i.icon_a{
		background:url(../../../../images/subpage/icon_a_on.png) center center no-repeat;
		background-size:contain;
	}
	
	

}



/* Table */
.board_wrap{
	position: relative;
	display:block;
}

.board_oversize_alert{ display:none;}
.board_wrap.xhidden{
	overflow-x: hidden !important;
}


/* Tablet Over size  */
/* 타블렛 1024 이하 : 목록리스트 많을 때사용 list - Over size */
@media screen and (max-width: 1024px) {
	.board_oversize{
		overflow-x:scroll;
	}
	.board_oversize .respon_tablet{
		min-width:977px;
	}
	.board_oversize_alert{ display:block;}

	/* Table oversize alert : 오버사이즈시 알림 창 */
	.board_oversize_alert{
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:100%;
		background:rgba(0, 0, 0, 0.6);
		text-align: center;
		color:#fff;
		font-size:1.8rem;
	}


	.board_oversize_alert > p{
		position:relative;
		top:50%;
		margin-top:-70px;
		width:100%;
		text-align: center;
	}

	.icon_touch{
		display:inline-block;
		width:70px;
		height:70px;
		text-align:left;
		text-indent:-9999px;
		overflow:hidden;
		background:url(../../../../images/subpage/icon_touch.png) center center no-repeat;
	}


}

/* 모바일 768 이하 : 목록리스트 많을 때사용 list - Over size */
@media screen and (max-width: 768px) {

	.board_oversize .respon_mobile{
		min-width:721px;
	}

}


/* Table list 기본 목록 디자인*/
.listBasic{
	width:100%;
	border-top:4px solid #bcc7da;
	table-layout: fixed;
}
.viewBasic{
	width:100%;
}

.listBasic caption,
.viewBasic caption{
	position: absolute;
	left:0;
	top:-1px;
	width:1;
	height:0px;
	text-align:left;
	text-indent:-9999px;
	overflow:hidden;
}

/* Table : 게시판 공지사항 스타일 */
.list10{border-collapse: collapse }
.list10 thead th{
	border-bottom:1px solid #dbe0e8;
	text-align:center;
	font-size:1.6rem;
	color:#323336;
	padding:14px 0;
}

.list10 tbody td{
	text-align:center;
	font-size:1.4rem;
	padding:14px 10px;
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-in-out ;
    transition-property: background-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out ;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list10 tbody tr{ border-bottom:1px solid #dbe0e8; border-spacing:1px;}


.list11 tbody td{padding:14px 10px;}

.list10 tbody tr:hover td{ background:#ffffe3; }
.list10 tbody td.num{ color:#323336;  font-size:1.4rem; }
.list10 tbody td.title {
	color:#000000; text-align:left;
	 max-width:100%; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;
}

.list10 tbody td.writer{ 
	color:#000000;
	max-width:100%; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;	
 }
.list10 tbody td.date{ 
	color:#323336; font-size:1.4rem;
	max-width:100%; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;	
 }
 
 .list10 tbody td.alarmpalce{
	color:#000000; text-align:center;
	 max-width:100%; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;
}
  

 .list10 tbody td.attach{ color:#000000; line-height:0;}

/* 210723 반응형변경*/
.list10 thead th.num,
.list10 tbody td.num{width:12%}
.list10 thead th.title,
.list10 tbody td.title{width:52%}
.list10 thead th.writer,
.list10 tbody td.writer{width:12%}
.list10 thead th.date,
.list10 tbody td.date{width:14%}
.list10 thead th.attach,
.list10 tbody td.attach{width:10%}

/* 210730 Q&A 게시판 반응형 추가 수정*/
.list_qna thead th.num,
.list_qna tbody td.num{width:12%}
.list_qna thead th.title,
.list_qna tbody td.title{width:36%}
.list_qna thead th.writer,
.list_qna tbody td.writer{width:12%}
.list_qna thead th.date,
.list_qna tbody td.date{width:14%}
.list_qna thead th.date2,
.list_qna tbody td.date2{width:14%}
.list_qna thead th.answerwhat,
.list_qna tbody td.answerwhat{width:12%;}

/* 210730 설문조사 게시판 반응형 추가 수정*/
.list_survey thead th.num,
.list_survey tbody td.num					{width:9%}
.list_survey thead th.title,
.list_survey tbody td.title					{width:31%}
.list_survey thead th.daterange,
.list_survey tbody td.daterange			{width:22%}
.list_survey thead th.writer,
.list_survey tbody td.writer				{width:10%}
.list_survey thead th.party,
.list_survey tbody td.party				{width:20%}
.list_survey thead th.answerwhat,
.list_survey tbody td.answerwhat		{width:10%}



/* 210730 안전정보 게시판 반응형 추가 수정*/
.list_know thead th.num,
.list_know tbody td.num				{width:10%}
.list_know thead th.category,
.list_know tbody td.category			{width:16%}
.list_know thead th.title,
.list_know tbody td.title					{width:40%}
.list_know thead th.writer,
.list_know tbody td.writer				{width:12%}
.list_know thead th.date,
.list_know tbody td.date				{width:12%}
.list_know thead th.attach,
.list_know tbody td.attach				{width:10%}


/* 210730 항행경보 게시판 반응형 추가 수정*/
.list_know03 thead th.num,
.list_know03 tbody td.num				{width:8%}
.list_know03 thead th.alarmpalce,
.list_know03 tbody td.alarmpalce		{width:13%}
.list_know03 thead th.title,
.list_know03 tbody td.title				{width:50%;}
.list_know03 thead th.date_start,
.list_know03 tbody td.date_start		{width:15%; text-align:center;}
.list_know03 thead th.date_end,
.list_know03 tbody td.date_end			{width:15%; text-align:center;}

.list_know03View thead th.num,
.list_know03View tbody td.num				{width:3%}
.list_know03View thead th.alarmpalce,
.list_know03View tbody td.alarmpalce		{width:13%}
.list_know03View thead th.title,
.list_know03View tbody td.title				{width:50%;}
.list_know03View tbody td div.table_con		{text-align:center !important;}
.list_know03View thead th.date_start,
.list_know03View tbody td.date_start		{width:4%; text-align:center;}
.list_know03View thead th.date_end,
.list_know03View tbody td.date_end			{width:4%; text-align:center;}

/* 210730 해적동향 및 공지사항 게시판 반응형 추가 수정*/
.list_pirate01 thead th.category,
.list_pirate01 tbody td.category{width:15%}
.list_pirate01 thead th.title,
.list_pirate01 tbody td.title{width:49%}
.list_pirate01 thead th.accidate,
.list_pirate01 tbody td.accidate{width:12%}
.list_pirate01 thead th.date,
.list_pirate01 tbody td.date{width:12%}
.list_pirate01 thead th.writer,
.list_pirate01 tbody td.writer{width:12%}

/* 210730 전세계해적정보 게시판 반응형 추가 수정*/
.list_pirate07 thead th.num,
.list_pirate07 tbody td.num{width:8%}
.list_pirate07 thead th.seawhere,
.list_pirate07 tbody td.seawhere{width:14%}
.list_pirate07 thead th.atttype,
.list_pirate07 tbody td.atttype{width:14%}
.list_pirate07 thead th.title,
.list_pirate07 tbody td.title{width:27%}
.list_pirate07 thead th.shipwhere,
.list_pirate07 tbody td.shipwhere{width:15%}
.list_pirate07 thead th.writer,
.list_pirate07 tbody td.writer{width:10%}

/* 210730 해적행위 피해예방교육 게시판 반응형 추가 수정*/
.list_pirate05 thead th.num,
.list_pirate05 tbody td.num{width:12%}
.list_pirate05 thead th.learntitle,
.list_pirate05 tbody td.learntitle{width:60%;}
.list_pirate05 tbody td.learntitle{color:#000000; text-align:left;	 max-width:100%; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }


.list_pirate05 thead th.date_start,
.list_pirate05 tbody td.date_start{width:14%}
.list_pirate05 thead th.date_start,
.list_pirate05 tbody td.date_start{width:14%}

.list_shipInfoOpen tbody, tr, .list_shipInfoOpen thead tr {width:100%; overflow:hidden;}
.list_shipInfoOpen tbody tr td {padding:10px 8px; text-align:center;}



/* Mobile 환경에서 인증서 로그인버튼 숨기기 */
@media screen and (max-width: 1024px){
	#loginBtn1 {display: none;}
}

 /* Mobile 768 이하 210729*/
@media screen and (max-width: 768px) {
	
	.list10 tbody tr,
	.list10 thead tr{display:block; width:100%; overflow:hidden;}
	.list10 tbody tr{padding:5px 0;}

	.list10 thead tr th{display:none; }
	.list10 tbody tr td{display:inline-block; float:left; padding:4px 8px}


	.list10 thead th.num,
	.list10 tbody td.num,
	.list10 thead th.attach,
	.list10 tbody td.attach{display:none;}
	
	
	.list10 thead th.title,
	.list10 tbody td.title{width:100%;}
	.list10 tbody td.title{width:100%; border:none; }

	.list10 thead th.writer,
	.list10 tbody td.writer{width:50%;}
	.list10 tbody td.writer{font-size:1.5rem; text-align:left; color:#747885;}

	.list10 thead th.date,
	.list10 tbody td.date{width:50%;  }
	.list10 tbody td.date{font-size:1.5rem; text-align:right; color:#747885;}

	.list10 thead th.category,
	.list10 tbody td.category{width:100%; text-align:left; color:#24278c;}

	.list10 thead th{padding:10px 0; font-size:1.5rem;}
	.list11 tbody td{padding:8px 4px; font-size:1.5rem;}
	

	/* 210730 Q&A 게시판 반응형 추가 수정*/
	.list_qna tbody td.date2{width:50%; font-size:1.5rem; text-align:left; color:#747885;  }
	.list_qna tbody td.date2::before{ content:'답변일: '; padding-right:4px; }	 
	.list_qna tbody td.answerwhat{width:50%; font-size:1.5rem; text-align:right;  }
	
	/* 210730 설문조사 게시판 반응형 추가 수정*/
	.list_survey tbody td.daterange			{width:100%; text-align:left; }
	.list_survey tbody td.daterange::before{content:'설문기간: ';}
	.list_survey tbody td.party				{width:100%; text-align:left; color:#747885; }
	.list_survey tbody td.party::before{content:'참여대상: ';}
	.list_survey tbody td.writer				{width:50%; font-size:1.5rem; text-align:left; color:#747885; }
	.list_survey tbody td.answerwhat		{width:50%; font-size:1.5rem; text-align:right;}

	/* 210730 안전정보 게시판 반응형 추가 수정*/
	.list10 tbody td.category::before{content:'카테고리: ';}
	
	
	/* 210730 안전정보 게시판 반응형 추가 수정*/
	.list_know tbody td.title		{width:100%; text-align:left; }
	
	/* 210730 항행경보 게시판 반응형 추가 수정*/
	.list_know03 tbody td.alarmpalce		{width:100%; text-align:left; }
	.list_know03 tbody td.alarmpalce::before{content:'경보구역: ';}
	.list_know03 tbody td.date_start		{width:50%; font-size:1.5rem; text-align:left; color:#747885; }
	.list_know03 tbody td.date_start::before{content:'시작일: ';}
	
	.list_know03 tbody td.date_end			{width:50%; font-size:1.5rem; text-align:right; color:#747885; }
	.list_know03 tbody td.date_end::before{content:'종료일: ';}
	
	.list_know03View tbody td.alarmpalce		{width:100%; text-align:left; }
	.list_know03View tbody td.alarmpalce::before{content:'경보구역: ';}
	.list_know03View tbody td.date_start		{width:50%; font-size:1.5rem; text-align:left; color:#747885; }
	.list_know03View tbody td.date_start::before{content:'시작일: ';}
	
	.list_know03View tbody td.date_end			{width:50%; font-size:1.5rem; text-align:right; color:#747885; }
	.list_know03View tbody td.date_end::before{content:'종료일: ';}
	
	/* 210730 항행경보 게시판 반응형 추가 수정*/	
	.list_pirate01 tbody td.category{width:100%; text-align:left;}
	.list_pirate01 tbody td.category::before{content:'분류: ';}

	.list_pirate01 tbody td.title{width:100%; text-align:left;}
	
	.list_pirate01 tbody td.accidate{width:100%; text-align:left; font-size:1.5rem; color:#747885; }
	.list_pirate01 tbody td.accidate::before{content:'사고발생일자: ';}
	
	.list_pirate01 tbody td.date{width:50%; font-size:1.5rem; text-align:left; color:#747885; }
	.list_pirate01 tbody td.writer{width:50%; font-size:1.5rem; text-align:right; color:#747885; }
	
	/* 210730 전세계해적정보 게시판 반응형 추가 수정*/	
	.list_pirate07 tbody td.seawhere{width:100%; text-align:left;}
	.list_pirate07 tbody td.seawhere::before{content:'구역: ';}
	.list_pirate07 tbody td.atttype{width:100%;}
	.list_pirate07 tbody td.shipwhere{width:50%; font-size:1.5rem; text-align:left; color:#747885;}
	.list_pirate07 tbody td.shipwhere::before{content:'선박국적: ';}
	.list_pirate07 tbody td.writer{width:50%; text-align:right;}
	
	/* 210730 해적행위 피해예방교육 게시판 반응형 추가 수정*/
	.list_pirate05 tbody td.learntitle{width:100%;  text-align:left;}
	.list_pirate05 tbody td.date_start{width:50%; font-size:1.5rem; text-align:left; color:#747885; }
	.list_pirate05 tbody td.date_start::before{content:'교육일: ';}
	.list_pirate05 tbody td.date_end{width:50%; font-size:1.5rem; text-align:right; color:#747885; }
	.list_pirate05 tbody td.date_end::before{content:'교육만료일: ';}
	
	.list_shipInfoOpen tbody tr,
	.list_shipInfoOpen thead tr{width:100%; overflow:hidden;}
	.list_shipInfoOpen thead tr th{padding: 10px 8px;} 
	.list_shipInfoOpen tbody tr td {padding:10px 8px; text-align:center;}
	
	
}

 /* Small Mobile 768px 이하 */
@media screen and (max-width: 768px) { 
	.list10 colgroup{display:none;}
}

/* Table View10 - 공지사항 상세  */
.view10 thead tr th{
	border-bottom:1px solid #dbe0e8;
	text-align:center;
	font-size:1.6rem;
	padding:14px 0;
	color:#323336;
	font-weight: 400;
}

.view10 thead th.title{
	font-size:2.4rem;
	border-bottom:4px solid #dbe0e8;
	background:#fff;
}
.view10 thead tr th.writer,
.view10 thead tr th.date{ width:15%; }
.view10 thead tr td.writer{width:55%}


 /* Mobile 768 이하 */
 @media screen and (max-width: 768px) {
	.view10 thead th.title{
		padding:10px 0;
		font-size:2.1rem;
		border-bottom:2px solid #dbe0e8;
	}	

	/*.view10 thead tr.viewInfo{
		display:none;
	} */
	
	.view10 thead tr th.writer,
	.view10 thead tr th.date{ width:25%; }
	.view10 thead tr td.writer{width:auto}
			
 }


.view10 thead tr td{
	border-bottom:1px solid #dbe0e8;
	text-align:left;
	font-size:1.6rem;
	color:#323336;
	padding:14px 0;
	font-weight: 600;
}

.view10 tbody tr th,
.view10 tbody tr td{
	position:relative;
	border-bottom:1px solid #dbe0e8;
	text-align:center;
	font-size:1.6rem;
	padding:7px 10px;
}


tbody tr td > .table_con{ 
	text-align:left;
	font-size:1.6rem;
	line-height:2.4rem;
	padding:12px 15px;
}

/* Veiw page 첨부파일 스타일 */
tbody tr.attach_box td{
	text-align:left;
	padding:7px 10px;
	border-bottom:1px solid #06449c;
}

tbody tr.attach_box td > strong{
	font-weight: 600;
	font-size:1.6rem;
	line-height: 2.6rem;
}

tbody tr.attach_box td .attach_list{
	display:block;
	margin:0 5px;
}
tbody tr.attach_box td .attach_list li{
	padding:5px 0 7px 20px;
	background:url(../../../../images/subpage/icon_view_attach_file.png) left 3px no-repeat;
	
}
tbody tr.attach_box td .attach_list li a{
	color:#000;
	border-bottom:1px solid #7f7f7f;
}
tbody tr.attach_box td .attach_list li a:hover{
	color:#06449c;
	border-bottom:1px solid #06449c;
}



/* Table style : 전세계 해적정보 */

/* view10_1 thead : 테이블 헤더 */
.view10_1 thead tr th.title:after{ display:none; }
.view10_1 thead tr.viewLocation th{ width:20%; }

.view10_1 thead tr th{position:relative;}
.view10_1 thead tr td{padding:12px 10px;}


/* view10_1 tbody : 테이블 바디 */
.view10_1 tbody tr th,
.view10_1 tbody tr td{position:relative; padding:12px 10px;}
.view10_1 tbody tr td{text-align:left;}

/* Small Pc 1280이하까지 */
@media screen and (max-width: 1280px) {
	.view10_1 tbody tr th,
	.view10_1 tbody tr td{position:relative; padding:10px 8px;}
}

.view10_1 tbody tr th:after{
	content: "";
	position:absolute;
	display:block;
	width:2px;
	height:14px;
	background:#bcc7da;
	margin-top:-8px;
	top:50%;
	right:0;
}


.view10_1 tbody tr .row{position: relative;}



.view10_1 tbody tr .pirates_con0 strong{
	display:inline-block;
	padding:4px 15px;
	border-right:2px solid #d2d8df;
}
.view10_1 tbody tr .pirates_con0 p{ padding:4px 15px;}
.view10_1 tbody tr .pirates_con0 p span{ display:inline-block;}
.view10_1 tbody tr .pirates_con0 p span.red{ color:red;  padding-right:10px;}
.view10_1 tbody tr .pirates_con0 p span.blue{ color:blue;}


/* Mobile 768이하까지 */
@media screen and (max-width: 768px) {
	.view10_1 thead tr.viewLocation th{ width:14%; }
	.view10_1 tbody tr .pirates_con0 strong{padding: 4px 8px}
	.view10_1 tbody tr .pirates_con0 p{ padding:4px 8px;}
}


.view10_1 tbody tr .pirates_con1{border-right:1px solid #d2d8df;}
.view10_1 tbody tr .pirates_con1:last-child{border-right:0;}

/* Small Pc 1280이하까지 */
@media screen and (max-width: 1280px) {
	.view10_1 tbody tr .pirates_con1:nth-child(2){border-right:0;}
}

.view10_1 tbody tr .pirates_con1 p{
	position: relative;
	display:block;
	height:22px;
	width:100%;
	text-align:center;
	font-size:1.8rem;
	color:#000;
}

.view10_1 tbody tr .pirates_con1 p.icon_tit{
	font-size:1.5rem;
	margin-bottom:5px;
}
.view10_1 tbody tr .pirates_con1 p.icon_tit i{
	position: relative;
	display:inline-block;
	width:20px;
	height:20px;
	text-align:left;
	text-indent:-9999px;
	overflow:hidden;
	top:5px;
	margin-right:4px;
}

.view10_1 tbody tr .pirates_con1 p.icon_tit i.icon_earth{background:url(../../../../images/subpage/icon_earch.png) center center no-repeat;}
.view10_1 tbody tr .pirates_con1 p.icon_tit i.icon_doc{background:url(../../../../images/subpage/icon_doc.png) center center no-repeat;}
.view10_1 tbody tr .pirates_con1 p.icon_tit i.icon_attack{background:url(../../../../images/subpage/icon_attack.png) center center no-repeat;}
.view10_1 tbody tr .pirates_con1 p.icon_tit i.icon_emblence{background:url(../../../../images/subpage/icon_emblence.png) center center no-repeat;}



/* map_wrap : 지도샘플 */
.map_wrap{	margin-bottom:20px;}


/* 선박명, 선박국적, 피해자수 선박종류 */
.accident_info{
	padding-bottom:5px;
}
.accident_info .accident_con{
	justify-content: center;
    position: relative;
    padding:0 2px;
	margin:0;
	text-align:center;
}
.accident_info .accident_con > p{
	display:block;
	margin:0 auto;
	width:95%;
	padding:15px 0;
	border-radius:12px;
	color:#fff;
}
.accident_info .accident_con > p > strong{
	display:block;
	padding-bottom:4px;
	font-size:1.6rem;
	color:#c8d0db;
}
.accident_info .accident_con > p > span{
	font-weight: 200;;
	font-size:2.2rem;
	color:#c8d0db;
}

@media screen and (max-width: 1024px) {
	.accident_info .accident_con > p{
		width:98%;
		padding:10px 0;
	}
	.accident_info .accident_con > p > strong{
		font-size:1.4rem;
	}
	.accident_info .accident_con > p > span{
		font-size:1.8rem;
	}
}

.accident_info .accident_con > p.boxcolor1{ background:#182f4f; }
.accident_info .accident_con > p.boxcolor2{ background:#3d4f68; }
.accident_info .accident_con > p.boxcolor3{ background:#303843; }
.accident_info .accident_con > p.boxcolor4{ background:#474f5a; }



/* 선원국적, 사고개요, 출처 */
.view10_1 tbody tr.data_style1 th{ width:18%; }
 /* Tablet 1024 이하 */
@media screen and (max-width: 1024px) {
	.view10_1 tbody tr.data_style1 th{
		width:15%;
	}
	.view10 tbody tr th, .view10 tbody tr td{
		font-size:1.4rem;
	}

}
 /* Mobile 768 이하 */
@media screen and (max-width: 768px) {
	.view10_1 tbody tr.data_style1 th{
		width:16%;
	}
}
 /*Small Mobile 460 이하 */
 @media screen and (max-width: 460px) {
	.view10_1 tbody tr.data_style1 th{
		width:21%;
	}

}


/* Table Button */

.tableButton{
	display:block;
	width:100%;
	margin-top:30px;
	text-align:right;
}
.tableButton > .btn{
	display:inline-block;
	padding:10px 15px;
	font-weight: 400;
}

.tableButton > .boardView_list{
	color:#06449c;
	border:1px solid #06449c;
	border-radius:8px;
	font-size:1.5rem;
	background:#fff;
}
.tableButton > .boardView_list:hover{
	color:#fff;
	background:#06449c;
}

.tableButton > .btn_icon{
	display:inline-block;
	width:38px;
	height:38px;
	text-indent: -9999px;
	overflow:hidden;
	border:1px solid #71777d;
	border-radius:8px;
}
.tableButton > .icon_facebook{background:url(../../../../images/subpage/icon_facebook.png) center center no-repeat;}
.tableButton > .icon_tweeter{background:url(../../../../images/subpage/icon_tweeter.png) center center no-repeat;}

.tableButton > .btn_icon:hover{
	border:1px solid #06449c;
	background: #06449c;
}
.tableButton > .icon_facebook:hover{background:url(../../../../images/subpage/icon_facebook_on.png) center center no-repeat #06449c}
.tableButton > .icon_tweeter:hover{
	background:url(../../../../images/subpage/icon_tweeter_on.png) center center no-repeat #02acf4;
	border:1px solid #02acf4;
}


/* Table inline btn : 테이블 내 인라인 버튼 */
.table_inline{
    position: relative;
    display: inline-block;
    padding: 3px 5px;
    font-size: 1.4rem;
    border: 1px solid #658ddc;
    border-radius: 3px;
    color: #658ddc;
    margin-left: 4px;
    top: -1px;
    background: #fff;
}

.table_inline:hover{
	color:#fff;
	background:#658ddc;
}



/* Icon : 아이콘 */
i.icon{ 
	display:inline-block;
	width:1.6rem;
	height:1.6rem;
	text-align:left;
	text-indent:-9999px;
	overflow:hidden;
 } 
i.icon_file{ background:url(../../../../images/subpage/icon_file.png) center center no-repeat; }



/* Main Tab : 메인탭 */
.mainTab_wrap{
	position: relative;
	width:100%;
	margin-bottom:30px;
}
 /* Mobile 768 이하 */
 @media screen and (max-width: 768px) {
	.mainTab_wrap{
		margin-bottom:10px;
	}
}


.maintab{
	position: relative;
    display:flex;
    flex-wrap:wrap;
    width:100%;
    justify-content:space-between;
	font-size:0;
}

.maintab > li{
	display:flex;
	flex:1 2px;
    flex-wrap:wrap;
    align-items:center;
	justify-content: center;
	border:1px solid #d2d8df;
	box-sizing: border-box;
    -webkit-transition-property: color, border-color, background-color, box-shadow;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-in-out ;
    transition-property: color, border-color, background-color, box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out ;
}
.maintab > li+li{
	border-left:none;
}

.maintab > li a{
	display:block;
	width:100%;
	text-align:center;
	padding:13px 0 10px ;
	color:#323336;
	font-size:1.6rem;
    -webkit-transition-property: color, border-color, background-color, box-shadow;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-in-out ;
    transition-property: color, border-color, background-color, box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out ;
}

.maintab > li.active a{
	font-weight:600;
	font-size:1.8rem;
	color:#06449c;
}

.maintab > li.active:hover,
.maintab > li.active{
	border-bottom:4px solid #06449c;
	background:#fff;
}
.maintab > li.active:hover a,
.maintab > li.active {	color:#06449c;  cursor:default;}


.maintab > li:hover{
	background:#06449c;
}
.maintab > li:hover > a{
	color:#fff;
}

 /* Mobile 768 이하 : 메인탭 버튼*/
 @media screen and (max-width: 768px) {

	.maintab > li a{padding:10px 0 7px ;}
	.maintab > li.active a{font-size:1.6rem;}

	.maintab > li.active:hover,
	.maintab > li.active{
		border-bottom:2px solid #06449c;
	}
}


.tabcontents{
	display:block;
}

.tabcontents .tabcon{
	display:none;
	padding:10px 15px;
	font-size:1.6rem;
}
.tabcontents .active{ display: block !important; }

/*page_num*/
.page_num{clear:both; text-align: center; display: block; margin-bottom: 20px;}
.page_num a{display: inline-block;width: 28px; height: 28px;background-color: #fff;color:#101010;letter-spacing: 0;text-align: center;vertical-align: middle;line-height: 32px; border-radius:2px;}
.page_num strong{display: inline-block;width: 28px; height: 28px;background-color: #186bb9; color:#fff;text-align: center;vertical-align: middle;line-height: 32px; border-radius:2px;}
.page_num >a.skip {text-indent: -9999px;}
.page_num >a.prev10{background:url(/images/juso/icon_first.png) 9px 10px no-repeat; background-size: 10px 10px}
.page_num >a.prev{background:url(/images/juso/icon_prev.png) 10px 10px no-repeat; background-size: 6px 10px}
.page_num >a.next{background:url(/images/juso/icon_next.png) 10px 10px no-repeat; background-size: 6px 10px}
.page_num >a.next10{background:url(/images/juso/icon_last.png) 9px 10px no-repeat; background-size: 10px 10px}