@charset "utf-8";
/*..............................
<<reset.css>>
W's PARTNERS co.,ltd.
................................*/

@import url("reset.css");
@import url("ionicons.css");
@import url(https://fonts.googleapis.com/css?family=Oswald);

.clearfix:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/*text*/
::selection {
	background:#C8EBFF; /* Safari */
}

::-moz-selection {
	background:#C8EBFF; /* Firefox */
}
::-webkit-selection {
	background:#C8EBFF;
}

a{
	color: #5B97B4;
}

/*main css*/

html,body{
	width:100%;
}

.PAGE header{
	border-bottom: #5B97B4 solid 1px;
}

.page_ttl{

font-size: 15px;

font-weight: bold;

padding: 20px;
}

div.wrapper{
	width:100%;
	overflow:hidden;
	padding-bottom: 70px;
}

div.back{
	position:fixed;
	z-index:1;
	color:#f0f0f0;
	font-size: 1900px;
	top: -509px;
	left:0;
	margin:0;
	font-family:"Times New Roman", Times, serif;
}

/*hrader*/

header{
	width: 100%;
	z-index:9999;
}

header .logo_Area{
	width: 56px;
	height: 56px;
	position: absolute;
	top: 15px;
	left: 20px;
	background: #5B97B4;
	border-radius: 5px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}

header .logo_Area img{
	width: 46px;
	margin: 5px;
	height: 46px;
	border-radius: 5px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}

header div.header_in{
	position: relative;
	color: #fff;
}

header div.header_in div.navi_btn{
	display:none;
}

header div.header_in ul.navi{padding: 0 0 0 85px;background-color: #5B97B4;height: 50px;display: block;}

header div.header_in .navi li.link{
	position:relative;
	/* overflow:hidden; */
	text-align:right;
	font-size: 13px;
	float: left;
}

header div.header_in .navi li.lgo{
	display:none;
}

header div.header_in .navi li:hover a.link_a{
	background-color:#75b9da;
}
header div.header_in .navi li a.NOLINK{
	cursor: default;	
	opacity: 0.5;
}
header div.header_in .navi li:hover a.NOLINK{
	background-color:#5B97B4;
}
header div.header_in .navi li a{
	color: #fff;
	text-decoration: none;
	padding: 15px;
	display: block;
	transition: background-color 0.2s ease;
}

header div.header_in .navi li a:hover{
	background-color:#75b9da;
}

header div.header_in .navi li a span{
	background-color: #FF4D4D;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 12px;
	position: relative;
	top: -1px;
	margin-left: 7px;
}

header div.header_in .navi li.link ol{
	background-color: #76b3d0;
	text-align: left;
	position: absolute;
	z-index: 99;
	width: 180px;
	box-shadow: 0px 2px 17px -6px #9c9c9c;
	-moz-box-shadow:0px 2px 17px -6px #9c9c9c;
	-webkit-box-shadow:0px 2px 17px -6px #9c9c9c;
	top: 45px;
	display: none;
}
header div.header_in .navi li.link ol li{
	border-top: #5b97b4 solid 1px;
}
header div.header_in .navi li.link ol li:first-child{
	
}
header div.header_in .navi li.link ol li a{
	padding: 8px 17px;
}

header div.header_in .user{
	position: absolute;
	right: 0;
	top: 0;
	padding-right: 54px;
	z-index: 1;
}

header div.header_in .user p.userName{
	font-size: 12px;
	line-height: 50px;
}

header div.header_in .user div.userIcon{
	position: absolute;
	right: 7px;
	width: 35px;
	height: 35px;
	top: 8px;
	cursor: pointer;
}

header div.header_in .user div.userIcon img{
	width: 100%;
}

header div.header_in .user ul{
    background-color: #76b3d0;
    text-align: left;
    position: absolute;
    z-index: 99;
    width: 180px;
    box-shadow: 0px 2px 17px -6px #9c9c9c;
    -moz-box-shadow: 0px 2px 17px -6px #9c9c9c;
    -webkit-box-shadow: 0px 2px 17px -6px #9c9c9c;
    top: 45px;
    display: none;
    right: 5px;
}

header div.header_in .user ul li{

border-top: #5b97b4 solid 1px;
}

header div.header_in .user ul li a{
    color: #fff;
    text-decoration: none;
    padding: 8px 17px;
    display: block;
    transition: background-color 0.2s ease;
    font-size: 12px;
}

header .panks_cover{
    height: 40px;
    overflow: hidden;
    /* padding-bottom: 2px; */
}

header .panks {
    padding: 0 0 0 90px;
    height: 40px;
    border-bottom: #5B97B4 solid 1px;
}

header .panks li{
	float: left;
	line-height: 40px;
	color: #5b97b4;
	font-size: 13px;
	padding: 0px 10px;
	position: relative;
}

header .panks li a:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: -2px;
	width: 6px;
	height: 6px;
	margin: -4px 0 0 0;
	border-top: solid 1px #8bc4e0;
	border-right: solid 1px #8bc4e0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

header .panks li:last-child:after{
	display:none;
}

header .panks li a{
	color: #5B97B4;
	font-size: 13px;
	text-decoration: none;
}

header .panks li i{
	color: #5B97B4;
	font-size: 17px;
	text-decoration: none;
}

header .panks li a:hover{
	text-decoration:underline;	
}

@media screen and (max-width:1060px)  {
	header div.header_in .user{display:none;}
	div.countArea div.countHeader div.countConfig {
}
}

@media screen and (max-width: 820px)  {
	header div.header_in .user{display:none;}
	header div.header_in{
		position: relative;
		color: #fff;
		height: 50px;
		background-color: #5B97B4;
	}
	header div.header_in div.navi_btn{
		display:block;
		position: absolute;
		right: 10px;
		top: 5px;
		width: 40px;
		height: 40px;
	}

	header div.header_in ul.navi{padding: 0;background-color: #5B97B4;height: auto;position: absolute;top: 51px;width: 100%;display: none;z-index: 20;}
	
	header div.header_in .navi li{
		position:relative;
		overflow:hidden;
		text-align: left;
		font-size: 14px;
		float: none;
		width: 100%;
		border-bottom: #6fafce solid 1px;
	}
	
	header div.header_in .navi li a{
		color: #fff;
		text-decoration: none;
		padding: 14px;
		display: block;
		transition: background-color 0.2s ease;
		text-align: left;
	}
	header div.header_in .navi li.link ol{
		display: block !important;
		position: static;
		width: 100%;
	}
	header .panks li{
		float: initial;
		line-height: 40px;
		color: #5B97B4;
		font-size: 13px;
		padding: 0 8px;
		display: table-cell;
	}

	
	header .panks li a{
		color: #5B97B4;
		font-size: 13px;
		text-decoration: none;
	}
	header div.header_in .navi li.lgo{
		display:block;
	}
	
	header .panks_box {
		position: relative;
		padding: 0 0 0 10px;
		height: 40px;
		border-bottom: #5B97B4 solid 1px;
		/* padding: 0 0px 0 10px; */
		overflow: hidden;
		margin-top: 0;
		margin-bottom: 0;
		width: 100%;
		box-sizing: border-box;
		white-space: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		padding-bottom: 59px;
	}
	
	header .panks {
	  white-space: nowrap;
	  overflow-x: auto;
	  -webkit-overflow-scrolling: touch;
	  -ms-overflow-style: -ms-autohiding-scrollbar;
	  padding-right: 5px;
	  padding: 0;
	  position: absolute;
	  display: table;
	}
	header .logo_Area{
		width: 34px;
		height: 34px;
		position: absolute;
		top: 8px;
		left: 8px;
		background: #fff;
		border-radius: 5px;
	}

	header .logo_Area img{
		width: 30px;
		margin: 2px;
		height: 30px;
		border-radius: 5px;
	}
	
	header div.header_in .navi li a span{
		float: right;
	}

}

.icon-animation {
  width: 40px;
  height: 40px;
  /* float: left; */
  display: block;
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  }
  .icon-animation span {
    width: 30px;
    height: 1px;
    display: block;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -15px;
    }

.type-1 span {
  -webkit-transition: all 0.3s;
          transition: all 0.3s;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg); }








.type-1 .top {
  -webkit-transform: translateY(-17px);
  -ms-transform: translateY(-17px);
  transform: translateY(-10px);
  }

.type-1 .bottom {
  -webkit-transform: translateY(17px);
  -ms-transform: translateY(17px);
  transform: translateY(10px);
  }

.type-1.is-open .middle {
  background: rgba(255, 255, 255, 0); }

.type-1.is-open .top {
  -webkit-transform: rotate(-45deg) translateY(0px);
      -ms-transform: rotate(-45deg) translateY(0px);
          transform: rotate(-45deg) translateY(0px); }

.type-1.is-open .bottom {
  -webkit-transform: rotate(45deg) translateY(0px);
      -ms-transform: rotate(45deg) translateY(0px);
          transform: rotate(45deg) translateY(0px); }

/*BRAND*/
	.brand_Btn li{
		float: initial;
		line-height: 35px;
		color: #5B97B4;
		font-size: 13px;
		display: table-cell;
		border-right: #5B97B4 solid 1px;
		position: relative;
		border-bottom: #5B97B4 solid 1px;
		box-sizing: border-box;
		border-top: #5B97B4 solid 1px;
	}

	.brand_Btn li.select{
		background:#fff;
		padding: 0 47px;
		border-bottom: #fff solid 1px;
	}
	
	.brand_Btn li a{
		color: #5B97B4;
		font-size: 13px;
		text-decoration: none;
		display: block;
		padding: 0 47px;
	}
	.brand_Btn li span{
		background-color: #FF4D4D;
		padding: 3px 10px;
		border-radius: 20px;
		font-size: 10px;
		position: relative;
		top: -1px;
		margin-left: 7px;
		color: #fff;
	}
	.brand_Btn_cover{
		overflow:hidden;
		/* height: 36px; */
		margin-top: 0px;
		/* border-top: #5B97B4 solid 1px; */
	}
	
	.brand_Btn {
		position: relative;
		padding: 0;
		/* height: 53px; */
		/* border-bottom: #5B97B4 solid 1px; */
		/* padding: 0 0px 0 10px; */
		overflow: hidden;
		margin-top: 0;
		margin-bottom: 0;
		width: 100%;
		box-sizing: border-box;
		white-space: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		/* background: #DFEBF0; */
		padding-bottom: 39px;
	}
	
	.brand_Btn ul {
	  white-space: nowrap;
	  overflow-x: auto;
	  -webkit-overflow-scrolling: touch;
	  -ms-overflow-style: -ms-autohiding-scrollbar;
	  padding-right: 5px;
	  padding: 0;
	  position: absolute;
	  display: table;
	  background: #DFEBF0;
	  z-index: 9;
	}

	.brand_Btn .br_line{
		height: 1px;
		width: 100%;
		background-color: #5B97B4;
		position: absolute;
		bottom: 2px;
	}
/*cover*/

div.cover{
	position: fixed;
	top:0;
	left:0;
	width:50px;
	height: 100%;
	z-index:999;
	background:#FFF;
	box-shadow:rgba(89, 89, 89, 0.309804) 2px 0px 18px -2px;
	-webkit-box-shadow:rgba(89, 89, 89, 0.309804) 2px 0px 18px -2px;
	-moz-box-shadow:rgba(89, 89, 89, 0.309804) 2px 0px 18px -2px;
}

/*contents*/

div.contents{
	position:relative;
	padding: 10px;
	overflow: hidden;
}

div.top_back{
	width: 35px;
	height: 35px;
	position: fixed;
	bottom:20px;
	right:20px;
	cursor:pointer;
	z-index: 999;
	font-size: 30px;
	text-align: center;
	color: #5B97B4;
	background-color: #fff;
	border: #5B97B4 solid 1px;
	line-height: 33px;
	border-radius: 79px;
	font-size: 20px;
}

/*btn*/

div.c_btn{
	border: #5B97B4 solid 1px;
	border-radius: 6px;
	font-size: 13px;
	display: inline-block;
	color: #5B97B4;
	overflow: hidden;
	vertical-align: middle;
	padding: 3px 15px;
	cursor: pointer;
}

div.c_btn a{
	display: block;
	/* height: 100%; */
	padding: 3px 15px;
	color: #5B97B4;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

div.c_btn.on{
	padding: 3px 15px;
	background: #5B97B4;
	color: #fff;
	cursor: default;
}

div.c_btn a:hover{
	background-color:#5B97B4;
	color: #fff;
}

div.c_btn2{
	border: #5B97B4 solid 1px;
	border-radius: 6px;
	font-size: 13px;
	display: inline-block;
	color: #5B97B4;
	overflow: hidden;
	vertical-align: middle;
	/* padding: 3px 15px; */
	cursor: pointer;
}

div.c_btn2 a{
	display: block;
	/* height: 100%; */
	padding: 5px 20px;
	color: #5B97B4;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

div.c_btn2 a:hover{
	background-color:#5B97B4;
	color: #fff;
}

/*input系*/
input[type="date"]{
	font-size: 13px;
	padding: 5px;
	margin: 0 5px;
	-webkit-appearance: none;
	border: #5B97B4 solid 1px;
}

/*pager*/
div.pager{
	width:100%;
	margin-top: 20px;
	padding-bottom: 0px;
}

div.search_count{
	
float: left;
	
padding-left: 25px;
	
margin-top: 2px;
}

div.pager p.page{
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	margin-left:10px;
	font-size:15px;
}

div.pager ul{
	float:right;
	margin-right: 25px;
}

div.pager ul li{
	float:left;
	margin-left:4px;
	margin-bottom:4px;
}

li.dot{
    line-height: 40px;
    color: #5b97b4;
    max-height: 27px;
}

div.pager ul li.select a{
	background: #dfebf0;
	color: #5b97b4 !important;
	text-decoration:none;
}

div.pager ul li a{
	display:block;
	background-color: #5b97b4;
	padding:5px 8px;
	color: #fff !important;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	border: solid 1px #5b97b4;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	transition: background-color 0.2s linear;
	text-decoration: none;
}

div.pager ul li:hover a{
	text-decoration:none;
	background-color: #dfebf0;
	color: #5b97b4 !important;
}

/*ERROR*/
.errorArea{
	padding: 20px 20px 20px 20px;
	text-align: center;
}

.errorArea .error_title{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
	line-height: 1.5;
}

.errorArea .error_title i{
	font-size: 67px;
	display: block;
}

.errorArea .error_text{
	line-height: 1.5;
	margin-bottom: 25px;
	font-size: 14px;
}

.compTxt{
    padding: 10px 18px;
    color: #FF4D4D;
}