/*header*/
header{width: 100%;}

/*header > .logoBox*/
header > .logoBox{width: 100%; height: 100px; position: relative; max-width: 1080px; margin: 0 auto; line-height: 100px;}
header > .logoBox:after{content: ""; display: block; clear: both;}
header > .logoBox > .navBox_btn_01{position: absolute; top: 50%; left: 0%; transform: translate(0, -50%); width: 62px; height: 52px; cursor: pointer; display: none;}
header > .logoBox > .navBox_btn_01 .navBox_btn_02{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 16px;}
header > .logoBox > .navBox_btn_01 .navBox_btn_02 > span{display: block; width: 100%; height: 2px; background: #000;}
header > .logoBox > .navBox_btn_01 .navBox_btn_02 > span:nth-of-type(2){margin: 5px 0;}
header > .logoBox > img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; display: block; width: 200px;}
header > .logoBox > p{float: right; margin-right: 5%; font-size: 1.4rem; color: #5F5F5F;}
header > .logoBox > p > a{color: #5F5F5F;}
header > .logoBox > .loginBox_btn_01{position: absolute; top: 50%; right: 0%; transform: translate(0, -50%); width: 62px; height: 52px; cursor: pointer; display: none;}
header > .logoBox > .loginBox_btn_01 img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 17px;}
header > .logoBox > .loginBox_btn_01.logout img{width: 19px;}

/*header > .navBox*/
header > .navBox{width: 100%; height: 74px; border-top: 1px solid #bebfc0; border-bottom: 1px solid #bebfc0; position: relative; transform: translateX(-100%); z-index: 999999;}
header > .navBox.on{transform: translateX(0);}

/*header > .navBox > .main_ul*/
header > .navBox > .main_ul{width: 100%; height: 100%; margin: 0 auto; text-align: center; cursor: pointer; max-width: 1078px; box-sizing: content-box;}
header > .navBox > .main_ul:after{content: ""; display: block; clear: both;}
header > .navBox > .main_ul > .main_li{float: left; font-size: 1.6rem; font-weight: bold; color: #5F5F5F; line-height: 70px; display: block; width: 25%;}

/*header > .navBox > .sub_ul*/
header > .navBox > .sub_ul{width: 100%; max-width: 1080px; height: 180px; position: absolute; left: 50%; transform: translateX(-50%); display: none; z-index: 99999; box-sizing: content-box;}
header > .navBox > .sub_ul > button{position: absolute; top: 0; right: 0; display: none; background: none; width: 40px; height: 40px; cursor: pointer; z-index: 999999;}
header > .navBox > .sub_ul > button img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 11px;}
header > .navBox > .sub_ul > li{width: 100%; background: #fff; border: 1px solid #bebfc0; padding: 8px 0; border-top: none;}
header > .navBox > .sub_ul > li:after{content: ""; display: block; clear: both;}
header > .navBox > .sub_ul > li > ul{width: 25%; float: left; text-align: center;}
header > .navBox > .sub_ul > li > ul > li{width: 100%; height: 40px; line-height: 40px;}
header > .navBox > .sub_ul > li > ul > li:nth-of-type(1){display: none; font-size: 1.6rem; padding-left: 5%; margin-top: 20px;}
header > .navBox > .sub_ul > li > ul > li > a{display: block; font-size: 1.4rem; color: #7F8081; font-weight: normal; transition: .3s;}
header > .navBox > .sub_ul > li > ul > li > a:hover{color: #FFAB73;}

/*width <= 1100px*/
@media screen and (max-width: 1100px){

	/*header > .logoBox*/
	header > .logoBox{height: 70px; line-height: 70px;}
	header > .logoBox > .navBox_btn_01{width: 62px; height: 52px; display: none;}
	header > .logoBox > .navBox_btn_01 .navBox_btn_02{width: 24px; height: 16px;}
	header > .logoBox > .navBox_btn_01 .navBox_btn_02 > span{height: 2px;}
	header > .logoBox > .navBox_btn_01 .navBox_btn_02 > span:nth-of-type(2){margin: 5px 0;}
	header > .logoBox > img{width: 100px;}
	header > .logoBox > p{margin-right: 5%; font-size: 1.2rem;}
	header > .logoBox > .loginBox_btn_01{width: 62px; height: 52px; display: none;}
	header > .logoBox > .loginBox_btn_01 img{width: 17px;}

	/*header > .navBox*/
	header > .navBox{height: 60px; }
	header > .navBox:hover .main_ul{border-right: none; border-left: none;}

	/*header > .navBox > .main_ul*/
	header > .navBox > .main_ul > .main_li{font-size: 1.5rem; line-height: 60px;}

	/*header > .navBox > .sub_ul*/
	header > .navBox > .sub_ul{height: 160px;}
	header > .navBox > .sub_ul > li{padding: 8px 0; border-right: none; border-left: none;}
	header > .navBox > .sub_ul > li > ul > li{height: 40px; line-height: 40px;}
	header > .navBox > .sub_ul > li > ul > li:nth-of-type(1){display: none;}
	header > .navBox > .sub_ul > li > ul > li > a{font-size: 1.3rem;}
}

/*width <= 800px*/
@media screen and (max-width: 800px){
	
	/*header > .logoBox*/
	header > .logoBox{height: 60px; line-height: 60px;}
	header > .logoBox > .navBox_btn_01{display: block;}
	header > .logoBox > p{display: none;}
	header > .logoBox > .loginBox_btn_01{display: block;}
	header > .logoBox > img{width: 140px;}
	
	/*header > .navBox*/
	header > .navBox{position: fixed; top: 0; left: 0; width: 50%; height: 100%; border: none; background: #fff; border-right: 1px solid #eee9e7;}

	/*header > .navBox > .main_ul*/
	header > .navBox > .main_ul{display: none;}

	/*header > .navBox > .sub_ul*/
	header > .navBox > .sub_ul{height: 100%; display: block;}
	header > .navBox > .sub_ul > button{display: block;}
	header > .navBox > .sub_ul > li{border: none; padding: 0; background: none;}
	header > .navBox > .sub_ul > li > ul{width: 100%; float: none; text-align: left;}
	header > .navBox > .sub_ul > li > ul > li{border-bottom: 1px solid #999; cursor: pointer;}
	header > .navBox > .sub_ul > li > ul > li:nth-of-type(1){display: block; font-size: 1.5rem; padding-left: 5%; margin-top: 10px;}
	header > .navBox > .sub_ul > li > ul > li.sub_menu{border-bottom: 1px solid #eee9e7; height: 40px; line-height: 40px; display: none; background: #f3f3f3;}
	header > .navBox > .sub_ul > li > ul > li.sub_menu > a{padding-left: 12%; font-size: 1.3rem; color: #FFAB73;}
}

/*width <= 640px*/
@media screen and (max-width: 640px){

	/*header > .navBox*/
	header > .logoBox > img{width: 110px;}
	header > .navBox{width: 80%;}
	
}