@charset "utf-8";

/* 
* content CSS Document
* KOWEB
*/
/* sub visual */
.subVisual{ overflow: hidden; display: flex; align-items: flex-end; justify-content: center; position:relative; height:450rem; background: #111; color: #fff; }
.subVisual::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
/* 서브 비주얼 작업 시 top.html:68 파일명, 숫자 양식 맞춰주세요 */
.subVisual.car::before{ background-image:url('/images/content/sub_visual1.jpg'); }
.subVisual.chuna::before{ background-image:url('/images/content/sub_visual2.jpg'); }
.subVisual.pain::before{ background-image:url('/images/content/sub_visual3.jpg'); }
.subVisual.about::before{ background-image:url('/images/content/sub_visual4.jpg'); }
.subVisual.program::before{ background-image:url('/images/content/sub_visual4.jpg'); }
.subVisual.board::before{ background-image:url('/images/content/sub_visual4.jpg'); }
.subVisual.common::before{ background-image:url('/images/content/sub_visual-common.webp'); }
.subVisual [data-menu-snb="1"]{ font-size: var(--fs40); font-family: var(--font-noto); font-weight: 600; margin-bottom:100rem;}
.subVisual [data-menu-snb="2"]{  }
@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 .inr > *{ opacity: 0; animation: subVisualText .6s .2s both; }
	.subVisual .inr > *:nth-child(2){ animation-delay: .4s; }
	@keyframes subVisualText {
		0%{ transform: translateY(40rem); opacity: 0; }
		100%{ transform: translateY(0); opacity: 1; }
	}
}

/* lnb */
.lnb{ background: #2b2b2b; border-bottom: 1px solid #ddd; text-align:center; font-size:18rem; font-weight: 500; color: #dadada; z-index:5; }
.lnb ul{ margin: 0 auto; }
.lnb li{display:inline-block; padding: 0 28rem; }
.lnb a{ position: relative; display: flex; align-items: center; height: 4.0625em; }
.lnb a:hover,
.lnb a.isVisiting{ color: var(--primary); }
.lnb a.isVisiting::before{ content: ''; position: absolute; inset: 0; border-bottom: 2px solid currentColor; }

@media(max-width:767px){
	.subVisual {height: 400rem;}
	.subVisual [data-menu-snb="1"] {margin-bottom: 80rem;}
	.lnb{ overflow: auto clip; white-space:nowrap; }
	.lnb ul{ display:table; margin:0 auto; table-layout:auto; overflow-y: hidden;}
	.lnb li{ display:table-cell; }
}

/* common content */
main#content{ min-height:300px; padding: 100rem 0 80rem; }
.sub_title { margin-bottom: 3.75em;}
.sub_title h2 {font-size:var(--fs40);}
.ss__tit {margin-bottom: 40rem;}
.ss__tit span {display: block; font-size: var(--fs18); font-weight: 600; letter-spacing: 1.5rem; color: var(--primary); margin-bottom: 15rem;}
.ss__tit h2 {font-size:var(--fs35); font-weight: 700; line-height: 1.44; margin-bottom: 25rem;}
.ss__tit p {font-size: var(--fs18); line-height: 1.8; color: #555;}
.ss__.ss__tit p + p {margin: 10rem;}
br.show_mo {display: none;}

@media(max-width:767px){
	main#content {padding: 80rem 0;}
	br.show_mo {display: block;}
	br.mo_hide {display: none;}
	.ss__tit {margin-bottom: 30rem;}
	.ss__tit h2 {margin-bottom: 20rem;}
	.ss__tit p {line-height: 1.55;}
	.ss__tit span {margin-bottom: 10rem;}
}

/* accident - 교통사고 */
.accident .ss__tit {text-align: center;}
.accident .ss2 { padding: 110rem 0; margin-top: 80rem; text-align: center; background: #10315b url(/images/content/accident_bg.jpg) no-repeat; background-size: cover; background-position: 50%;}
.accident .ss2 .ss__tit h2 {color: #fff;}
.accident .ss2 .ss__tit p {font-weight: 200; color: #fff;}
.accident .ss2__txt {display: grid; grid-template-columns: repeat(2,1fr); gap: 20rem; }
.accident .ss2__txt li {display: flex; gap: 14rem; align-items: center; padding: 30rem 25rem; background:#fff; font-size: var(--fs18); text-align: left; font-weight: 600;}
.accident .ss2__txt li .bullet{position: relative; display: inline-block; flex-shrink: 0; aspect-ratio: 1/1; width: 26rem; background: #10315b ; border-radius: 50%;}
.accident .ss2__txt li .bullet::before{ content: ''; position: absolute; margin: auto; inset: 0; aspect-ratio: 1/1; width: 11rem; background: var(--white); clip-path: polygon(0% 49.1%, 9.5% 39.5%, 37% 67%, 90.3% 13.7%, 100% 23.3%, 37% 86.2%); }
.accident .ss3 {text-align: center; padding: 100rem 0;}
.accident .ss3__img {display: grid; grid-template-columns: repeat(3,1fr); justify-items: center; gap: 60rem;}
.accident .ss3__img img {max-width: 385rem; width: 100%; border-radius: 50%; overflow: hidden; }
.accident .ss4 {padding: 110rem 0; background: #f4f6fa ; text-align: center;}
.accident .ss4__list {display: grid; grid-template-columns: repeat(3,1fr); gap: 30rem;}
.accident .ss4__list li {background: #fff;}
.accident .ss4__list li .img {width: 100%}
.accident .ss4__list li .img img {width: 100%; max-width: 100%;}
.accident .ss4__list li dl {background: #fff; padding: 30rem 30rem; box-sizing: border-box;}
.accident .ss4__list li dt {font-size: var(--fs22); font-weight: 700;margin-bottom: 20rem; padding-bottom: 20rem; border-bottom: 1rem dotted #dadada;}
.accident .ss4__list li dd {font-size: var(--fs17); line-height: 1.7; font-weight: 300;}
.accident .ss5 {padding-top: 100rem; }
.accident .ss5 .ss__tit {text-align: center;}
.accident .ss5 .ss__img img {width: 100%; height: 100%; object-fit: cover; max-width: 100%;}
.accident .ss5 p {padding: 25rem; font-size: var(--fs18); font-weight: 300; text-align: center; background: #24262a; color: #fff; }

@media(max-width:767px){
	.accident .ss2 {padding: 80rem 0; margin-top: 50rem;}
	.accident .ss2__txt {grid-template-columns: repeat(1,1fr); gap: 10rem;}
	.accident .ss2__txt li {gap: 10rem;padding:20rem;font-weight: 400;}
	.accident .ss2__txt li .bullet {width: 20rem;}
	.accident .ss2__txt li .bullet::before {width: 8rem;}
	.accident .ss3 {padding: 80rem 0;}
	.accident .ss3__img {gap: 15rem;}
	.accident .ss4 {padding: 80rem 0;}
	.accident .ss4__list {grid-template-columns: repeat(2,1fr); gap: 10rem;}
	.accident .ss4__list li dl {padding: 15rem 10rem;}
	.accident .ss4__list li dt {margin-bottom: 15rem; font-weight: 600; padding-bottom: 15rem;}
	.accident .ss4__list li dd {line-height: 1.5;}
	.accident .ss5 {padding-top: 80rem;}
	.accident .ss5 .ss__img {height: 200rem;}
	.accident .ss5 p {padding: 15rem;}
}

/* chuna - 추나 */
.chuna .ss1 .ss__tit {text-align: center;}
.chuna .ss1 .ss__tit span {font-size: var(--fs22);}
.chuna .ss1 .ss__tit h2 {font-size: var(--fs40);}
.chuna .ss2 {margin-top: 60rem;}
.chuna .ss2 .ss__list > li {display: grid; gap: 90rem; align-items: center; grid-template-columns: repeat(2,1fr);}
.chuna .ss2 .ss__list > li .img {width: 100%;}
.chuna .ss2 .ss__list > li:nth-child(odd) .img img {margin: 0 0 0 -250rem;}
.chuna .ss2 .ss__list > li:nth-child(even) .img img {margin: 0 -250rem 0 0;}
.chuna .ss2 .ss__list > li .txt p {font-size: var(--fs18); line-height: 1.8;}
.chuna .ss2 .ss__list > li .txt h3 {font-size: var(--fs30); font-weight: 700; margin-bottom: 30rem;}
.chuna .ss2 .ss__list > li .check {display: grid; grid-template-columns: repeat(2,1fr); gap: 25rem 0;}
.chuna .ss2 .ss__list > li .check dd {display: flex; align-items: center; gap: 15rem; font-size: var(--fs18); }
.chuna .ss2 .ss__list > li .list {counter-reset:list-number;}
.chuna .ss2 .ss__list > li .list li {position:relative; padding-left:35px;counter-increment:list-number; }
.chuna .ss2 .ss__list > li .list li::before {position:absolute; left:0; top:4px; content:counter(list-number); display: flex; align-items: center; justify-content: center; width:22px; height:22px; font-size:12px; font-weight:400; color:#fff; text-align:center;border-radius:100%; background: #24262a;}
.chuna .ss2 .ss__list > li .list dt {font-size: var(--fs18); font-weight: 600;}
.chuna .ss2 .ss__list > li .list dd {font-size: var(--fs18); color: #555; margin-top: 10rem;}
.chuna .ss2 .ss__list > li .list li + li {margin-top: 15rem;}

.chuna .ss3 {padding: 110rem 0; margin-top: 80rem; background: #f4f6fa ; }
.chuna .ss3 .ss__tit {text-align: center; margin-bottom: 30rem;}
.chuna .ss3__list {display: grid; grid-template-columns: repeat(2,1fr); gap: 15rem;}
.chuna .ss3__list .img {width: 100%;}
.chuna .ss3__list .img img {max-width: 100%; width: 100%; }
.chuna .ss3__list li {background: #fff;}
.chuna .ss3__list li dl {padding: 30rem; background: #fff; text-align: center;}
.chuna .ss3__list li dt {font-size: var(--fs22);  font-weight: 700; margin-bottom: 20rem; padding-bottom: 20rem; border-bottom: 1rem dashed #dadada;}
.chuna .ss3__list li dd {position: relative; font-size: var(--fs17); line-height: 1.7; font-weight: 300; }


@media(max-width:1500px){
	.chuna .ss2 .ss__list > li .txt h3 {margin-bottom: 25rem;}
	.chuna .ss2 .ss__list > li .txt h3 br {display: none;}
	.chuna .ss2 .ss__list > li .check dd {gap: 10rem;}
	.chuna .ss2 .ss__list > li {gap: 30rem;grid-template-columns: repeat(1,1fr);}
	.chuna .ss2 .ss__list > li .img img {max-width: 100%; width: 100%;}
	.chuna .ss2 .ss__list > li:nth-child(odd) .img img {margin: 0;}
	.chuna .ss2 .ss__list > li:nth-child(even) .img img {margin: 0}
	.chuna .ss2 .ss__list > li:nth-child(even) .img {grid-area: 1;}
	.chuna .ss2 .ss__list > li + li {margin-top: 50rem;}
}

@media(max-width:767px){
	.chuna .ss2 {margin-top: 40rem;}
	.chuna .ss2 .ss__list > li {gap: 25rem;}
	.chuna .ss2 .ss__list > li .check {gap: 20rem;}
	.chuna .ss3 {padding: 80rem 0; margin-top: 60rem;}
	.chuna .ss3__list li dl {padding: 10rem}
	.chuna .ss3__list li dt {margin-bottom: 15rem; padding-bottom: 15rem;}
}

/* pain */
.pain .ss__tit {font-size: var(--fs40); text-align: center; margin-bottom: 80rem;}
.pain .ss__tit h2 {font-size: var(--fs40); }
.pain .ss__tit p {margin-top: 20rem;}
.pain .ss1 .ss__list > li {display: grid; gap: 90rem; align-items: center; grid-template-columns: repeat(2,1fr); }
.pain .ss1 .ss__list > li .img {width: 100%; }
.pain .ss1 .ss__list > li:nth-child(odd) .img img {margin: 0 0 0 -250rem;}
.pain .ss1 .ss__list > li:nth-child(even) .img img {margin: 0 -250rem 0 0;}
.pain .ss1 .ss__list > li .txt p {font-size: var(--fs18); line-height: 1.8; font-weight: 300;}
.pain .ss1 .ss__list > li .txt h3 {font-size: var(--fs30); font-weight: 700; margin-bottom: 30rem;}
.pain .ss1 .ss__list > li .check {display: grid; grid-template-columns: repeat(2,1fr); gap: 25rem 0;}
.pain .ss1 .ss__list > li .check dd {display: flex; align-items: center; gap: 15rem; font-size: var(--fs18); }
.pain .ss1 .ss__list > li .list {counter-reset:list-number;}
.pain .ss1 .ss__list > li .list li {position:relative; padding-left:35px;counter-increment:list-number; }
.pain .ss1 .ss__list > li .list li::before {position:absolute; left:0; top:4px; content:counter(list-number); display: flex; align-items: center; justify-content: center; width:22px; height:22px; font-size:12px; font-weight:400; color:#fff; text-align:center;border-radius:100%; background: #24262a;}
.pain .ss1 .ss__list > li .list dt {font-size: var(--fs18); font-weight: 600;}
.pain .ss1 .ss__list > li .list dd {font-size: var(--fs18); color: #555; margin-top: 10rem;}
.pain .ss1 .ss__list > li .list li + li {margin-top: 15rem;}
.pain .ss2 {padding: 110rem 0; margin-top: 80rem; background: #f4f6fa ; }
.pain .ss2 .ss__tit {text-align: center; margin-bottom: 40rem;}
.pain .ss2 .ss__tit h2 {font-size: var(--fs35);}
.pain .ss2__list {display: grid; grid-template-columns: repeat(3,1fr); gap: 20rem;}
.pain .ss2__list .img {width: 100%; }
.pain .ss2__list .img img {max-width: 100%; width: 100%; }
.pain .ss2__list dl {padding: 30rem 30rem; background: #fff; text-align: center;}
.pain .ss2__list dt {margin-bottom: 20rem; padding-bottom: 20rem; border-bottom: 1rem dashed #dadada;} 
.pain .ss2__list li {background: #fff;}
.pain .ss2__list li em {display: flex; align-items: center; justify-content: center; width: 40rem; height:40rem; font-size: 15rem; line-height: 1; border-radius:4rem; background: #10315b; font-weight:500; color: #fff;}
.pain .ss2__list li h4 {position: relative;font-size: var(--fs22);  font-weight: 700; }
.pain .ss2__list li dd {position: relative; font-size: var(--fs17); line-height: 1.7; font-weight: 300; }

@media(max-width:1500px){
	.pain .ss__tit {margin-bottom: 40rem;}
	.pain .ss1 .ss__list > li {gap: 30rem;grid-template-columns: repeat(1,1fr);}
	.pain .ss1 .ss__list > li .txt h3 {margin-bottom: 25rem;}
	.pain .ss1 .ss__list > li .img img {max-width: 100%; width: 100%;}
	.pain .ss1 .ss__list > li:nth-child(odd) .img img {margin: 0;}
	.pain .ss1 .ss__list > li:nth-child(even) .img img {margin: 0}
	.pain .ss1 .ss__list > li:nth-child(even) .img {grid-area: 1;}
	.pain .ss1 .ss__list > li + li {margin-top: 50rem;}
	.pain .ss2 {padding: 80rem 0;}
	.pain .ss2__list {grid-template-columns: repeat(1,1fr); gap: 15rem;}
	.pain .ss2__list dl {padding: 20rem;}
	.pain .ss2__list dt {margin-bottom: 15rem; padding-bottom: 15rem; } 
}


/* common */
.num_list {counter-reset:list-number;}
.num_list > li {position:relative; padding-left:25px; counter-increment:list-number;}
.num_list > li:before {position:absolute; left:0; top:6px; content:counter(list-number); width:18px; height:18px; font-size:11px; font-weight:400; color:#fff; text-align:center; line-height:18px; border-radius:100%; background: #24262a;}
.num_list > li + li {margin-top:5px;}
.bullet{position: relative; display: inline-block; flex-shrink: 0; aspect-ratio: 1/1; width: 22rem; background: #10315b; border-radius: 50%; }
.bullet::before{content: ''; position: absolute; margin: auto; inset: 0; aspect-ratio: 1/1; width: 11rem; background: var(--white); clip-path: polygon(0% 49.1%, 9.5% 39.5%, 37% 67%, 90.3% 13.7%, 100% 23.3%, 37% 86.2%); }

@media(max-width:767px){
	.bullet {width: 20rem;}
	.bullet::before {width: 9rem;}
}