@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

/* sub visual */
.area_subVisual{ overflow: hidden; display: flex; justify-content: center; align-items: center; position:relative; height:480px; text-align:center; color: #fff; }
.area_subVisual::before{ content: ''; position: absolute; inset: 0; background: 50% / cover; }
.area_subVisual.about::before{ background-image:url(../images/content/sub_visual01.jpg); }
.area_subVisual.business::before{ background-image:url(../images/content/sub_visual02.jpg); }
.area_subVisual.location::before{ background-image:url(../images/content/sub_visual03.jpg); }
.area_subVisual.board::before{ background-image:url(../images/content/sub_visual01.jpg); }
.area_subVisual.common::before{ background-image:url(../images/content/sub_visual.jpg); }


.area_subVisual h2{ font-size: var(--font_size40); }
@media(prefers-reduced-motion:no-preference){
	@keyframes sub_visual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	@keyframes sub_visual_text {
		0%{ transform: translateX(20px); opacity: 0; transition:1s;}
		100%{ transform: translateX(0); opacity: 1; }
	}
	.area_subVisual::before{ animation: sub_visual_bg 1.8s both; }
	.area_subVisual p{ opacity: 0; animation: sub_visual_text .6s both; }
	.area_subVisual h2{ opacity: 0; animation: sub_visual_text .6s .2s both; }
}
@media (max-width:767px){
	.area_subVisual{height:300px;}
}

/* lnb */
.lnb { z-index:11; left:0; bottom:0; width:100%; background: #2b2b2b; border-bottom:1px solid #ddd; text-align:center;}
.lnb ul {margin: 0 auto; width:100%; height: 65px;}  
.lnb ul li {display:inline-block;padding: 19px 28px;}
.lnb ul li:first-child {padding-left:0 ;background :none} 
.lnb ul li:last-child{padding-right:0;}
.lnb ul li a {font-weight: 500;font-size:18px;color: #dadada;transition: 0.2s;}
.lnb ul li:hover a, 
.lnb ul li a.on{ color: var(--primary); }
@media (max-width:767px){
	.lnb{overflow-x:auto; width:100%;overflow-y: hidden; }
	.lnb ul{display:table; margin:0 auto; table-layout:auto; overflow-y: hidden;}
	.lnb ul li{display:table-cell; padding:0 15px; vertical-align:middle;}
	.lnb ul li:first-child{padding-left:15px;}
	.lnb ul li:last-child{padding-right:15px;}
	.lnb ul li a{display:block; padding:0; font-size:15px; white-space:nowrap;}
	.lnb ul li a.on::before{ width: 4px; height: 4px; }
	.lnb ul li:first-child a.on::before{ right: calc( 100% - 10px ); }
}

/* common content */
#content{ min-height:300px; padding: 80px 0; }
.sub_title{ margin-bottom: 60px}
.sub_title h2{ text-align:center; font-size: 35px }

@media (max-width:767px){
	#content{ padding: 50px 0; }
	.sub_title{ margin-bottom: 30px}
	.sub_title h2 {font-size: 28px;}
}