html {
	--green:#2b6b5c;
	--yellow:#f1eed9;
	--orange:#ef5b26;
	--brown:#5b483a;
	--gray:#313131;
	--vh:1vh;
	--vh100:calc(var(--vh) * 100);
	word-break: keep-all;
}
html.safariWeb { --vh100:calc((var(--vh) * 100) + 120px) !important; }
html.kakoWeb { --vh100:calc((var(--vh) * 100) + 120px) !important; }

/* 로딩되기전에 깨진 레이아웃이보여서 가림막 설정 (메인에서 사용) */
.__cover{position: fixed; z-index: 999999; width: 100%; height: 100%; background-color: #000;}

a { display: block; }

/* footer & header styles */
header { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; transition: opacity 0.5s;}
header.hide{opacity: 0;}
header .wrap {display: flex; justify-content: space-between;padding: 30px 0; box-sizing: border-box; }
header .logo { position: relative; z-index: 1; }
header .logo a {transform: scale(1.5);}
header .logo svg { height: 50px; }
header .logo svg * { transition: fill 0.5s; }

header nav {display: flex; justify-content: flex-start; gap: 100px; }
header nav .depthBx { position: relative; display: flex; justify-content: center; }
header nav .depthBx .depth1 {font-size: 20px; font-weight: 700; color: var(--green); opacity: 0.5;display: flex; align-items: center; justify-content: flex-start; gap: 12px; transition: color 0.5s;}
header nav .depthBx:hover .depth1 { opacity: 1; }
header nav .depthBx .depth1 a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
header nav .depthBx .depth1 a p {}
header nav .depthBx .depth1 .ico { display: none; }
header nav .depthBx .depth2 {display: none;position: absolute;top: 100%; }
header nav .depthBx .depth2::before {content:''; display: block; position: absolute; width: 100%;height: 30px; bottom: 100%; margin-bottom: -5px; left: 0; }
header nav .depthBx .depth2 ul {border-radius: 4px; box-shadow: 0 0 10px -7px gray;background-color: #fff; overflow: hidden; }

header nav .depthBx .depth2 ul li { }
header nav .depthBx .depth2 ul li a {font-weight: 500; padding: 16px 20px; white-space: nowrap; text-align: center;min-width: 7em; line-height: 1.4; }
header nav .depthBx .depth2 ul li a:hover {background-color: var(--green); color: #fff; }
header nav .depthBx .depth2 ul li a:first-child { padding-top: 14px; }
header nav .depthBx .depth2 ul li a:last-child { padding-bottom: 14px; }


header .menuIco { display: none; font-size: 1px; width: 36em; height: 20em; align-items: center; justify-content: center; position: relative; z-index: 1001; }
header .menuIco::before { content:''; display: block; position: absolute; width: 100%; height: 100%; padding: 10em; }
header .menuIco div { width: 100%; height: 2px; background-color: var(--gray); border-radius: 30px; position: absolute; transition: opacity 0.5s,transform 0.5s,top 0.5s,bottom 0.5s,background-color 0.5s; }
header.yellow .menuIco div{background-color: var(--yellow);}
header.bg .menuIco div { background-color: #000; }
header.menuOn .menuIco div { background-color: #fff; }
header .menuIco div:nth-child(1) { top: 0; }
header .menuIco div:nth-child(2) { }
header .menuIco div:nth-child(3) { bottom: 0; }
header.menuOn .menuIco div:nth-child(1) { transform: rotate(45deg); top: 9em; }
header.menuOn .menuIco div:nth-child(2) { opacity: 0; transform: translateX(-50%); }
header.menuOn .menuIco div:nth-child(3) { transform: rotate(-45deg); bottom: 9em; }

/* 헤더 노란색 */
header.yellow { }
header.yellow .logo svg * { fill: var(--yellow); }
header.yellow nav .depth1{ color: var(--yellow); }
header.yellow nav .depthBx .depth2 ul li a:hover {background-color: var(--yellow); color: #000;}

/* 헤더 흰색(서브) */
header.white{ background-color: #fff; box-shadow: 0 5px 10px rgba(0,0,0,0.05); }

/* 메뉴온 */
header.menuOn ._logo_svg .st0{fill:#007BC7;}
header.menuOn ._logo_svg .st1{clip-path:url(#SVGID_2_);fill:#006BAE;}
header.menuOn ._logo_svg .st2{fill:#8FC31F;}
header.menuOn ._logo_svg .st3{fill:#787B7D;}
header.menuOn ._logo_svg .st4{fill:#787B7D;stroke:#787B7D;stroke-width:3.4214;stroke-miterlimit:10;}
header.menuOn ._logo_svg .st5{fill:none;}
header.menuOn ._logo_svg .st6{clip-path:url(#SVGID_4_);fill:#7BAA17;}
header.menuOn ._logo_svg .st7{fill:#F5A500;}
header.menuOn ._logo_svg .st8{fill:#F5A500;stroke:#F5A500;stroke-width:0.3468;stroke-miterlimit:10;}


@media screen and (max-width:1600px) { }
@media screen and (max-width:1440px) {
	header nav { gap: 70px; }
}
@media screen and (max-width:1280px) { }
@media screen and (max-width:1024px) {
	header .wrap { padding: 18px 0; }
	header .logo svg { height: 42px; }
	header nav { gap: 50px; }
	header nav .depthBx .depth1 { font-size: 18px; }
}
@media screen and (max-width:820px) {
    header .wrap{ align-items: center; }
	header nav {left: 0; top: 0; box-sizing: border-box;position: absolute; width: 100vw; height: var(--vh100);backdrop-filter: blur(10px); background-color: rgba(0,0,0,0.5);flex-direction: column; padding: 5vw; padding-top: 120px; align-items: flex-end;gap: 30px; opacity: 0; pointer-events: none;
		transition: opacity 0.5s;
	}
	header.menuOn nav{opacity: 1; pointer-events: auto;}
	header nav .depthBx{flex-direction: column; align-items: flex-end;}
	header nav .depthBx .depth1 { color: #fff; opacity: 1; font-size: 30px; }
	header nav .depthBx .depth1 a{pointer-events: none;}
	header nav .depthBx .depth1 .ico {display: flex; align-items: center; justify-content: center;width: 0.8em; height: 0.8em; position: relative; }

	/* on */
	header nav .depthBx.on .depth1{}
	header nav .depthBx .depth1 .ico::before,
	header nav .depthBx .depth1 .ico::after {content:''; display: block; position: absolute;width: 100%; height: 3px; background-color: #fff;transition: transform 0.5s,background-color 0.5s; }
	/* header nav .depthBx.on .depth1 .ico::before,
	header nav .depthBx.on .depth1 .ico::after{background-color: var(--green);} */
	header nav .depthBx .depth1 .ico::after { transform: rotate(90deg); }
	header nav .depthBx.on .depth1 .ico::after{transform: rotate(0deg);}
	header nav .depthBx .depth2{position: unset; width: 100%; margin-bottom: 20px;}
	header nav .depthBx .depth2 ul{background-color: var(--green);}
	header nav .depthBx .depth2 ul li a{color: #000; text-align: right; color: #fff;}

	header .menuIco { display: flex; }
}
@media screen and (max-width:500px) {
	header .logo svg { height: 32px; }
	header .menuIco { font-size: 0.9px; }
	header nav{padding-top: 100px; }
	header nav .depthBx .depth1{font-size: 22px; }
}
@media screen and (max-width:320px) { }




/* footer */
footer{
	background-color: var(--brown); color: var(--yellow);
	padding-top: 80px; padding-bottom: 90px;
}
footer .wrap{}
footer .top{
	display: flex; align-items: center; justify-content: space-between;
	padding-bottom: 12px; border-bottom: 1px solid rgba(241, 238, 217, 0.3);
}
footer .top .link{
	font-size: 18px; font-weight: 700;
	display: flex; align-items: center; justify-content: flex-start; gap: 50px;
}
footer .top .link a{}
footer .top .link a:hover{opacity: 0.5;}
footer .top .link a p{}
footer .top .logo{}
footer .top .logo svg{height: 50px;}
footer .top .logo svg *{fill: var(--yellow);}
footer .mid{
	display: flex; align-items: flex-start; justify-content: space-between;
	margin: 40px 0;
}
footer .mid .info{font-weight: 600;  line-height: 1.4;}
footer .mid .info address{margin-bottom: 16px;}
footer .mid .info .number{display: flex; align-items: center; justify-content: flex-start; gap: 40px;}
footer .mid .info .number > div{display: flex; align-items: center; justify-content: flex-start; gap: 10px; position: relative;}
footer .mid .info .number > div:first-child::after{
	content:''; display: block; position: absolute; width: 1px; height: 11px; background-color: var(--yellow);
	top: 50%; transform: translateY(-50%); right: -20px;
}
footer .mid .info .number b{}
footer .mid .info .number p{opacity: 0.5;}
footer .mid .family{position: relative;}
footer .mid .family .box{
	display: flex; align-items: center; justify-content: space-between;
	border: 1px solid var(--yellow); box-sizing: border-box; padding: 0 1em;
	font-size: 18px; font-weight: 700;
	width: calc(195/18*1em); height: calc(47/18*1em); cursor: pointer;
}
footer .mid .family .box:hover{background-color: var(--yellow); color: var(--brown);}
footer .mid .family .box p{transform: translateY(7%);}
footer .mid .family .box i{}
footer .mid .family ul{
	position: absolute; width: 100%; left: 0; bottom: 100%; margin-bottom: 10px;
	border: 1px solid var(--yellow); box-sizing: border-box; background-color: var(--brown);
	display: none;
}
footer .mid .family ul li{}
footer .mid .family ul li a{font-weight: 500; padding: 6px 1em;}
footer .mid .family ul li a:first-child{padding-top: 10px;}
footer .mid .family ul li a:last-child{padding-bottom: 10px;}
footer .mid .family ul li a:hover{background-color: #000;}
footer .bottom{}
footer .bottom .copy{font-size: 15px; opacity: 0.5; line-height: 1.6;}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	footer{padding: 60px 0;}
	footer .top .link{font-size: 18px; }
	footer .top .logo svg{height: 40px;}
	footer .mid{margin: 30px 0;}
	footer .mid .info{font-size: 14px; }
	footer .mid .family .box{font-size: 16px; }
	footer .bottom .copy{font-size: 14px; }
}
@media screen and (max-width:820px) {
	footer .top{flex-direction: column-reverse; gap: 40px; align-items: flex-start;}
	footer .top .link{gap: 40px; font-size: 16px; }
	footer .mid{flex-direction: column; gap: 40px;}
}
@media screen and (max-width:500px) {
	footer .top{align-items: center; padding-bottom: 30px; gap: 30px;}
	footer .top .link{gap: 10px; flex-wrap: wrap; font-size: 14px; justify-content: center;}
	footer .top .link a{border: 1px solid var(--yellow); box-sizing: border-box; padding: 10px 10px; border-radius: 2px; min-width: 7em; text-align: center;}
	footer .mid{gap: 30px;}
	footer .mid .info{text-align: center; margin: 0 auto;}
	footer .mid .info address{margin-bottom: 20px;}
	footer .mid .info .number{flex-direction: column; gap: 8px;}
	footer .mid .info .number > div:first-child::after{display: none;}
	footer .mid .family{margin: 0 auto;}
	footer .mid .family .box{font-size: 14px; }
	footer .bottom .copy{text-align: center; font-size: 12px; }
}
@media screen and (max-width:320px) {}


/* 서브비주얼 */
.shareVis{ width: 100%; overflow: hidden; position: relative; }
.shareVis .whitebx{ position: relative; z-index: 1; padding-top: 250px; box-sizing: border-box; padding-bottom: 60px; }
.shareVis .bg{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 0; width: 100%; max-width: 1155px; }
.shareVis .bg .grad._1,
.shareVis .bg .grad._3{ width: 20%; position: absolute; height: 100%;  z-index: 1; }

.shareVis .bg .grad._2,
.shareVis .bg .grad._4
{ width: 100%; position: absolute; height: 40%; }

.shareVis .bg .grad._1{ left: 0; top: 0; background: linear-gradient(-90deg, rgba(255,255,255,0), #fff); }
.shareVis .bg .grad._2{ left: 0; top: 0; background: linear-gradient(0deg, rgba(255,255,255,0), #fff); z-index: 1; }
.shareVis .bg .grad._3{ right: 0; top: 0; background: linear-gradient(90deg, rgba(255,255,255,0), #fff); }
.shareVis .bg .grad._4{ left: 0; bottom: 0; background: linear-gradient(180deg, rgba(255,255,255,0), #fff); z-index: 1; }

.shareVis .wrap{ position: relative; z-index: 3; }
.shareVis .wrap .subnav{ display: flex; align-items: center; flex-wrap: wrap;}
.shareVis .wrap .subnav .line{ width: 30px; height: 1px; background-color: rgba(0,0,0,0.5); }
.shareVis .wrap .subnav > a{ padding: 10px; box-sizing: border-box; display: block; font-size: 18px; letter-spacing: -0.04em; color: rgba(0,0,0,0.7); }
.shareVis .wrap .subnav > a:last-of-type{ color: #21584a; }
.shareVis .wrap h1{ font-size: 80px; letter-spacing: -0.04em; font-weight: 700; margin-top: 20px; line-height: 1.3;}
.shareVis .wrap .tabmenu{ display: flex; gap: 10px; margin-top: 100px; }
.shareVis .wrap .tabmenu li > a{ min-width: 100px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 14px; letter-spacing: -0.04em; color: #5b5b5b; background-color: #bababa; padding: 0 10px; box-sizing: border-box; line-height: 1.3; white-space: nowrap;}
.shareVis .wrap .tabmenu li.on > a{ color: #fff; background-color: #21584a; }
.shareVis .banner{ position: relative; z-index: 1; height: 400px; overflow: hidden; }
.shareVis .banner img{ width: 100%; }


@media screen and (max-width: 1280px){
    .shareVis .bg{ opacity: 0.7; }
    .shareVis .whitebx{ padding-top: 200px; }
    .shareVis .wrap .subnav > a{ font-size: 16px; }
    .shareVis .wrap h1{ font-size: 50px; margin-top: 10px; }
    .shareVis .wrap .tabmenu{ margin-top: 70px; }

    .shareVis .banner{ height: 250px; }
}

@media screen and (max-width: 820px){
    .shareVis .whitebx{ padding-top: 120px; padding-bottom: 40px; }
    .shareVis .wrap .subnav > a{ font-size: 14px; }
    .shareVis .wrap h1{ font-size: 35px; }
    .shareVis .wrap .tabmenu{ margin-top: 50px; }
    .shareVis .banner{ height: 200px; }
    .shareVis .banner img{ min-height: 100%; }
}

@media screen and (max-width: 500px){
    .shareVis .whitebx{ padding-top: 100px; }
    .shareVis .wrap .subnav > a{ padding: 5px; }
    .shareVis .wrap .subnav .line{ width: 15px; }
    .shareVis .wrap h1{ font-size: 28px; }
    .shareVis .wrap .tabmenu{ overflow-y: auto; }
}


/* 유투브 영상만 있는페이지 */
._videoArea{padding-top: 60px; padding-bottom: 180px;}
._videoArea .iframeBx{position: relative;}
._videoArea .iframeBx::before {
	content:''; display: block; padding-bottom: calc(9/16*100%);
}
._videoArea .iframeBx iframe{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}
.videoTitle {
    font-family: 'Pretendard';
    font-size: clamp(18px, 20/1440*100vw, 20px);
    font-weight: 500;
    color: #000;
    line-height: 1.5;
    margin-bottom: calc(30/22*1em);
    text-align: center;
}
@media screen and (max-width: 820px) {
    .videoTitle {
        font-size: clamp(14px, 18/500*100vw, 18px);
    }
    .videoTitle br {
        display: none;
    }
}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	._videoArea {padding-top: 40px; padding-bottom: 120px;}
}
@media screen and (max-width:500px) {
	._videoArea {padding-top: 0; padding-bottom: 60px;}
}
@media screen and (max-width:320px) {}


/* marquee */
._marquee{ display: flex; }
._marquee .con{ white-space: nowrap; animation: marquee forwards infinite 20s linear; }

@keyframes marquee {
    100%{ transform: translateX(-100%); }
}