@charset "utf-8";

/* 
* content CSS Document
* KOWEB
*/

/* sub visual */
.subVisual{ overflow: hidden; display: flex; align-items: end; justify-content: center; position:relative; height:450rem; padding-bottom: 80rem; text-align:center; color: #fff;
	&::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
	&.about::before{ background-image:url('/images/content/sub_visual-1.webp'); }
	&.product::before{ background-image:url('/images/content/sub_visual-2.webp'); }
	&.board::before{ background-image:url('/images/content/sub_visual-3.webp'); }
	&.inquiry::before{ background-image:url('/images/content/sub_visual-4.webp'); }
	&.common::before{ background-image:url('/images/content/sub_visual-1.webp'); }
	&::after{ content: ''; position: absolute; inset: 0; background: #000; opacity: .3; }
	.inr{ position: relative; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 1ch; }
	.title{ font-size: 40rem; font-weight: 700; }
	.sub_menu{ display: flex; gap: 2ch; font-size: 20rem; }
	.sub_menu a{ position: relative; display: inline-block; }
	.sub_menu a.isVisiting::before{ content: ''; position: absolute; inset: 0; border-bottom: 2px solid currentColor; }
	@media(any-hover:hover){
		.sub_menu a:not(:hover, .isVisiting){ opacity: .7; }
	}
	@media(max-width:767px){
		.inr{ flex-direction: column; }
		.title{ align-self: start; }
	}
}
@media(prefers-reduced-motion:no-preference){
	.subVisual::before{ animation: subVisual_bg 1.8s both; }
	@keyframes subVisual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	.subVisual .title{ animation: txt1 .6s .3s both; opacity: 0; }
	.subVisual .lnb{ animation: txt2 .6s .3s both; opacity: 0; }
	@keyframes txt1 {
		0%{ translate: -40rem; opacity: 0; }
		100%{ translate: 0;; opacity: 1; }
	}
	@keyframes txt2 {
		0%{ translate: 40rem; opacity: 0; }
		100%{ translate: 0;; opacity: 1; }
	}
	.subVisual .sub_menu a{ transition: .3s; }
}

/* common content */
.sub{ min-height:300px; padding: 90rem 0; }
.sub_title{ margin-bottom: 3.75em;}
.sub_title h2{ text-align:center; font-size:var(--fs35); }
#content:has(.join_area) .sub_title{ display: none; } /* 멤버 페이지는 각 페이지가 타이틀을 가진 경우가 많아서 공통 서브 타이틀 숨기기 */

.sub.greeting{
	.inr{ display: grid; gap: 50rem 6.6%; }
	.swiper{ max-width: 685rem; width: 100%; aspect-ratio: 685/495; }
	.img{ display: block; width: 100%; height: 100%; object-fit: cover; }
	.pagination{ all: revert-layer; position: absolute; inset: auto 0 20rem; z-index: 1; display: flex; justify-content: center; gap: 19rem; cursor: pointer; }
	.swiper-pagination-bullet{ all: unset; position: relative; display: block; width: 16rem; aspect-ratio: 1; background: #d3d3d3; border-radius: 50%; }
	.swiper-pagination-bullet-active{ background: var(--black); }
	.swiper-pagination-bullet::before{ content: ''; position: absolute; inset: -10rem; border-radius: 50%; }
	.txt-group *{ letter-spacing: .01em; }
	.lead{ font: 18rem var(--font-suit); color: #353535; }
	.h2{ margin: 10rem 0 1.6em; font: 800 var(--fs30) var(--font-suit); color: #b40a0a; }
	.p{ font: 16rem/23rem var(--font-suit); color: #8e8e8e; }
	.ceo-group{ margin-top: 43rem; display: flex; align-items: center; gap: 18rem; }
	.ceo{ font: 16rem var(--font-suit); color: #8e8e8e; }
	.name{ font: 48rem var(--font-nap); }
	@media(min-width:768px){
		.inr{ grid-template-columns: 685fr 624fr; }
		.txt-group{ margin-top: -3rem; }
	}
}