@charset "utf-8";
/************************************************************************
 * filename : sub_common.css
 * description :subPage common style
 * date : 2017.08.17
************************************************************************/

/* sub common */
.header_btm .inner{width:1440px;}
.header_btm{background:rgba(255,255,255,.4) }
.m_nav_open .header_btm{background:#fff}
.header_btm .lnb li a{color:#fff;}
.dark .header_btm .lnb li a{color:#000}
.header_btm h1 a img.light,
.dark .header_btm h1 a img.dark{display: block;}
.m_nav_open .header_btm h1 a img.dark{display: block !important;}
.header_btm h1 a img.dark,
.dark .header_btm h1 a img.light{display: none;}
.m_nav_open .header_btm h1 a img.light{display: none !important;}
.mobile_menu_btn a{transition:.3s}
.mobile_menu_btn a span,
.dark .header_btm{background: #fff;}
.dark .mobile_menu_btn a span{background: #000;}

.inner{width: 1150px;}

.footer_menu ul li{margin-left: 30px;}

.sub_visual{height: 400px;position: relative;width:100%;display: table;text-align: center}
.sub_visual_bg{position: absolute;left:0;top:0;bottom:0;right:0;width:100%;height:100%;background-repeat: no-repeat;background-size:cover;background-position: center center;z-index: -1}
.sub_visual_text{display: table-cell;width:100%;vertical-align: middle;color:#fff;font-size:58px;font-weight: 600;letter-spacing: 5px}
.sub_visual_text strong{line-height: normal;letter-spacing: -1px;display: block;}
.sub_visual_sub_text{line-height: 24px;font-size:16px;color:#fff;font-weight: 400;letter-spacing: -0.5px;margin-top: 20px;display: inline-block;border-bottom: 1px solid #fff;padding-bottom: 4px;}
.sub_visual_sub_text br.m{display: none}
.sub_menu{background: #494949;text-align: center;position: relative;z-index: 1;height: 50px;}
.sub_menu ul{border-bottom: 1px solid #626262;display:block;clear: both}
.sub_menu ul>li{float: left;width: 25%;position: relative}
.sub_menu ul>li>strong{display: block}
.sub_menu ul>li>strong.home img{margin-top:14px}
.sub_menu ul>li>strong.depth{background-repeat: no-repeat;background-image: url(/static_resources/images/junohair/sub/subMenu_arr_down.png);background-position:80% center;}
.sub_menu ul>li>strong.depth.open{background-image: url(/static_resources/images/junohair/sub/subMenu_arr_up.png);}
.sub_menu ul>li>strong a{display: block;color:#bebebf;height: 50px;line-height: 50px;box-sizing: border-box;border-right: 1px solid #626262;font-size:16px;border-bottom: 1px solid #626262;}
.sub_menu ul>li.cur>strong a{border-bottom: 5px solid #ed1c24;color:#fff}
.sub_menu ul>li:hover>strong a{color:#fff}
.sub_menu ul>li:first-child>strong a{border-left: 1px solid #626262;}
.sub_menu ul li dl{position: absolute;left:0;right:0;top:50px;display: none}
.sub_menu ul li dl a{display: block;font-size:16px;color:#bebebf;font-size:16px;height: 50px;line-height: 50px;background: #494949;border-left: 1px solid #626262;border-right: 1px solid #626262;border-bottom: 1px solid #626262;}
.sub_menu ul li dl dd:hover a{color:#fff}
.sub_menu.w20p ul>li {width:20%;}
.sub_menu.w33p ul>li {width:33.3%;}

.section_tit{display: inline-block;margin:59px auto 0 auto}
.section_tit.center{width:100%;text-align:center;}
.section_tit .bar{width: 31px;height: 5px;background: #ed1c24;}
.section_tit .tit{font-size:35px;color:#333;font-weight: 700;display: block;line-height: normal}
.section_content{overflow: hidden;position: relative;text-align: left;opacity: 0;filter: alpha(opacity=0);transition:.7s;transform: translateY(40px)}
.section_content.fadeInUp{opacity: 1;filter: alpha(opacity=100); transform: translate(0)}
.section_group {text-align:center}
.section_group .section_tit {margin-top:70px;margin-bottom:50px;text-align:center;}
br.m{display: none}



/* mediaquery */
@media all and (max-width:1440px){
	.header_btm .inner{width:1150px}
	.footer_menu ul li{margin-left: 50px;}
}
@media all and (max-width:1150px){
	.footer_menu ul li{margin-left: 30px;}
	.header_btm .inner,
	.inner{width:1024px}
}
@media all and (max-width:1024px){
	#container{padding-top: 0;}
	.header_btm .inner,
	.inner{width:768px}
	.sub_menu ul>li>strong.depth{background-position: 140px center}
	.header_btm .inner{height: 33px}
	.header_btm h1{position: absolute;top:0;left:0;}
	.scroll .header_btm h1{top:0}
	.mobile_menu_btn a span{background: #000 !important;}
}


@media all and (max-width:850px){
	.web_view {display:none}
	.mobile_view {display:block}
	.contentsFoot {display:flex;flex-direction:row;box-sizing:border-box;margin-top:25px;align-items:center;justify-content:center;}
	.contentsFoot a {display:flex;width:49%;margin-right:0;box-sizing:border-box;align-items:center;justify-content:center}
	.contentsFoot a:first-child {margin-right:2%}
	.contentsFoot.onebtn {display:block}
	.contentsFoot.onebtn a {display:inline-block;width:auto;padding:0 28px}
}

@media all and (max-width:768px){
	
	.header_btm{background: #fff !important;}
	.header_btm .inner{height: 19px}
	.header_btm h1{}
	.header_btm h1 a img.dark{display: block !important;}
	.header_btm h1 a img.light{display: none !important;}
	.mobile_menu_btn a span{background: #000 !important;}
	.header_btm .inner,
	.inner{width:95%}
	.sub_visual{height: 200px;margin-top: 54px;}
	.sub_visual_text{font-size:30px;line-height: normal;padding-left: 5%;padding-right: 5%;}
	.sub_visual_sub_text {margin-top: 4px;font-size: 15px;line-height: 20px;padding-bottom: 1px}
	.sub_visual_sub_text br.m{display: block}
	.sub_menu{display: none}
	.section_tit{margin:35px auto 0 auto}
	.section_tit .tit{font-size:28px;}
	.section_group .section_tit {margin-top:60px;margin-bottom:45px}
	
	.section_content{word-break: keep-all;width:90%;margin-left:auto;margin-right:auto}
	.section_content br.p{display: none;}
	.section_content br.m{display: block;}

	
}

