@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

/* header */
#header{ border-bottom: 1px solid #e1e1e1; }

/* sub visual */
.area_subVisual{ overflow: hidden; display: flex; justify-content: center; align-items: center; position:relative; height:350px; margin-top:100px; box-sizing: border-box; text-align:center; color: #fff; transition:.3s;}
.area_subVisual::before{ content: ''; position: absolute; inset: 0; background: 50% / cover; }
.common .area_subVisual::before {background-image:url(/images/content/sub_visual.jpg);}
.about01 .area_subVisual::before {background-image:url(/images/content/sub_visual01.jpg);}
.about02 .area_subVisual::before {background-image:url(/images/content/sub_visual02.jpg);}
.about03 .area_subVisual {height:530px;}
.about03 .area_subVisual::before {background-image:url(/images/content/sub_visual03.jpg);}

@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; }
}


/* common content */
#content {min-height:300px; padding: 100px 0 150px; }
#content.about {padding-bottom:0 !important;}
.sub_top {position:relative; margin-bottom:55px;}
.sub_title {font-size:var(--font_size55); font-weight:normal; line-height:normal;}
.ss_title {font-size:var(--font_size35); font-weight:700; color:#111;}
.title_exp {font-size:var(--font_size22); margin:20px 0 0; color:#333; line-height:1.8;}
.sub_section {margin-top:100px;}

/* lnb */
.area_lnb {position:absolute; right:0; top:0; display:inline-flex; align-items:center; font-size:var(--font_size15); color:#888; border-radius:100px; border:1px solid #f0f0f0; background:#f5f5f5; z-index:8; transition:.3s;}
.area_lnb > * { position: relative; padding:15px;}
.area_lnb li:before {position:absolute; left:0; top:50%; content:''; width:3px; height:3px; border-radius:100%; background:#ccc; transform:translate(-50%, -50%);}
.area_lnb .home {padding-left:30px;}
.area_lnb .home img {width:17px; margin-top:-4px;}
.area_lnb .home:before {display:none;}
.area_lnb .sub {position:relative; display:block; min-width:90px; color:#333;}
.area_lnb ul { display: flex; padding-left: 0; }
.area_lnb ul li{ position: relative; }
.area_lnb ul li a{ padding: 16px 15px; transition: 0.2s;}
.area_lnb ul li:hover a, 
.area_lnb ul li a.on{ color: var(--primary); }

/* about01 */
.about01 {margin-bottom:150px;}
.about01 .ss01 {font-size:var(--font_size22); line-height:1.8;}
.about01 .ss01 .title {text-align:center; margin-bottom:100px;}
.about01 .ss01 .title em {position:relative; display:inline-block; font-size:var(--font_size18); color:#543388; font-weight:700;}
.about01 .ss01 .title em:after {position:absolute; left:0; bottom:0; content:''; width:100%; height:1px; background:#543388;}
.about01 .ss01 .title h2 {margin:30px 0 0; font-size:var(--font_size45); font-weight:800; color:#111;}
.about01 .ss01 .title h2 br {display:none;}
.about01 .ss01 .box {display:flex; justify-content: center; gap: 0 clamp(2em, 5.71428571vw, 80px); align-items:center;}
.about01 .ss01 .box > * { max-width: 620px; width: 100%;}
.about01 .ss01 .box .img {box-sizing:border-box;}
.about01 .ss01 .box img {max-width:100%;}
.about01 .ss01 .box .ss_title {margin-bottom:30px;}
.about01 .ss01 > p {margin:80px 0; text-align: center;}
.about01 .ss01 ul {display:flex; justify-content: center; gap:0 20px;}
.about01 .ss01 ul li img { width: 100%; max-height:260px;}
.about01 .ss01 .font_sbatang {text-align:center; margin:100px 0; font-size:37px; color:#9e005d; font-weight:600; letter-spacing:-2.5px; line-height:1.6;}
.about01 .ss02 {border-top:1px solid #e1e1e1;}
.about01 .ss02 > div {margin-top:80px;}
.about01 .ss02 > div .ss_title {margin-bottom:30px;}
.about01 .ss02 > div ul {display:flex; gap:0 20px; text-align:center; font-size:var(--font_size22); color:#333; font-weight:600; }
.about01 .ss02 > div ul li {width:33.33%;}
.about01 .ss02 > div ul li img {max-width:100%; margin-bottom:15px;}


/* about02 */
.about02 {margin-bottom:150px;}
.about02 .ss01 {font-size:var(--font_size22); line-height:1.8;}
.about02 .ss01 .title {text-align:center; margin-bottom:100px;}
.about02 .ss01 .title em {position:relative; display:inline-block; font-size:var(--font_size18); color:#543388; font-weight:700;}
.about02 .ss01 .title em:after {position:absolute; left:0; bottom:0; content:''; width:100%; height:1px; background:#543388;}
.about02 .ss01 .title h2 {margin:30px 0 0; font-size:var(--font_size45); font-weight:800; color:#111;}
.about02 .ss01 .title h2 br {display:none;}

.about02 .ss01 .box {display:flex; align-items:flex-start;}
.about02 .ss01 .box > * {width:50%;}
.about02 .ss01 .box .ss_title {margin-bottom:30px;}
.about02 .ss01 .box .ss_title span {display:block; font-size:var(--font_size18); font-weight:300; color:#aaa; letter-spacing:1px;}
.about02 .ss01 .bx01 .img {padding-right:80px; box-sizing:border-box;}
.about02 .ss01 .bx01 .img img {display:block; max-width:100%;}
.about02 .ss01 .bx01 .img img:last-child {height:130px; margin:50px auto;}
.about02 .ss01 .bx01 dl dd + dd {margin-top:20px;}
.about02 .ss01 .bx01 strong {position:relative; margin-right:10px; font-weight:600; color:#543388;} 
.about02 .ss01 .bx01 strong:before {position:absolute; left:0; bottom:0; content:''; width:100%; height:1px; background:#543388;}
.about02 .ss01 .bx01 strong:after {position:absolute; right:0; top:0; content:'*'; font-size:var(--font_size16); font-weight:600; color:#543388; transform:translate(100%, 0); line-height:1;}
.about02 .ss01 .bx01 p {font-size:var(--font_size14); color:#543388;}
.about02 .ss01 .bx01 > div:last-child {padding:30px 0;}
.about02 .ss01 > ul {display:flex; gap:0 10px; margin-top:50px;}
.about02 .ss01 > ul li {width:25%;}
.about02 .ss01 > ul li img {max-width:100%;}

.about02 .ss01 .bx02 {margin-top:80px; gap:0 100px;}
.about02 .ss01 .bx02 dl dt {position:relative; display:inline-block; margin-bottom:7px;}
.about02 .ss01 .bx02 dl dt span {position:relative; font-weight:600;}
.about02 .ss01 .bx02 dl dt:before {position:absolute; left:0; bottom:7px; content:''; width:100%; height:10px; background:#f1dce2;}
.about02 .ss01 .bx02 ul {display:flex; align-items:flex-start; gap:0 10px; margin-top:50px;}
.about02 .ss01 .bx02 ul li {width:50%;}
.about02 .ss01 .bx02 ul li img {max-width:100%;}

.about02 .ss02 ul {display:flex; gap:0 20px;}
.about02 .ss02 ul li {width:25%; box-sizing:border-box; border:1px solid #e1e1e1;}
.about02 .ss02 ul li img {max-width:100%;}


/* about03 */
.about03 .ss01 {display:flex; align-items:center;}
.about03 .ss01 > * {width:50%; box-sizing:border-box;}
.about03 .ss01 .img {padding-right:100px;}
.about03 .ss01 .img img {max-width:100%; border:1px solid #e5e6e8;}
.about03 .ss01 ul li {display:flex; font-size:var(--font_size22); padding:40px 20px; box-sizing:border-box; border-bottom:1px solid #e1e1e1;}
.about03 .ss01 ul li > span {position:relative; width:27%; padding-left:40px; font-weight:600; color:#111; box-sizing:border-box;}
.about03 .ss01 ul li > span i {position:absolute; left:0; top:-2px; width:20px; height:20px;}
.about03 .ss01 ul li > p {width:73%; color:#333;}
.about03 .ss01 ul li > p span {display:block; margin-top:5px; font-size:var(--font_size18); color:#888;}
.about03 .ss01 ul li:last-child {border-bottom:0;}

.about03 .spotLabel {display:inline-block; font-size:var(--font_size18); box-shadow:5px 10px 10px rgba(0, 0, 0, .2);}
.about03 .spotLabel section {position:relative; height:50px; line-height:48px; font-weight:700; padding:0 20px; border-radius:5px; background:#fff; }
.about03 .spotLabel section:after {position:absolute; top:50%; content:''; width:10px; height:10px; background:#fff; border-radius:3px; border:1px solid #111;}

.about03 .shopspot {transform:translate(-50%, -25%); margin-right:85px;}
.about03 .shopspot section { height:55px; line-height:55px; color:#ed1c24; border:1px solid #ed1c24;}
.about03 .shopspot section img {display:inline-block; height:28px; margin-right:7px;}
.about03 .shopspot section:after {right:-1px; border-width:1px 1px 0 0; border-color:#ed1c24; transform:translate(50%, -50%) rotate(45deg);}

.about03 .park section {color:#111; border:1px solid #111;}
.about03 .park section:after {border-color:#111;}
.about03 .parking1 {transform:translate(-50%, 50%); margin-right:55px;}
.about03 .parking1 section:after {right:-1px; border-width:1px 1px 0 0; transform:translate(50%, -50%) rotate(45deg);}
.about03 .parking2 {transform:translate(50%, 50%); margin-left:70px;}
.about03 .parking2 section:after {left:-1px; border-width:0 0 1px 1px; transform:translate(-50%, -50%) rotate(45deg);}





/* product */
.product_banner {margin-bottom:100px;}
.product_banner img {max-width:100%; width:100%;}

.product_category {margin-bottom:50px;}
.product_category .ss_title {margin-bottom:30px;}
.product_category ul {display:flex; flex-wrap:wrap; gap:10px;}
.product_category ul li {display:inline-block;}
.product_category ul li a {display:block; padding:12px 30px; font-size:var(--font_size18); color:#888; border-radius:100px; border:1px solid #e1e1e1; transition: .3s;}
.product_category ul li a:hover {color:#333;}
.product_category ul li.on a {font-weight:600; color: var(--primary); border-color:var(--primary);}

.product_list {display:flex; flex-wrap:wrap; gap:50px 0; margin:0 -10px;}
.product_list li {width:25%; padding:0 10px; color:#333; box-sizing:border-box;}
.product_list li .img {margin-bottom:20px;}
.product_list li img {max-width:100%; width:100%; object-fit:cover; aspect-ratio:335/400; height:100%;}
.product_list li p {font-size:var(--font_size18); font-weight:600; margin-bottom:5px;}
.product_list li span {display:block; color:#333;}

/* notice */
.img_notice{ display: block; margin: 2.25em auto 0; max-width: 100%; }

@media (max-width:1080px){

	.area_subVisual{height:270px; margin-top:80px;}
	.about03 .area_subVisual {height:400px;}

	.area_lnb > * {padding:13px 15px;}
	.area_lnb .lnb ul {padding:13px 15px;}

	#content {padding: 80px 0; }
	.sub_section {margin-top:80px;}

	
	.about01 {margin-bottom:80px;}
	.about01 .ss01 .title {margin-bottom:80px;}
	/* .about01 .ss01 .box .img {padding-right:50px;} */
	.about01 .ss01 .box .ss_title {margin-bottom:15px;}
	.about01 .ss01 > p {margin:60px 0;}
	.about01 .ss01 .font_sbatang {margin:80px 0; font-size:30px;}
	.about01 .ss02 > div {margin-top:50px;}
	.about01 .ss02 > div .ss_title {margin-bottom:20px;}


	.about02 {margin-bottom:80px;}
	.about02 .ss01 .title {margin-bottom:80px;}
	.about02 .ss01 .bx01 .img {padding-right:50px;}
	.about02 .ss01 .bx01 > div:last-child {padding:0;}
	.about02 .ss01 .box .ss_title {margin-bottom:15px;}
	.about02 .ss01 .bx02 {margin-top:50px; gap:0 50px;}


	.about03 .ss01 {flex-wrap:wrap;}
	.about03 .ss01 .img {padding-right:0;}
	.about03 .ss01 .img img {width:100%; box-sizing:border-box;}
	.about03 .ss01 ul {width:100%; margin-top:15px;}
	.about03 .ss01 ul li > span {width:20%;}
	.about03 .ss01 ul li > p {width:80%;}
	.about03 .ss02 #map {height:400px !important;}


	.product_banner {margin-bottom:55px;}
	.product_category .ss_title {margin-bottom:20px;}
	.product_category ul li a {padding:12px 20px;}
	.product_list li {width:33.33%;}


}



@media (max-width:767px){

	.area_subVisual {height:220px; margin-top:0;}
	.about03 .area_subVisual {height:300px;}
	
	.area_lnb {top:-10px;}
	.area_lnb > * {padding:11px 15px;}
	.area_lnb .home {padding-left:20px;}
	.area_lnb .home img {width:14px; margin-top:-3px;}
	.area_lnb .lnb {padding-right:40px;}
	.area_lnb svg {right:20px;}
	.area_lnb .lnb ul {padding:11px 15px; border-radius:22px;}

	#content {padding: 55px 0; }
	.sub_title {font-size:27px;}
	.sub_section {margin-top:55px;}


	.about01 {margin-bottom:55px;}
	.about01 .ss01 .title {margin-bottom:35px;}
	.about01 .ss01 .title h2 {margin:20px 0 0;}
	.about01 .ss01 .box {flex-wrap:wrap; text-align:center;}
	.about01 .ss01 .box > div {width:100%;}
	.about01 .ss01 .box .img {padding-right:0; margin-bottom:30px;}
	.about01 .ss01 > p {margin:20px 0 55px; text-align:center;}
	.about01 .ss01 ul {flex-wrap:wrap; gap:10px 0; justify-content:center; margin:0 -5px;}
	.about01 .ss01 ul li {width:50%; padding: 0 5px; box-sizing:border-box;}
	/* .about01 .ss01 ul li:nth-last-child(-n+2) {width:auto;} */
	.about01 .ss01 .font_sbatang {margin:55px 0; font-size:24px;}
	.about01 .ss02 > div ul {gap:0 10px;}
	.about01 .ss02 > div ul li img {margin-bottom:10px;}
	.about01 .ss02 > div:last-child ul {flex-wrap:wrap; margin:0 -5px; gap:20px 0;}
	.about01 .ss02 > div:last-child ul li {width:50%; padding:0 5px; box-sizing:border-box;}


	.about02 {margin-bottom:55px;}
	.about02 .ss01 .title {margin-bottom:35px;}
	.about02 .ss01 .title h2 {margin:20px 0 0;}
	.about02 .ss01 .box {flex-wrap:wrap; text-align:center;}
	.about02 .ss01 .box > div {width:100%;}
	.about02 .ss01 .bx01 .img {padding-right:0; margin-bottom:30px;}
	.about02 .ss01 .bx01 .img img:last-child {height:85px; margin:50px auto 0;}
	.about02 .ss01 .box .ss_title span {font-size:14px;}
	.about02 .ss01 .bx01 dl dd + dd {margin-top:15px;}
	.about02 .ss01 > ul {flex-wrap:wrap; margin:30px -5px 0; gap:10px 0;}
	.about02 .ss01 > ul li {width:50%; padding:0 5px; box-sizing:border-box;}
	.about02 .ss01 .bx02 > div {padding-top:50px; border-top:1px solid #e1e1e1;}
	.about02 .ss01 .bx02 > div:last-child {margin-top:50px;}
	.about02 .ss01 .bx02 ul {margin-top:30px; margin:30px -5px 0; gap:10px 0;}
	.about02 .ss01 .bx02 ul li {padding:0 5px; box-sizing:border-box;}
	.about02 .ss02 {padding-top:55px; border-top:1px solid #e1e1e1;}
	.about02 .ss02 ul {flex-wrap:wrap; margin:0 -5px; gap:10px 0;}
	.about02 .ss02 ul li {width:50%; padding:0 5px; border:none;}
	.about02 .ss02 ul li img {border:1px solid #e1e1e1;}





	.about03 .ss01 > * {width:100%;}


	.product_category {margin-bottom:40px;}
	.product_category ul {gap:7px;}
	.product_category ul li a {padding:8px 15px; font-size:13px;}
	.product_list {gap:30px 0;}
	.product_list li .img {margin-bottom:15px;}
	.product_list li p {margin-bottom:3px;}

	
}


@media (max-width:767px){
	
	.area_lnb {position:relative; right:auto; top:auto; margin-top:25px;}
	.area_lnb .lnb {display:inline-block;}
	.area_lnb ul li a{ padding: 16px 8px; font-size: 13px; }
	.area_subVisual {height:175px;}

}

@media (max-width:500px){

	.area_subVisual {height:155px;}
	.title_exp {margin:10px 0 0; line-height:1.65;}

	.about03 .area_subVisual {height:200px;}

	.about01 .ss01 {line-height:1.65;}
	.about01 .ss01 .title h2 {margin:20px 0 5px;}
	.about01 .ss01 .box .ss_title {margin-bottom:10px;}
	.about01 .ss01 > p {margin:10px 0 40px;}
	.about01 .ss01 ul li img {width:100%; max-height:none;}
	.about01 .ss01 ul li:nth-last-child(-n+2) {width:50%;}
	.about01 .ss01 .font_sbatang {font-size:22px;}
	.about01 .ss02 > div {margin-top:30px;}
	.about01 .ss02 > div:last-child {padding-top:30px; border-top:1px solid #e1e1e1;}
	.about01 .ss02 > div ul {flex-wrap:wrap; margin:0 -5px; gap:20px 0;}
	.about01 .ss02 > div ul li {width:50%; box-sizing:border-box; padding:0 5px;}


	.about02 .ss01 {line-height:1.65;}
	.about02 .ss01 .title h2 {margin:20px 0 5px;}
	.about02 .ss01 .box .ss_title {margin-bottom:10px;}


	.about03 .ss01 ul {margin-top:5px;}
	.about03 .ss01 ul li {display:block; padding:30px 0;}
	.about03 .ss01 ul li > * {width:100% !important;}
	.about03 .ss01 ul li > p {padding-left:25px; box-sizing:border-box; margin-top:10px;}
	.about03 .ss01 ul li > span {padding-left:25px;}
	.about03 .ss01 ul li > span i {top:2px; width:15px; height:15px;}
	.about03 .ss01 ul li > span i img {vertical-align:top;}
	.about03 .ss02 #map {height:300px !important;}


	.product_banner {margin-bottom:40px;}
	.product_list li {width:50%;}

}


@media (max-width:420px){
	
	.sub_top {margin-bottom:50px;}
	.area_subVisual {height:130px;}
	.area_lnb > * {padding:10px;}
	.area_lnb .lnb ul {padding:10px;}

	.about01 .ss01 .title h2 {line-height:1.35; margin:25px 0 10px;}
	.about01 .ss01 .title h2 br {display:block;}
	.about01 .ss01 > p {margin:12px 0 40px;}
	.about01 .ss01 > p br:first-child {display:none;}
	.about01 .ss01 ul {margin:0;}
	.about01 .ss01 ul li {width:100% !important; padding:0 !important;}
	.about01 .ss01 .font_sbatang {font-size:20px; line-height:1.5; letter-spacing:-1.5px;}
	.about01 .ss01 .font_sbatang br {display:none;}


	.about02 .ss01 .title h2 {line-height:1.35; margin:25px 0 10px;}
	.about02 .ss01 .title h2 br {display:block;}
	.about02 .ss01 .bx01 .img img:last-child {height:65px;}
	.about02 .ss01 .bx01 dl dd br {display:none;}
	.about02 .ss01 > ul {margin:30px 0 0;}
	.about02 .ss01 > ul li {width:100%; padding:0;}
	.about02 .ss01 > ul li img {width:100%;}
	.about02 .ss01 .bx02 ul {flex-wrap:wrap; margin:30px 0 0;}
	.about02 .ss01 .bx02 ul li {width:100%; padding:0;}
	.about02 .ss01 .bx02 img {width:100%;}
	.about02 .ss02 ul {margin:0;}
	/* .about02 .ss02 ul li {width:100%; padding:0;} */
	.about02 .ss02 ul li img {width:100%;}


}