@charset "utf-8";
/*button css*/
	.btn-more {position:absolute;right:3%;bottom:20%;width:120px; height:50px; border:none; background-color:#fff;background:url('../images/icon_more.png') no-repeat right; background-size:20px; text-align:left;font-size:30px; font-weight:300; color:#c9c9c9; line-height: 16px; transition: 0.4s all; cursor:pointer}
	.btn-more:hover  {transform: translateX(10px)}
	.btn_blue {margin-top:20px; width:80px; height:50px; border:none; background:#1b284b; font-size:18px; ; color:#fff; cursor:pointer}
	.btn_green {margin-top:20px; width:80px; height:50px; border:none; background:#2c6a2e; font-size:18px; ; color:#fff; cursor:pointer}
	.btn_red {margin-top:20px; width:80px; height:50px; border:none; background:#7d0000; font-size:18px; ; color:#fff; cursor:pointer}
	.btn_lightred {margin-top:20px; width:80px; height:50px; border:none; background:#d14949; font-size:18px; ; color:#fff; cursor:pointer}
	.btn_grey {margin-top:20px; width:100px; height:50px; border:none; background:#666; font-size:18px; ; color:#fff; cursor:pointer}

	.btnright {display:block; position:relative; clear:both; text-align:right; font-size:0}
	.btnleft {display:block; position:relative; clear:both; text-align:left; font-size:0}
	.btncenter {display:block; position:relative; clear:both; text-align:center; font-size:0}

/*S : searchbtnbox*/
	.searchbtnbox {position:relative; margin:30px 0 20px 0}
	.searchbtnbox .boardschbox .optionbox {float:left; margin:0 13px 0 0; width:30%}
	.searchbtnbox .boardschbox select {padding-left:10px; width:100%; height:100%; border:0; background:url('../images/optionbox_optionbox_icon.png') no-repeat 95% 50%; color:#333; background-size:35px; font-size:15px; cursor:pointer}
	.searchbtnbox .boardschbox select option {color:#999;font-size:15px}
	.searchbtnbox .boardschbox .inpbox {float:left; display:inline-block; width:50%}
	.searchbtnbox .boardschbox .inpbox input {padding:0 15px; width:100%; height:100%;border:0;  font-size:15px; color:#333}
	.searchbtnbox .boardschbox .btnright {display:inline-block;  width:15%; height:40px;background:#1b284b}
	.searchbtnbox .boardschbox .btnright button {width:100%; height:100%; border:none; background:url('../images/optionbox_btnright_icon.png') no-repeat 50%; background-size:20px; font-size:0; cursor:pointer}
	.searchbtnbox .boardschbox .optionbox, .searchbtnbox .boardschbox .inpbox {height:40px; border:1px solid #aaa}
/*E : searchbtnbox*/	

/*S : bbs*/
	.bbs .bbs_list {overflow: hidden; margin:30px 0}
	.bbs .bbs_list .moblielist {width: 100%;border-top:2px solid #333; font-size:16px}
	.bbs .bbs_list .moblielist dl {padding:20px 18px; border-bottom:1px solid #bfbfbf}
	.bbs .bbs_list .moblielist dl.notice{background-color:#ebeeff; color:#172e6b; font-weight:bold}
	.bbs .bbs_list .moblielist dl.notice dd em {color:#b72d2d; font-weight:bold}
	.bbs .bbs_list .moblielist dl dt a{display:block; color:#333; font-size:18px}
	.bbs .bbs_list .moblielist dl dd {color:#999}
	.bbs .bbs_list .moblielist dl dd em, .bbs .bbs_list .moblielist dl dd strong, .bbs .bbs_list .moblielist dl dd span {font-weight:300;}
	.bbs .bbs_list .moblielist dl dd strong:after, .bbs .bbs_list .moblielist dl dd em:after {content: ""; display:inline-block; width:2px; height:11px; margin:0 8px; background-color: #999;}
	.bbs .bbs_list .guide {margin-top:100px; padding:20px; border:1px solid #e5e5e5;  color:#333 }
	.bbs .topTab {border-bottom:2px solid #333}
	.bbs .topTab ul li {display:inline-block}
	.bbs .topTab ul li.on {background:#172e6b}
	.bbs .topTab ul li.on a {color:#fff}
	.bbs .topTab ul li a{display:block; padding:10px 20px;font-size:40px; color:#333}
/*E : bbs*/	



/*paging*/
	.paging {clear:both; height:80px; margin:50px 0 0 0; text-align: center;}
	.paging:after {clear:both; overflow:hidden; display:block; content:""}
	.paging * {vertical-align:middle}
	.paging button {width:30px; height:30px; font-size:0; text-indent:-99999rem}
	.paging button.btn-paging-prev {border: none; background:url('../images/icon_paging_prev.png') no-repeat 50%; background-size:10px}
	.paging button.btn-paging-next {border: none; background:url('../images/icon_paging_next.png') no-repeat 50%; background-size:10px}
	.paging a {display:inline-block; height:30px; line-height:1}
	.paging a span{display: inline-block; width:30px; height:30px; margin: 0 5px; color: #666; font-size:15px; font-weight: 200; line-height:30px; transition:0.3s all;}
	.paging a span.on, .paging a span.on:hover {background-color:#1b284b; color:#fff}
	.paging a span:hover {border-bottom:1px solid #1b284b; color:#1b284b; font-weight: bold}


/*S : gallery*/
	.gallery .gallery_list ul li {width:100%;margin-top:50px; border:1px solid #e9e9e9; border-top:3px solid #172e6b}
	.gallery .gallery_list ul li span {display:block}
	.gallery .gallery_list ul li span img {width:100%; height:100%}
	.gallery .gallery_list ul li strong {overflow: hidden; display:block; padding:8px; white-space: nowrap; text-overflow:ellipsis}
/*E : gallery*/	

/*tab*/
	.four-menu .tab-box ul {display:flex; text-align:center;background: #f1f8ff;}
	.four-menu .tab-box ul li {width:50%}
	.four-menu .tab-box ul li.on a {background:#003876; color:#fff}
	.four-menu .tab-box ul li a {display:block; padding:15px 0; font-size:18px; font-weight:600; transition:all 0.2s}
	.four-menu .tab-box ul li a span {position:relative; display:inline-block}
	.four-menu .tab-box ul li:hover a {color:#003876}
	.four-menu .tab-box ul li a span::after {content: "";position:absolute; top:-5px; left:-10px; width:20px; height:20px; border-radius:100px; transition:all 0.5s}
	.four-menu .tab-box ul li:hover a span::after {background:#ffc1076b}
	.four-menu .tab-box ul li.on:hover a {color:#fff}


	@media (min-width: 1200px) {
		/*button css*/
			.btn-more {width:53px; height:16px; background-size:auto; font-size:13px; line-height: 16px}
			.btn_blue, .btn_red, .btn_yellow, .btn_green {margin-top:25px; width:100px; height:50px; font-size:15px}
			.btn_skyblue, .btn_lightred {margin-top:7px; width:188px; height:67px}

			.btn_grey {width:200px; height:30px; background-size:auto; font-size:13px; line-height: 1}

		/*S : searchbtnbox*/
			.searchbtnbox {margin:30px 0 19px 18px}
			.searchbtnbox fieldset{float: right;}
			.searchbtnbox::after {content:''; display:block; clear:both}
			.searchbtnbox .boardschbox .optionbox, .searchbtnbox .boardschbox .inpbox{height:43px}
			.searchbtnbox .boardschbox .optionbox {margin-right:13px;width:155px}
			.searchbtnbox .boardschbox select {padding-left:15px;background-color:#fff; background-size:auto; font-size:15px; color:#999}
			.searchbtnbox .boardschbox .inpbox {width:230px;border-right:none}
			.searchbtnbox .boardschbox .inpbox input  {font-size:15px}
			.searchbtnbox .boardschbox .btnright {width:50px; height:43px}
			.searchbtnbox .boardschbox .btnright button {background-size:auto}
		/*E : searchbtnbox*/	

		/*S : bbs*/
			.bbs .bbs_list {margin:0 0 65px 0}
			.bbs .bbs_list table {width: 100%;border-top:2px solid #333}
			.bbs .bbs_list table thead {border-bottom:2px solid #333}
			.bbs .bbs_list table tbody tr {transition:0.3s}
			.bbs .bbs_list table tbody tr.notice {background-color:#ebeeff; color:#172e6b; font-weight:bold}
			.bbs .bbs_list table tbody tr:hover {background-color:#edfaff;}
			.bbs .bbs_list table tbody tr:hover td a {color:#172e6b}
			.bbs .bbs_list table th, .bbs .bbs_list table td {padding:13px 0; text-align:center}
			.bbs .bbs_list table tbody td {border-bottom:1px solid #bfbfbf; cursor:pointer}
			.bbs .bbs_list table tbody td.bbs_tit {text-align:left; }
			.bbs .bbs_list table tbody td.bbs_img {padding:15px 0 11px 0; font-size:10px}
			.bbs .bbs_list table tbody td.reply {padding-left:20px}
			.bbs .bbs_list table tbody td a {overflow:hidden; display:block; width:740px;white-space: nowrap; text-overflow:ellipsis;transition:0.4s}
			.bbs .bbs_list table tbody td img {width:auto}
			.bbs .bbs_list .guide {margin-top:50px; padding:20px 20px 20px 225px; background: url('../images/bbs_guide.png') no-repeat 3% center;}
			.bbs .topTab ul li a{font-size:20px}
		/*E : bbs*/	

		/*S : gallery*/
			.gallery .searchbtnbox {margin-bottom:0}
			.gallery .gallery_list ul li {display:inline-block; width:24%; margin:20px 0 0 11px; text-align:center}
			.gallery .gallery_list ul li span {width:100%; height:200px}
		/*E : gallery*/	

		/*paging*/
        .paging {height:40px; margin:10px 0 0 0;}
        .paging button {width:40px; height:40px}
        .paging button.btn-paging-prev {background:url('../images/icon_paging_prev.png') no-repeat center center}
        .paging button.btn-paging-next {background:url('../images/icon_paging_next.png') no-repeat center center}
        .paging a {width:30px; height:30px; margin: 0 5px; font-size:15px; line-height:30px}
        .paging a:hover {color:#1b284b; font-weight: bold}

	}