@charset "utf-8";
/* HEADER */

#header {height: 80px;position:relative;width: 100%;z-index: 240;top: 0;left: 0;}
.header_inner {position: relative;}
.header_wrap { padding: 0 40px; max-width: 1400px; margin: auto; }
.header_wrap ul > li{list-style:none;}

/* LOGO*/
	#logo {position: absolute;top: 0px;left: 0%;/*transition: 800ms;*/}
	#logo a { position: relative; display: block;}
	.logo_img, .logo_txt { position: absolute;}
	.logo_img { left: 0; top: 0; height:auto;width: 66px;-webkit-transition:500ms;transition:500ms;}
	.logo_txt { top: 23px; left: 58px;-webkit-transition:500ms;transition:500ms}

	/*text-indent:-1000px;*/
	.vLogo_1{display:none !important;width:110px;height:110px;background-repeat: no-repeat;background-position: center center;background-size:110px auto;box-shadow: 2px 4px 5px #888888;}
	.vLogo_2{display:none !important;width:146px;height:55px;background-repeat: no-repeat;background-position: center center;}
	@media all and (max-width: 720px){
		.vLogo_2{display:block !important;}
	}
	@media all and (min-width: 720px) and (max-width: 940px){
		.vLogo_2{display:block !important;}
	}
	@media all and (min-width: 940px){
		.vLogo_1{display:block !important;}
	}
/**/
/* mainNav */
	#mainNav {
	  border-color: rgba(34, 34, 34, 0.05);
	  background-color: white;
	  -webkit-transition: all .2s;
	  -moz-transition: all .2s;
	  transition: all .2s; }

	  #mainNav .navbar-toggle {
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
		color: #222222; }
	  #mainNav .navbar-nav > li.nav-item > a.nav-link,
	  #mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
		font-size: 13px;
		font-weight: 700;
		text-transform: uppercase;
		color: #222222; }
		#mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
		#mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
		  color: #F05F40; }
		#mainNav .navbar-nav > li.nav-item > a.nav-link.active,
		#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active {
		  color: #F05F40 !important;
		  background-color: transparent; }
		  #mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover,
		  #mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active:hover {
			background-color: transparent; }
/**/

/* MENU */

/*.menu_container {position: absolute;left: 50%;top: 21px;z-index: 850;width: 100%;margin-left: -332.5px;}*/
.menu_container {position:absolute;right:0px;top:35px;}

ul#menu {padding:0px !important;}
ul#menu a { color: #222222; text-decoration: none; font-size: 15px;font-weight: bold;}
ul#menu > li > a:hover,ul#menu > li.current > a { color:#DC372B;}
ul#menu > li > a:before {content: '';display: block;width: 1px;height: 15px;position: absolute;left: 0;top: 10px;background: #ddd;}
ul#menu > li:first-child > a:before {background: none;}
ul#menu > li,ul#menu > li > a { float: left; display: block; }
ul#menu > li,ul#menu > li > a.active{color:#DC372B;}
ul#menu > li.lastLI {display:none !important;}


ul#menu > li > ul {opacity: 0;position:absolute;visibility: hidden;top: 39px;width: 200px;z-index:255;left: 50%;margin-left: -100px;box-shadow: 5px 4px 12px -4px rgba(0,0,0,0.16);-webkit-transition:opacity 150ms;transition: opacity 150ms;}
ul#menu li:hover > ul {visibility: visible;opacity: 1;}

/*ul#menu > li > a {padding: 10px 36px 25px 36px;position: relative;}*/
ul#menu > li > a {position: relative;}

ul#menu li{ position:relative}
ul#menu > li > ul a {background: #fff;display: block;padding: 8px 5px 8px 25px;font-size: 13px;font-weight: 400;clear: both;text-align: left;-webkit-transition:300ms;transition: 300ms;border-bottom: 1px solid #e9e9e9}

ul#menu > li > ul a:hover {background: #DC372B;color: #fff;}
ul#menu > li > ul > li > ul a { padding-left:40px; position:relative;background: #fafafa;}
ul#menu > li > ul > li > ul a:hover {background: #fafafa;color: #66af3f;}
ul#menu > li > ul > li > ul a:before { content: ""; display: block; position: absolute; top: 50%; left: 24px; background: #67af3f; width: 5px; height: 1px;}
ul#menu > li > ul > li:first-child > a{border-top: none;}


.top_menu_btn_line {border-bottom:1px solid #eeeeee;width:100%;height:1px;position:absolute;top:25px;z-index:1;text-align:center;}
.top_menu_btn a {position: absolute;right:0px;font-size: 11px;font-weight: bold;text-decoration:none;color:#FFF;height:25px;text-align:center;padding:4px}

.top_menu_btn .tmb_reg		{background:#e63217;width:120px;right:0px;}
.top_menu_btn .tmb_join		{background:#ffb749;width:70px;right:120px;}
.top_menu_btn .tmb_login	{background:#ffb749;width:70px;right:60px;}
.top_menu_btn .tmb_logout	{background:#e63217;width:70px;right:60px;}
.top_menu_btn .tmb_my		{background:#ffb749;width:60px;right:70px;}
.top_menu_btn .tmb_adm		{background:#009b00;width:50px;right:130px;}
.top_menu_btn .tmb_ico		{background:#7f615d;width:30px;padding:0px;}
.top_menu_btn .tmb_ico > i  {padding:2px}

@media (max-width:1650px) {
    .main_visual_txt_container a { font-size: 13px;}
}

@media (max-width:1150px){
	#logo {left:0px;}
    .menu_container {margin-left: -282.5px;}
    .sub_menu li a {padding: 13px 0;}
    ul#menu > li > a {padding: 10px 15px 25px 15px;}
}

@media (max-width:992px){
	ul#menu > li > a {padding: 10px 10px 25px 10px;}
}


@media (max-width:940px){
    #header { height: 112px;}
	#headerDIV{height:60px;}

    #logo {top: 13px;left: 40%;}
    .menu_container {top: 75px;left: 0;width: 100%;margin-left: 0;border-top: #ddd 1px solid;}
    ul#menu{ text-align:center}

	/*
	ul#menu > li {float: left;}
	ul#menu > li:nth-child(1) {width:13%}
	ul#menu > li:nth-child(2) {width:13%}
	ul#menu > li:nth-child(3) {width:15%}
	ul#menu > li:nth-child(4) {width:14%}
	ul#menu > li:nth-child(5) {width:15%}
	ul#menu > li:nth-child(6) {width:15%}
	ul#menu > li:nth-child(7) {width:15%}
	*/

    ul#menu > li > a { width: 100%; text-align: center;padding: 8px 0;}
    ul#menu > li:first-child > ul {left: 60%;}
    ul#menu > li > ul { top: 35px;}
    ul#menu > li:last-child > ul {left: 50%;}
    ul#menu > li > a:after{bottom: 7px;}
	ul#menu a {font-size:12px;}
}

@media (max-width:900px){
    .body_container { position: relative;min-height: calc(100% - 597px);}
}

@media (max-width:768px){
    /* MENU */
    ul#menu > li:first-child > ul {left: 72%;}
}

@media (max-width:720px){
    header#header { height: 70px; }

    /* MENU */
    #logo {top: 10px;left:0%;}
	.menu_container { position: fixed; top: 0; left: 0; bottom: 0; z-index: 555;margin-left: 0;right: 0;left: auto;width: 300px;background: #322e2d;-webkit-transform: translateX(100%);transform: translateX(100%);border: none;}

    ul#menu > li { display: block; float: none; clear: both; width: 100% !important; padding:0; }
    ul#menu > li > a { position:relative; text-align: left; color: #fff;border-bottom: 1px solid #545453;padding-left: 25px;}
    ul#menu > li > a:before{width: 7px; height:5px; content:""; background: url(./sideDown.png) no-repeat center center; position:absolute;top: 24px;bottom: auto;right:30px;position: absolute;left: auto;display:none}

    ul#menu li.active > a:before{transform:rotate(180deg);top: 28px;color: #fff;}
    ul#menu li:hover > a, ul#menu a:hover, ul#menu li.active > a { color: #ADABA5;}

    ul#menu > li:hover > a:after { display: none; }
    ul#menu > li > ul, ul#menu > li:hover > ul { position: inherit;display: none; margin: 0; left: 0; box-shadow: none; top: 0; width: 100%; clear: both; background: #000000}

    ul#menu > li > ul > li:first-child > a,ul#menu > li > ul > li:first-child > a:hover { border-top: none; }

    #menu > li:last-child > ul { left: 0; }
    ul#menu { height: 100%; position: absolute; width: 100%; overflow: auto; padding-left:35px }
    ul#menu > li > ul{visibility: visible; opacity: 1;}

    ul#menu {height: 100%;position: absolute;width: 100%;overflow: auto;padding-right: 35px;padding-left: 0;margin-top: 70px;border-top: 1px solid #474342;}
    ul#menu > li:first-child > ul { left: 0; }
    ul#menu > li.current > ul { display: block;}

	ul#menu > li > ul a {border-bottom: 1px solid #4f4b4a;}
	ul#menu > li > ul a, ul#menu > li:hover > ul a { background: none; color: #eee;padding-left: 45px;font-size: 15px; }
	ul#menu > li > ul a:hover{background: #7D7D7A;}
	ul#menu > li > ul a:before { content: '';  position: absolute; width: 4px; height: 4px;top: 50%; left: 25px;  background: #DD372B; display: block;}


	ul#menu > li > ul a:hover,ul#menu > li > ul a.current { background: #615A58;}
	ul#menu > li > ul a.current{color:#fff}

	ul#menu li:hover > a, ul#menu a:hover, ul#menu li.active > a,ul#menu > li.current > a {color: #fff;background-color: #dd372b;}
	/*ul#menu li:hover > a, ul#menu a:hover, ul#menu li.active > a,ul#menu > li.current > a.active {color: #fff !important;background-color: #dd372b;}*/

    ul#menu li > a{background-position:230px center; background-repeat: no-repeat;background-image: url(./sideDown.png);-webkit-transition:300ms background;transition:300ms background;background-size: 14px;}


    #small_menu_btn span, #small_menu_btn:before, #small_menu_btn:after {border-radius: 2px; width: 23px; height: 3px; content: "";width: 23px;height: 3px; background: #414141;left: 8px;position: absolute;}

    #small_menu_btn span{top: 13px;}
    #small_menu_btn:before{top: 19px;}
    #small_menu_btn:after {top: 25px;}
    #small_menu_btn { cursor: pointer; width: 40px; height: 40px; position: absolute; top: 50%; right: 5%; margin-top: -20px; left: auto }

    #small_menu_overlay { z-index: 444; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); display: none; }
    #small_menu_close {border-radius: 0;display: block;cursor: pointer;z-index: 450;position: fixed;width: 60px;height: 70px;line-height: 30px;text-align: center;background: #000 url(./sideClose.png) no-repeat center center;background-size: 50px auto;color: #fff;font-size: 24px;right: -60px;left: auto;top: 0;}


    .sub_menu_container {display: none;}
    .top_menu_btn a {position: absolute;z-index: 999;border-color: #fff;color: #fff;right: 0;top: -200px;opacity: 0;transition: 300ms opacity 300ms;}
	.open_menu .tmb_reg		{top: 25px;opacity: 1;}
	.open_menu .tmb_join	{top: 25px;opacity: 1;}
	.open_menu .tmb_login	{top: 25px;opacity: 1;}
	.open_menu .tmb_logout	{top: 25px;opacity: 1;}
	.open_menu .tmb_my		{top: 25px;opacity: 1;}
	.open_menu .tmb_adm		{top: 25px;opacity: 1;}
	.open_menu .tmb_ico		{top: 25px;opacity: 1;}
}

@media (max-width:540px){
    .header_wrap {padding: 0;}
	#logo { left: 5%; }
}

@media (max-width:365px){
    .main_visual_txt_inner{width: 320px;}
}