@charset "utf-8";
@import url('/WebContent/design/common/css/NanumSquareNeo.css');
@font-face {
	font-family: 'FlightSans';
	src: url('/WebContent/design/common/css/font/FlightSans-Bold.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'FlightSans';
	src: url('/WebContent/design/common/css/font/FlightSans-Title.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
}

:root {
	--sprite_layout: url('/WebContent/design/sunbeeworld/img/layout/layout_sprite.png') no-repeat;
	--nanum : 'NanumSquareNeo';
	--flight : 'FlightSans';
	--p_color : #e54045;
	--red : #e54045;
	--brown : #623d1b;
	--yellow : #fcd24b;
	--blue : #0066b1;
	--green : #43af35;
	--common_radius : 20rem;
}

body { font-family:'NanumSquareNeo'; letter-spacing:-0.8rem; font-size:17rem; color:#222; background:#f8f5ec; }
input, select, button { font-family:'NanumSquareNeo'; letter-spacing:-0.8rem; font-size:17rem; color:#222; }
strong {font-weight:600; }
a { color:#222; }
.red {color:var(--red);}
.brown {color:var(--brown);}
.yellow {color:var(--yellow);}
.blue {color:var(--blue);}
.green {color:var(--green);}
.wrap { width:96%; max-width:1440rem; margin:0 auto; }
@media all and (max-width:1023px){
	html {font-size:0.9px; }
}
@media all and (max-width:768){
	html {font-size:0.85px; }
}

header { position:absolute; left:0; top:0; width:100%; z-index:100; }
header > .wrap { max-width:100%; width:100%; display:flex; align-items:center; justify-content:space-between; height:120rem; padding:0 40rem;}
header > .wrap .right {display:flex; align-items:center;}
header > .wrap > a,
header > .wrap .right > a { display:flex; align-items:center; justify-content:center; flex-direction:column; font-size:14rem; font-weight:600; width:80rem; height:80rem; background:#fff; border-radius:50%; }
header > .wrap .right > #search_open { margin-right:10rem; }
header > .wrap > a::before,
header > .wrap .right > a::before { content:''; display:block; width:28px; height:23px; background:var(--sprite_layout) -203px -1px; margin-bottom:3rem; }
header > .wrap .right > a.language::before { width:23px; background-position:-241px -5px; }
header > .wrap h1 a::before {content:''; display:block; width:109px; height:86px; background:var(--sprite_layout) -839px -3px;}
header > .wrap .right > #search_open::before { width:22px; height:23px; background-position:-241px -38px; }
.language_div { display:none; position:absolute; right:56rem; top:120rem; }
.language_div a { position:relative; display:flex; align-items:center; justify-content:center; width:45rem; height:45rem; border-radius:50%; background:#fff; margin-top:5rem; font-size:0.75em; font-weight:600; letter-spacing:0; }
.language_div a.close_btn {background:#333; color:#fff; }
header.fixed {position:fixed; width:100%; top:-100%; }
header.fixed.on {top:0;}
header.fixed > .wrap { height:60rem; background:#fff; padding:0 30rem;}
header.fixed > .wrap h1 {padding-top:0; }
header.fixed > .wrap h1 a::before { width:101px; height:38px; background-position:-441px -5px; transform:none; }
header.fixed > .wrap > a {flex-direction:row; width:auto; height:auto; border-radius:0; background:transparent; }
header.fixed > .wrap > a::before {margin-right:10rem; margin-bottom:0; }
header.fixed .language_div { right:25rem; top:60rem; }
header.fixed .language_div a {width:60rem; height:30rem; border-radius:10rem; background:#fff; }
header.fixed .language_div a.close_btn {background:#333; }
@media all and (max-width:1400px){
	header > .wrap {height:110rem; padding:0 2%;}
	header > .wrap h1 a {zoom:70%;}
	header.fixed > .wrap {padding:0 2%;}
}
@media all and (max-width:1023px){
	header > .wrap { background:#fff; height:60rem; }
	header > .wrap h1 {padding-top:0;}
	header > .wrap h1 a {zoom:100%;}
	header > .wrap h1 a::before { width:101px; height:38px; background-position:-441px -5px; }
	header > .wrap > a,
	header > .wrap .right > a { flex-direction:row; width:auto; height:auto; border-radius:0;}
	header > .wrap .right > a.language {display:none;}
	header > .wrap .right > #search_open {display:flex; margin-right:0;}
	header > .wrap > a::before,
	header > .wrap .right > a::before {margin-right:10rem; margin-bottom:0; }
	header .language_div,
	header.fixed .language_div { right:15rem; top:60rem; }
	header .language_div a {width:60rem; height:30rem; border-radius:10rem; }
}

.m_nav > div {right:auto; left:-100%;}

/*
footer { background:#3b3630; color:#fff; margin-top:80rem; padding:60rem 0;}
footer .wrap {position:relative; }
footer .footer_logo {position:absolute; right:0; bottom:10px; width:280px; height:40px; background:var(--sprite_layout) -551px -5px; }
footer .link_wrap {display:flex; justify-content:space-between;}
footer .link { display:flex; flex-wrap:wrap; align-items:center; }
footer .link a { display:flex; align-items:center; color:#fff;}
footer .link a::after {content:''; display:block; width:1px; height:13rem; background:#fff; margin:0 20rem; opacity:0.3; }
footer .link a:last-of-type::after { display:none; }
footer .family_site { position:relative; }
footer .family_site > a { display:flex; align-items:center; justify-content:space-between; color:#fff; text-transform:uppercase; width:200rem; }
footer .family_site > a::after { content:''; display:block; width:19rem; height:19rem; border-radius:50%; border:2px solid #fff; }
footer .family_site > a::before { content:''; position:absolute; right:8rem; top:9rem; width:5rem; height:5rem; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); }
footer .family_site div { display:none; position:absolute; left:0; top:35rem; width:100%; height:100rem; padding:10rem 15rem; background:#fff; border-radius:10rem; overflow-y:auto; }
footer .family_site div a { display:block; font-size:0.85em; padding:5rem 0;}
footer .address { display:flex; flex-wrap:wrap; margin:20rem 0 10rem; }
footer .address p {margin-right:40rem; font-size:0.9em; }
footer .address p strong { margin-right:10rem; }
footer p.copy {font-size:0.8em; letter-spacing:0;  }
@media all and (max-width:768px){
	footer {margin-top:60rem;}
	footer .link_wrap {flex-direction:column-reverse; }
	footer .family_site {border-bottom:1px dashed #555; margin-bottom:20rem; padding-bottom:15rem;  }
	footer .family_site > a {width:100%; }
	footer .footer_logo { display:none;}
}
@media all and (max-width:480px){
	footer .footer_logo {display:none;}
}
*/

footer { background:#3b3630; color:#fff; margin-top:80rem; padding:60rem 0;}
footer > .wrap > .top, footer > .wrap > .bottom {display: flex; flex-wrap: wrap; justify-content: space-between;}
footer .logo-footer {margin-bottom: 30rem;}
footer > .wrap > .top {padding-bottom: 15rem;}
footer > .wrap > .bottom {align-items: center;}
footer .link { display: flex; flex-wrap: wrap; margin-top: 10rem;}
footer .link li { font-weight: 600; margin: 10rem 27rem; line-height: 1;}
footer .link li:first-child {margin-left: 0;}
footer .link li:last-child {margin-right: 0;}
footer .link li a{color:#fff;}
footer .link .privacy {text-decoration: underline;}
footer address p {margin-right: 65rem; margin-top: 10rem;}
footer address p strong {margin-right: 20rem;}
footer .copyright {display: block; color: #747474; font-size: 14px; margin-top: 10rem;}
footer .sns {margin-top: 48rem; display: flex; flex-wrap: wrap; justify-content:flex-end; gap: 6rem;}
footer .sns a {display: block; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #dddddd; text-indent: -999999rem;}
footer .sns a.youtube {background:#fff url('/WebContent/design/sunbi/img/layout/ico_youtube.svg') no-repeat center;}
footer .sns a.instagram {background:#fff url('/WebContent/design/sunbi/img/layout/ico_instagram.svg') no-repeat center;}
footer .sns a.facebook {background:#fff url('/WebContent/design/sunbi/img/layout/ico_facebook.svg') no-repeat center;}

footer .family_site { position:relative; }
footer .family_site > a { display:flex; align-items:center; justify-content:space-between; color:#fff; text-transform:uppercase; width:200rem; }
footer .family_site > a::before { content:''; position:absolute; right:0; top:9rem; width:5rem; height:5rem; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); }
footer .family_site div { display:none; position:absolute; left:0; top:35rem; width:100%; height:100rem; padding:10rem 15rem; background:#fff; border-radius:10rem; overflow-y:auto; }
footer .family_site div a { display:block; font-size:0.85em; padding:5rem 0;}

@media all and (max-width: 768px) {
  footer .logo-footer {text-align: center;}
  footer .left, footer .right {width: 100%;}
  footer .link {justify-content: center;}
  footer .link li {margin: 10rem 20rem;}
  footer address {text-align: center;}
  footer address p {margin: 10rem 20rem 0 0;}
  footer .copyright {text-align: center;}
  .familysite { width:200rem; margin: 10rem auto 0;}
  footer .sns {justify-content: center;}
}

@media all and (max-width:1023px){
	#containter {margin-top:60rem; }
}


/*sub_layout*/
.sub_visual_wrap {position:relative; height:500rem; overflow:hidden; }
.sub_visual_wrap::after {content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(180deg, #50aeed 0% , #1778b9 100%); }
.sub_visual_wrap .visual_mask {position:absolute; left:0; bottom:-1px; width:100%; z-index:3;  }
.sub_visual_wrap .cloud {position:absolute; width:1920rem; height:100%; left:50%; bottom:0; transform:translateX(-50%); z-index:1; }
.sub_visual_wrap .cloud > img {position:absolute; animation: floatyCloud 8s ease-in-out infinite;  }
.sub_visual_wrap .cloud > img.cloud1 { left:-150rem; bottom:-120rem; animation-delay: 1s; animation:reverse; }
.sub_visual_wrap .cloud > img.cloud2 { left:230rem; bottom:-180rem; animation-delay: 2s; }
.sub_visual_wrap .cloud > img.cloud3 { right:600rem; bottom:-120rem; z-index:1;  animation-delay: 1.2s; animation:reverse;}
.sub_visual_wrap .cloud > img.cloud4 { right:-160rem; bottom:-150rem; animation-delay: 1.3s; }
.sub_visual_wrap .cloud > img.cloud5 { left:530rem; top:90rem; animation-delay: 1.5s;  animation:reverse;}
.sub_visual_wrap .cloud > img.cloud6 { right:-80rem; top:90rem; animation-delay: 3s;}
.sub_visual_wrap .character { position:absolute; left:50%; bottom:0; width:1200rem; height:100%; transform:translateX(-50%); z-index:2; }
.sub_visual_wrap .character > img {position:absolute; animation: jump 2.5s ease-in-out; }
.sub_visual_wrap .character > img.bok {left:0; bottom:-80rem; }
.sub_visual_wrap .character > img.sik {left:195rem; bottom:-90rem; z-index:1; }
.sub_visual_wrap .character > img.ok {left:370rem; bottom:-80rem; }
.sub_visual_wrap .character > img.gri {left:550rem; bottom:-70rem; z-index:2; }
.sub_visual_wrap .character > img.jini {right:250rem; bottom:-95rem; z-index:1; }
.sub_visual_wrap .character > img.rak {right:0; bottom:-100rem; }
@keyframes floatyCloud {
	0% {
		transform: translate(0px, 0px) rotate(0deg);
	}
	25% {
		transform: translate(4px, -6px) rotate(0.3deg);
	}
	50% {
		transform: translate(0px, -10px) rotate(-0.3deg);
	}
	75% {
		transform: translate(-4px, -6px) rotate(0.2deg);
	}
	100% {
		transform: translate(0px, 0px) rotate(0deg);
	}
}
@keyframes jump {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  30% {
    transform: translateY(-20rem) scale(1.05);
  }
  60% {
    transform: translateY(5rem) scale(0.98);
  }
}
.content_wrap h3 {font-family:var(--flight); font-size:50rem; margin-bottom:50rem; }
.sub_nav {margin:60rem auto 30rem;}
.sub_util .share div a.tiktok::after { width:17px; height:19px; background:url('/WebContent/design/sunbeeworld/img/layout/sub_share_sns_tiktok.png') no-repeat center; }
@media all and (min-width:1024px){
	.sub_util .share div a.insta,
	.sub_util .share div a.tiktok {display:none !important;}
}
@media all and (min-width:481px){
	.sub_nav.ver3 .depth1 > li {width:auto;}
	.sub_nav.ver3 .depth1 > li::before {height:15rem; background:#aaa; }
	.sub_nav.ver3 .depth1 > li.home {width:auto;}
	.sub_nav.ver3 .depth1 > li.home a::before { content:''; display:block; width:21px; height:18px; background:url('/WebContent/design/sunbeeworld/img/layout/sub_layout_home.png') no-repeat center; }
	.sub_nav.ver3 .depth1 > li.home a::after {display:none;}
	.sub_nav.ver3 .depth1 > li:not(.home) > a::after { width:19rem; height:19rem; border-radius:50%; border:2px solid #222; transform:none; margin:0 0 0 10rem; }
	.sub_nav.ver3 .depth1 > li:not(.home) > a::before { content:''; position:absolute; right:8rem; top:46%; width:5rem; height:5rem; border-left:2px solid #222; border-bottom:2px solid #222; transform: translateY(-50%) rotate(-45deg); }
	.sub_nav.ver3 .depth2 { width:200rem; border:0; border-radius:10rem; left:-10rem; margin-top:10rem; padding:10rem 15rem; background:#fff; }
}
@media all and (max-width:1400px){
	.sub_visual_wrap {height:400rem;}
	.sub_visual_wrap .character,
	.sub_visual_wrap .cloud {zoom:80%;}
}
@media all and (max-width:1023px){
	.sub_nav.ver3 > ul { width:auto !important; border-top:0 !important; margin-top:20rem; }
}
@media all and (max-width:768px){
	.sub_nav.ver3 > ul { width:100% !important; }
	.sub_visual_wrap {height:200rem;}
	.sub_visual_wrap .character,
	.sub_visual_wrap .cloud {zoom:50%;}

	.content_wrap h3 {font-size:40rem;}
}
@media all and (max-width:480px){
	.sub_visual_wrap {display:none;}
	.sub_nav.ver3 .depth1 > li.home span {position:unset !important;}
	.sub_nav.ver3 .depth1 > li.home a::after {display:none;}
	/*
	.sub_nav.ver3 > ul {min-height:auto; }
	.sub_nav.ver3 .depth1 > li {height:auto;}
	.sub_nav.ver3 .depth1 > li:nth-of-type(2n):not(.home) {margin-right:40rem;}
	.sub_nav.ver3 .depth1 > li:nth-of-type(2n)::before {display:block;}
	.sub_nav.ver3 .depth1 > li:last-of-type {margin-right:0;}
	.sub_nav.ver3 .depth1 > li:last-of-type::before {display:none;}
	.sub_nav.ver3 .depth2 {margin-top:0;}*/

	.content_wrap h3 {text-align:center;}
}