@charset "utf-8";
/* 
* content CSS Document
* KOWEB
*/

/* sub visual */
.area_subVisual{ overflow: hidden; display: flex; justify-content: center; align-items: center; position:relative; padding-bottom: 0.6%; background: var(--black); box-sizing: border-box; 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_visual1.jpg); }
.area_subVisual.startup::before{ background-image:url(/images/content/sub_visual2.jpg); }
.area_subVisual.menu::before{ background-image:url(/images/content/sub_visual3.jpg); }
.area_subVisual.cs::before{ background-image:url(/images/content/sub_visual4.jpg); }
.area_subVisual.inquiry::before,
.area_subVisual.common::before{ background-image:url(/images/content/sub_visual5.jpg); }
.area_subVisual .inr{ height: auto; }
.area_subVisual h2{margin-top:50rem; margin-bottom: 0.35555556em; font-size: var(--fs45); font-weight: 400; }
.area_subVisual p{ font-size: 18rem; font-weight: 300; line-height: 1.55555556; }
@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: translateY(40rem); filter: blur(10rem); opacity: 0; }
		100%{ transform: translateY(0); filter: blur(0); opacity: 1; }
	}
	.area_subVisual::before{ animation: sub_visual_bg 1.8s both; }
	.area_subVisual .inr *{ opacity: 0; animation: sub_visual_text .8s .3s both; }
	.area_subVisual .inr * + *{ animation-delay: .5s; }
}
@media(min-width:768px){
	.area_subVisual{ aspect-ratio: 192/70; }
}
@media(min-width:1280px){
	.area_subVisual{ aspect-ratio: 192/60; }
}
@media(max-width:767px){
	.area_subVisual{ height:400rem; }
}

/* lnb */
.lnb{width:100%; height:60rem; background:#f8f6f2; overflow-x:auto; text-align:center;}
.lnb ul{display:table; margin:0 auto; table-layout:fixed; white-space:nowrap; vertical-align:middle;}
.lnb ul li{display:table-cell; padding:0 40rem;}
.lnb ul li:first-child{padding-left:80rem;}
.lnb ul li:last-child{padding-right:80rem;}
.lnb ul li a{display:block; line-height:60rem; font-size:18rem; font-weight:400; color:#a3a19d; white-space:nowrap;}
.lnb ul li a.on{color:#9d8e6b; font-weight:bold;}
@media(max-width:768px){
    .lnb ul li{padding:0 25rem;}
    .lnb ul li:first-child{padding-left:50rem;}
    .lnb ul li:last-child{padding-right:50rem;}
}


/* common content */
#content{ min-height:300px; padding:100rem 0 80rem; }
.sub_title{ margin-bottom:100rem;}
.sub_title h2{ text-align:center; font-size:var(--fs35); font-weight:400; }
.area_sub *{box-sizing:border-box;}
section+section{margin-top:100rem;}
@media(max-width:1279px){
    #content{padding:80rem 0;}
    .sub_title{margin-bottom:80rem;}
    section+section{margin-top:80rem;}
}
@media(max-width:767px){
    #content{padding:60rem 0;}
    .sub_title{margin-bottom:60rem;}
    section+section{margin-top:60rem;}
}


/* 회사소개 _ 인사말 */
.area_greeting img{display:block; margin:auto; max-width:900rem; width:100%;}
.area_greeting img.mo{display:none;}
@media(max-width:767px){
    .area_greeting img.pc{display:none;}
    .area_greeting img.mo{display:block;}
}


/* 회사소개 _ 연혁 */
.area_history .banner{padding:100rem 15rem; background:url(../images/content/img_history.jpg)no-repeat center/cover;}
.area_history .banner h2{text-align:center; color:#fff; font-size:var(--fs25); font-weight:400;}
.area_history .history{position:relative;}
.area_history .history:before{content:''; display:block; position:absolute; left:0; top:0; width:50%; height:100%; border-right:1px solid #ddd;}
.area_history .box{position:relative; width:50%; padding-top:80rem;}
.area_history .box.right{margin-left:auto; margin-right:0; padding-left:40rem;}
.area_history .box.left{margin-right:auto; margin-left:0; padding-right:40rem; text-align:end;}
.area_history .box:before{content:''; display:block; position:absolute; top:98rem; width:11rem; height:11rem; border-radius:50%; border:6rem solid var(--primary); background:#fff;}
.area_history .box.right:before{left:-11rem;}
.area_history .box.left:before{right:-12rem;}
.area_history .box h2{margin-bottom:25rem; font-size:var(--fs40); color:var(--primary); font-weight:400;}
.area_history .box > ul > li{display:flex; margin-top:16rem; font-size:18rem;}
.area_history .box.left > ul > li{flex-direction:row-reverse;}
.area_history .box > ul > li > em{display:block; width:70rem; font-weight:bold; color:#000;}
.area_history .box > ul > li > p{color:#444; width:calc(100% - 70rem);}
@media(max-width:1279px){
    .area_history .banner{padding:80rem 15rem;}
    .area_history .box{padding-top:70rem;}
    .area_history .box:before{top:86rem; width:9rem; height:9rem; border-width:5rem;}
    .area_history .box.right:before{left:-9rem;}
    .area_history .box.left:before{right:-10rem;}
    .area_history .box h2{margin-bottom:20rem;}
}
@media(max-width:767px){
    .area_history .banner{padding:60rem 15rem;}
    .area_history .history:before{width:10rem;}
    .area_history .box h2{margin-bottom:15rem;}
    .area_history .box{padding-top:60rem;}
    .area_history .box{margin:auto; padding:60rem 0 0 35rem !important; width:100%; text-align:left !important;}
    .area_history .box:before{right:auto !important; left:2rem !important; top:76rem;}
    .area_history .box.left > ul > li{flex-direction:row;}
}


/* 회사소개 _ 인증서 */
.area_certi ul{display:flex; margin-left:-40rem; justify-content:center;}
.area_certi ul li{padding-left:40rem; width:calc(100% / 4);}
.area_certi ul li a{display:block; width:100%;}
.area_certi ul li a .img{display:block; width:100%; border:1px solid #ddd;}
.area_certi ul li a .img img{display:block; width:100%;}
.area_certi ul li a i{display:block; margin:15rem 0 5rem; width:100%; text-align:center; color:var(--primary); font-size:16rem; font-weight:500;}
.area_certi ul li a em{display:block; width:100%; text-align:center; color:#333; font-size:18rem;}
@media(max-width:1279px){
    .area_certi ul li{width:calc(100% / 3);}
}
@media(max-width:767px){
    .area_certi ul{margin-left:-20rem;}
    .area_certi ul li{padding-left:20rem; width:calc(100% / 2);}
}


/* 회사소개 _ 오시는길 */
.area_location .tit{margin-bottom:30rem;}
.area_location .tit h2{font-size:var(--fs25); color:#111; font-weight:400;}
.area_location .tit span{display:block; position:relative; margin-top:15rem; width:100%; height:1px; background:#ddd;}
.area_location .tit span:after{content:''; display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); width:72rem; height:5rem; bottom:-3rem; background:var(--primary);}
.area_location .cont{display:flex;}
.area_location .info{display:flex; align-items:center; width:45%; padding-right:80rem;}
.area_location .info > ul{width:100%;}
.area_location .info > ul > li{display:flex; padding:15rem 0; font-size:18rem; color:#444;}
.area_location .info > ul > li em{font-weight:bold; color:#000; width:90rem; color:var(--primary);}
.area_location .info > ul > li p,
.area_location .info > ul > li a,
.area_location .info > ul > li > ul{width:calc(100% - 90rem);}
.area_location .info > ul > li > ul > li{display:flex; justify-content:space-between; align-items:baseline;}
.area_location .info > ul > li > ul > li+li{margin-top:15rem;}
.area_location .info > ul > li > ul > li i{display:block; padding:2rem 0; width:80rem; background:var(--primary); color:#fff; border-radius:25rem; text-align:center;}
.area_location .info > ul > li > ul > li p{width:calc(100% - 90rem);}
.area_location .map{width:55%; height:450rem}
.area_location .map iframe{width:100% !important; height:100% !important;}
@media(max-width:1279px){
    .area_location .info{padding-right:50rem; width:50%;}
    .area_location .info > ul > li em{width:80rem;}
    .area_location .info > ul > li p,
    .area_location .info > ul > li a,
    .area_location .info > ul > li > ul{width:calc(100% - 80rem);}
    .area_location .map{width:50%; height:380rem;}
}
@media(max-width:767px){
    .area_location .cont{flex-direction:column-reverse;}
    .area_location .tit{margin-bottom:25rem;}
    .area_location .tit h2{font-size:var(--fs30);}
    .area_location .tit span{margin-top:15rem;}
    .area_location .tit span:after{width:60rem;}
    .area_location .info{margin-top:15rem; width:100%; padding-right:0;}
    .area_location .info > ul > li{padding:10rem 0;}
    .area_location .map{width:100%; height:280rem;}
}


/* 창업안내 _ 브래드장점 */
.area_brand .sec_txt{font-size:0; text-align:center;}
.area_brand .sec_txt h2{display:inline-block; position:relative; padding:35rem 30rem; font-size:var(--fs25); color:#111; font-weight:normal;}
.area_brand .sec_txt h2 > br{display:none;}
.area_brand .sec_txt img{display:block; position:absolute; width:25rem;}
.area_brand .sec_txt img.icon01{top:0; left:0;}
.area_brand .sec_txt img.icon02{bottom:0; right:0;}
.area_brand .sec_brand{display:flex;  align-items: center;}
.area_brand .sec_brand .img{display:block; width:50%;}
.area_brand .sec_brand .img img{display:block; width:100%;}
.area_brand .sec_brand .txt{display:flex; flex-wrap:wrap; align-content:flex-end; width:50%;}
.area_brand .sec_brand .txt i{display:block; margin-bottom:30rem; font-size:80rem; font-weight:bold; line-height:1; color:var(--primary); opacity:0.3; width:100%;}
.area_brand .sec_brand .txt h3{font-weight:600; font-size:var(--fs22); width:100%;}
.area_brand .sec_brand .txt span{display:block; margin:35rem 0; width:80rem; height:2px; background:var(--primary);}
.area_brand .sec_brand .txt p{font-size:18rem; color:#444; width:100%;}
.area_brand .sec_brand.st01 .txt{padding-left:80rem;}
.area_brand .sec_brand.st02{flex-direction:row-reverse;}
.area_brand .sec_brand.st02 .txt{padding-right:80rem;}
.area_brand .sec_brand dl {width: 100%;}
.area_brand .sec_brand dl dd {color:#444; width:100%;}
.area_brand .sec_brand dl dd + dd {margin-top: 12rem;}

@media(max-width:1279px){
    .area_brand .sec_brand .txt{}
    .area_brand .sec_brand .txt i{margin-bottom:20rem; font-size:60rem;}
    .area_brand .sec_brand .txt span{margin:25rem 0;}
    .area_brand .sec_brand.st01 .txt{padding-left:40rem;}
    .area_brand .sec_brand.st02 .txt{padding-right:40rem;}
}


@media(max-width:1080px){
    .area_brand .sec_txt h2 > br{display:block;}
    .area_brand .sec_txt img{right:auto !important; left:50% !important; transform:translateX(-50%);}
    .area_brand .sec_brand{flex-wrap:wrap; flex-direction:column-reverse !important;}
    .area_brand .sec_brand .img{margin-top:25rem; width:100%;}
    .area_brand .sec_brand .txt{display:block; width:100%; padding:0 !important;}
    .area_brand .sec_brand .txt{padding-top:10rem; padding-bottom:10rem;}
    .area_brand .sec_brand .txt i{margin-bottom:15rem; font-size:40rem;}
    .area_brand .sec_brand .txt span{margin:20rem 0; width:60rem;}
}

/* 창업안내 _ 창업가이드 */
.area_guide {}
.area_guide .gu_title {position: relative; font-size: var(--fs28); line-height: 1; padding-left: 15rem; margin-bottom: 40rem; font-weight: 500;}
.area_guide .gu_title::before {content: ''; position: absolute; top: 0; left: 0; width: 4rem; height: 100%; background: #9d8e6b;}
.area_guide .ss01 > ul {display: grid; gap: 40rem 60rem; grid-template-columns: repeat(2,1fr); text-align: center;}
.area_guide .ss01 .img {width: 100%;;}
.area_guide .ss01 .img img {width: 100%; max-width: 100%;}
.area_guide .ss01 .txt {margin-top: 20rem;}
.area_guide .ss01 .txt h3 {font-size: var(--fs24); margin: 25rem 0;}
.area_guide .ss01 .txt h3 span {display: block; color: #9d8e6b; margin-bottom: 8rem; font-weight: 800;}
.area_guide .ss01 .txt dl span, .area_guide .guide_list span {display: block; color: #9d8e6b; margin-top: 4rem;}
.area_guide .ss01 .txt dl {margin-top: 20rem; color: #444; font-size: var(--fs17);}
.area_guide .ss01 .txt dl dd + dd {margin-top: 15rem;}
.area_guide .ss01 .txt .guide_list {margin-top: 20rem; color: #444;}
.area_guide .ss01 .txt .guide_list li + li {margin-top: 4rem;}
.area_guide .ss02 {position: relative; padding: 100rem 0; margin-top: 100rem; background: #f8f6f2;}
.area_guide .ss02::before {content: ''; position: absolute; inset: 0 -50vw 0; height: auto; background: #f8f6f2; z-index: -1;}
.area_guide .ss02 .process_list {font-size: var(--fs17); color: #444;}
.area_guide .ss02 .process_list .tit {margin-bottom: 20rem;}
.area_guide .ss02 .process_list .tit p {font-size: var(--fs22); font-weight: 600; color: #222;}
.area_guide .ss02 .process_list .tit span {display: block; margin-top: 10rem;}
.area_guide .ss02 .process_list > li + li {margin-top: 50rem;}
/* .area_guide .numb_list {margin-top: 30rem;} */

.numb_list {counter-reset:list-number;}
.numb_list > li {position:relative; padding-left:25px;counter-increment:list-number;}
.numb_list > li:before {position:absolute; left:0; top:3rem; content:counter(list-number); width:20rem; height:20rem; font-size:10rem; font-weight:700; color:#fff; text-align:center; line-height:20rem; border-radius:100%; background:#333;}
.numb_list > li + li {margin-top:8px;}


@media(prefers-reduced-motion:no-preference){
	.area_guide .ss01 > ul li:nth-child(2){ transition-delay: .3s; }
	.area_guide .ss01 > ul li:nth-child(3){ transition-delay: .6s; }
}
@media(max-width:1280px){
    .area_guide .ss01 > ul {gap: 30rem;}
}

@media(max-width:767px){
    .area_guide .ss02 {padding: 60rem 0; margin-top: 60rem;}
    .area_guide .ss01 > ul { gap: 0; grid-template-columns: repeat(1,1fr); }   
    .area_guide .ss01 > ul > li:not(:first-child) {margin-top: 40rem; padding-top: 40rem; border-top: 2px dashed #ddd;}
    .area_guide .ss01 .txt dl span, .area_guide .guide_list span {font-size: 14rem;}
    .area_guide .ss01 .txt dl dd + dd {margin-top: 10rem;}
    .area_guide .ss02 .process_list > li + li {margin-top: 30rem;}
}