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

body{ font-size:1em; color:#333; margin:0; padding:0; background:#f7f7f7;}

a:focus, button:focus , input:focus{ outline:none;}

.mobile_toggle_btn{ cursor: pointer; border:none; background:none; display:none;  position: fixed; right: 40px; top: 3.5vw; z-index: 30; width: 30px; height: 30px;}
.mobile_toggle_btn span{ display:block; width:30px; height:3px; background:#000; margin-bottom:5px;}
.mobile_toggle_btn span:last-child{ margin-bottom:0;}
.mobile_toggle_btn.active span{ background: #fff;}
.mobile_toggle_btn.active span:nth-child(1){ transform: rotate(-45deg); position: absolute; top: 10px;}
.mobile_toggle_btn.active span:nth-child(2){ transform: rotate(-135deg);    position: absolute; top: 10px;}
.mobile_toggle_btn.active span:nth-child(3){ display:none;}
.hide{ display:none;}


.body_web{background: url(../images/front/bg2.jpg) top center repeat-x; }

.header_div .outer{ max-width: 1000px; margin: 0 auto;padding:0;}
.header_div .outer .logo{ height:76px; background: url(../images/front/header_bg.jpg) top left no-repeat; position: relative;}
.header_div .outer .logo a{ display: block; width: 100%; height: 100%;}
.header_div .outer .logo h1{ display: none;}


.main_div .outer{ max-width:970px; margin:0 auto; padding:20px 15px; display: flex; flex-wrap: wrap; background: #fff;}
.main_div .outer .left_div{ width: 230px;}
.main_div .outer .left_div .navi_div ul{ margin: 0; padding: 0; list-style: none;}
.main_div .outer .left_div .navi_div .item{ margin-bottom: 5px;transition: 0.5s ease;}
.main_div .outer .left_div .navi_div .item.big{ margin-bottom: 15px;}
.main_div .outer .left_div .navi_div .item:hover{ opacity: 0.6;}
.main_div .outer .right_div{ width: calc(100% - 230px);}
.main_div .outer .right_div .title h3{ font-size: 24px;color: #333;}
.main_div .outer .right_div .title h3 a{color: #333; text-decoration: none;}
.main_div .outer .right_div .title h3 a:hover{color: #C65A72; }
.main_div .outer .right_div .banner_carousel .item img{ width: 100%;} 

.main_div .outer .right_div .border{border: 7px solid #ededed;}
.main_div .outer .right_div .query_div{ padding: 10px;}
.main_div .outer .right_div .query_div .search_div .item{ font-size: 16px; display: flex; flex-wrap: wrap; margin: 10px 0; padding: 5px 0;}
.main_div .outer .right_div .query_div .search_div .item .col:nth-child(1){ width: 100px;}
.main_div .outer .right_div .query_div .search_div .item .col:nth-child(2){ width: calc(100% - 100px);}
.main_div .outer .right_div .query_div .search_div .item input{ width: 100%;font-size: 16px;}
.main_div .outer .right_div .query_div .search_div .item .captcha{ display: inline-flex; justify-content: space-between; align-items: center;}
.main_div .outer .right_div .query_div .search_div .item .captcha input{ width:calc(100% - 110px) ;}
.main_div .outer .right_div .query_div .search_div .item .captcha img{ width: 100px;}
.main_div .outer .right_div .query_div .search_div .item .captcha input[type="hidden"]{ width: 0;}
.main_div .outer .right_div .query_div .search_div .item.action{ justify-content: center;}
.main_div .outer .right_div .query_div .search_div .item.action input{ width: 200px; margin: 0 15px;}
.main_div .outer .right_div .query_div .search_div .item .col.select_birthday{ display: inline-flex; align-items: center; justify-content: space-between;}
.main_div .outer .right_div .query_div .search_div .item .col.select_birthday select{ width: 32%;    font-size: 16px; padding: 2px 0;}
.main_div .outer .right_div .query_div .sub_title h4{ color: #C65A72; margin: 0; font-size: 18px; font-weight: 800;}

.main_div .outer .right_div .query_div .table_outer table{ width: 100%; border-left: 1px solid #333;border-top: 1px solid #333;border-spacing: 0; }
.main_div .outer .right_div .query_div .table_outer table td{border-right: 1px solid #333;border-bottom: 1px solid #333;padding:2px 5px;}
.main_div .outer .right_div .query_div .table_outer table tr:first-child td{ background: #dfdfdf; font-weight: 800;}
.main_div .outer .right_div .query_div .user_info{ padding-left:5px;}
.main_div .outer .right_div .query_div .user_info .item{font-size: 16px; display: flex; flex-wrap: wrap; margin: 5px 0;  }
.main_div .outer .right_div .query_div .user_info .item .col:nth-child(1){ width: 85px; padding-left: 15px; position: relative;}
.main_div .outer .right_div .query_div .user_info .item .col:nth-child(1)::before{ content: ''; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; background: #333;}
.main_div .outer .right_div .query_div .user_info .item .col:nth-child(2){ width: calc(100% - 100px); font-weight: 800;color: #C65A72;}



.main_div .outer .pagination{ text-align:center; font-size:16px; color:#000;}
.main_div .outer .pagination a{ color:#000; display:inline-block;padding:0 3px; margin:20px 3px; text-decoration:none;}
.main_div .outer .pagination strong{  display:inline-block;padding:0 3px; margin:20px 3px; background:#fe939e; color:#fff; }
.main_div .outer .pagination a:hover{ color:#fe939e;}

.body_web .ui-datepicker-title{ font-size: 15px;}
.body_web .ui-datepicker select.ui-datepicker-month,.body_web  .ui-datepicker select.ui-datepicker-year{ width: 35%;}


.overlay{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:20;}
.body_mobile_active .overlay{ display:block;}

#mobile_nav{ display:none;}

.body_mobile_active #mobile_nav{ display:block;position:fixed; left:0; top:50px; width:100%; height:calc(100% - 50px); z-index:21; }

#mobile_nav ul{ margin:0 20px; padding:0; list-style:none;}
#mobile_nav ul ul{ margin:0;}
#mobile_nav ul li a{ display:block; padding:10px 0; color:#fff; font-size:20px; position:relative; text-decoration:none;}
#mobile_nav ul li a:first-child{ border-bottom:1px solid rgba(255,255,255,0.5);}
#mobile_nav ul li a span{ display: inline-block; position: absolute; right: 15px; top: 10px;}



.error{ color:#f00;}

.popup{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; align-items: center; justify-content: center; z-index:21;}
.active_popup .popup.active{ display:flex;}

.footer_div{ padding: 15px 0; background: url(../images/front/mainfoot_bg.jpg) center top repeat-x;  color: #333333; font-size: 16px; line-height: 1.6;}
.footer_div .outer span{ display: inline-block; padding:0 10px ;}
.footer_div .outer{ max-width: 1000px; margin: 0 auto; padding: 0 15px; display: flex; flex-wrap:wrap ; justify-content: space-between; }
.footer_div .outer a{color: #333333; text-decoration: none;font-size: 16px; }
.footer_div .outer .col02{ color: #fff;}

@media screen and (max-width: 1280px){


}
@media screen and (max-width: 1240px){

}
@media screen and (max-width: 1050px){	
	.header_div .outer .logo{ background-size: cover;}
	.main_div .outer{ width:970px;}
}
@media screen and (max-width: 1022px){
	.mobile_toggle_btn{ display:block; }
	.active_mobile .mobile_toggle_btn{ display:none; }
	.mobile_toggle_btn{ right: 20px;}

	.header_div { position: fixed; width: 100%; top: 0; z-index: 10;}
	.main_div{ margin-top: 10.5vw;}
	.main_div .outer{ width: calc(100% - 30px);}
	.main_div .outer .left_div{ display: none;}
	.main_div .outer .right_div{ width:100%;}
	
	.header_div .outer .logo{ height: 10.5vw;}


}

@media screen and (max-width: 992px){
	.footer_div .outer{ display: block;}
	.footer_div .outer .col01{ width: 100%; text-align: center;}
	.footer_div .outer .col02{ width: 100%; text-align: center;}

@media screen and (max-width: 768px){

}

@media screen and (max-width: 640px){	
	.mobile_toggle_btn{ top: 2.6vw;}
	.header_div .outer .logo{ height: 9.5vw;}
	.main_div{ margin-top: 9.5vw;}
	.main_div .outer .right_div .query_div .search_div .item.action input{ width: 40%; margin: 5px;}

	.main_div .outer .right_div .query_div .table_outer{ overflow-x: auto;}
	.main_div .outer .right_div .query_div .table_outer table{ width: 640px;}
}

@media screen and (max-width: 480px){	
	.mobile_toggle_btn{ top: 1vw;}

	.main_div .outer .right_div .query_div .search_div .item .col:nth-child(1){ width: 100%; margin-bottom: 10px;}
	.main_div .outer .right_div .query_div .search_div .item .col:nth-child(2){ width: 100%;}

	.main_div .outer .right_div .query_div{ padding: 20px;}
}