

/* common */
html,body{font-size: 6.25%;}
html.safari.desktop {font-size: 0.040083333vw;}
body{font-size:17rem; word-break:keep-all; overflow-y:overlay; overflow-x: hidden;}

.wrapper {position:relative; width:1400rem; max-width:92%; margin:0 auto;}


/* header */
#header {position: fixed; top: 0; width:100%; transition: all 0.6s; z-index:99;}
#header.yx_Active .header_inner{background: transparent !important;}
#header.yx_Active nav{opacity: 0; visibility: hidden;}
#header .header_inner {display:flex; align-items:center;  padding:0 60rem; transition:all 0.4s ease 0s; position: relative; z-index:100;}
#header h1{z-index:888;}
#header h1 a {display:inline-block; max-width: 180px; height: auto; color: #fff; text-transform: uppercase;}
#header h1 a img{display: block; width: 100%; height: auto; object-fit: contain;}
#header .area_until {position:absolute; right:60rem; display:flex; align-items:center;}
#header .area_until ul {display:flex;}
#header .area_until ul > li {position:relative; padding:0 15rem;}
#header .area_until ul > li a {display:inline-block; font-size:14rem; color:#fff; }
#header .area_until ul > li::before {position:absolute; left:0; top:8rem; content:''; width:1px; height:10rem; background:#fff; opacity:.3;}
#header .area_until ul > li:first-child::before {display:none;}
#header.nav_show  .header_inner{ transform: translateY(0%); background-color:rgba(0, 0, 0, .45);}
#header.nav_hide{transform: translateY(-100%);}

/* btn_pc */
#header .btn_menu_pc {position:relative; display:flex; align-items:center; margin-left:30rem; font-weight:600; color:#fff; transition:all 0.3s ease 0s; z-index:888;}
#header .btn_menu_pc > i {position:relative; width:12rem; height:12rem; margin-right:15rem;}
#header .btn_menu_pc > i span {display:block; position:absolute; left:0rem; width:3rem; height:3rem; background:#fff; transition:all 0.3s ease; transition-delay:0.3s, 0;}
#header .btn_menu_pc > i span:nth-of-type(1){top:0; transform-origin:left top;}
#header .btn_menu_pc > i span:nth-of-type(2){left:auto; right:0; transform-origin:right top;}
#header .btn_menu_pc > i span:nth-of-type(3){bottom:0; transform-origin:left bottom;}
#header .btn_menu_pc > i span:nth-of-type(4){left:auto; right:0; bottom:0; transform-origin:right bottom;}
#header .btn_menu_pc > p {display:block;}

#header.active .btn_menu_pc{color: #111;}
#header.active .btn_menu_pc > i span {background:#111}
#header .btn_menu_pc.active > i span:nth-of-type(1){transform:rotate(-45deg) scale(.7, 2.5) translate(-1rem, 0.5rem);}
#header .btn_menu_pc.active > i span:nth-of-type(2){transform:rotate(45deg) scale(.7, 2.5) translate(1rem, 0.5rem);}
#header .btn_menu_pc.active > i span:nth-of-type(3){transform:rotate(45deg) scale(.7, 2.5) translate(-1rem, -0.5rem);}
#header .btn_menu_pc.active > i span:nth-of-type(4){transform:rotate(-45deg) scale(.7, 2.5) translate(1rem, -0.5rem);}

.full_menu {position:fixed; left:0; top:0; display:grid; grid-template-columns: .7fr 1fr; align-items: center; width:100%; height:100vh; background:var(--yx_Grad); overflow:hidden; opacity: 0; visibility:hidden; transition:.3s ease 0s;}
.full_menu.active {opacity:1; visibility:visible; z-index:88;}
.full_menu .img {height:100%; background: url(../image/fullmenu.jpg) no-repeat center / cover;}
.full_menu .full_gnb {padding:0 60rem 0 80rem; box-sizing: border-box;}
.full_menu .gnb > li {display:flex; align-items:center; padding:30rem 0; border-bottom:1px solid rgba(255, 255, 255, .1);}
.full_menu .gnb > li:last-child {border-bottom:none;}
.full_menu .gnb > li > a {margin-right:50rem; font-size:30rem; font-weight:700; color:#fff;}
.full_menu .gnb > li > a .yx_icon{display: none;}
.full_menu .gnb > li > ul {display:flex; flex-wrap:wrap; gap:10rem 30rem; align-items:center; padding-top:10rem;}
.full_menu .gnb > li > ul > li {position:relative;}
.full_menu .gnb > li > ul > li:before {position:absolute; left:-15rem; top:50%; content:''; width:1px; height:10rem; background:rgba(255, 255, 255, .1); transform:translate(0, -50%); }
.full_menu .gnb > li > ul > li:first-child:before {display:none;}
.full_menu .gnb > li > ul > li > a {position: relative; padding-bottom: 1rem; font-size: 16rem; color:#fff; transition: .3s;}
.full_menu .gnb > li > ul > li:hover > a::after {position: absolute; left:0; bottom:0; content:''; width: 100%; height: 1rem; background-color: #fff;}

/* btn_mo */
#header .btn_menu {position:relative; display:none; align-items:center; margin-left:15rem; font-size:18rem; font-weight:600; color:#fff; transition:all 0.3s ease 0s; z-index:888;}
#header .btn_menu > i {position:relative; width:18rem; height:18rem;}
#header .btn_menu > i span {display:block; position:absolute; left:0rem; width:5rem; height:5rem; background:#fff; transition:all 0.3s ease; transition-delay:0.3s, 0;}
#header .btn_menu > i span:nth-of-type(1){top:0; transform-origin:left top;}
#header .btn_menu > i span:nth-of-type(2){left:auto; right:0; transform-origin:right top;}
#header .btn_menu > i span:nth-of-type(3){bottom:0; transform-origin:left bottom;}
#header .btn_menu > i span:nth-of-type(4){left:auto; right:0; bottom:0; transform-origin:right bottom;}
#header .btn_menu > p {display:block; padding-top:4rem;}

#header .btn_menu.active > i span:nth-of-type(1){transform:rotate(-45deg) scale(.7, 2.5) translate(-1rem, 0.5rem);}
#header .btn_menu.active > i span:nth-of-type(2){transform:rotate(45deg) scale(.7, 2.5) translate(1rem, 0.5rem);}
#header .btn_menu.active > i span:nth-of-type(3){transform:rotate(45deg) scale(.7, 2.5) translate(-1rem, -0.5rem);}
#header .btn_menu.active > i span:nth-of-type(4){transform:rotate(-45deg) scale(.7, 2.5) translate(1rem, -0.5rem);}

#header .btn_close{position:fixed; top:30rem; right:30rem; width:20rem; height:20rem;}
#header .btn_close span {position:absolute; opacity: 0; visibility: hidden; left:8rem; display:inline-block; width:4rem; height: 100%; background:#fff; transform:rotate(45deg);}
#header .btn_close span:first-child {transform:rotate(-45deg);}

#header nav {display:inline-block;}
#header nav > h1 {display: none;}
#header nav .gnb {display:flex; text-align:center;}
#header nav .gnb > li{display:inline-block; position:relative; margin: 0 2vw;}
#header nav .gnb > li:last-child:after{background:none;}
#header nav .gnb > li > a {position: relative; display:inline-block; width:auto; line-height: 98px; font-weight: 500; color:#fff; transition:all 0.4s ease 0s;}
#header nav .gnb > li > a i{font-size: var(--yx_FS14); display: inline-block; margin-left:8px;}
#header nav .gnb > li > a.on, .sub #header nav .gnb > li > a.on {font-weight: 800;}
#header nav .gnb > li > a.on::before,
.sub #header nav .gnb > li > a.on::before {position:absolute; left:12rem; top:0; content:''; width:8rem; height:8rem; display: block; border-radius: 100%; background-color: #e75a56;}

/* footer */
#footer {padding:80rem 0; color:#fff; background:#f2ebd9;}
#footer .wrapper {display:flex;}
#footer .footer_logo {display:inline-block; font-size: 28rem; color: #fff; text-transform: uppercase;}
#footer .footer_address {padding-left:100rem;}
#footer .footer_address ul {display:flex; flex-wrap:wrap;}
#footer .footer_address ul li {position:relative; margin-right:25rem; padding-right:25rem;}
#footer .footer_address ul li:before {position:absolute; right:0; top:3rem; content:''; width:1px; height:12rem; background:#fff; opacity:.2;}
#footer .footer_address ul li:last-child:before {display:none;}
#footer .footer_address ul li a {font-size: 16rem; font-weight:bold; color:#332c2b;}
#footer .footer_address ul li a:hover{color: #332c2b;}
#footer .footer_address address {margin:20rem 0; font-size:14rem; line-height:2; opacity:0.85;}
#footer .footer_address address span {display:inline-block; margin-right:25rem; color: #332c2b;}
#footer .footer_address address a {display:inline-block; color:#332c2b;}
#footer .footer_address > p {font-size:14rem;  color:#332c2b;   font-weight:300; opacity:0.7;}
#footer .footer_sns {margin-left:auto;}
#footer .footer_sns ul {display:flex; align-items:center; gap:0 20rem; margin-top:20rem;}
#footer .footer_sns ul li a {display:block;}
#footer .footer_sns ul li a img {width:25rem;}

/* @media (min-width:2000px){
	html,
	html.safari.desktop{font-size:0.05254860746190225vw;}
} */

@media (max-width:1480px){
	html,
	html.safari.desktop{font-size:0.06756756756756757vw;}

	#header .header_inner {padding: 0 30rem; }
	#header .area_until {right: 35rem;}

	.full_menu {grid-template-columns:0.7fr 1fr;}

	#header nav .gnb > li > a.on::before,
	.sub #header nav .gnb > li > a.on::before {left: 5rem; width: 6rem; height: 6rem;}

}
@media all and (min-width:1025px){

	#header nav .gnb > li ul{position: absolute; left: 0; border-radius: 10px 10px; overflow: hidden; opacity: 0; visibility: hidden; transition-property: opacity, visibility; transition-duration: 0.1s; min-width: 183px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1);}
	#header nav .gnb > li ul.active{display:block; transition-delay:0.1s;}
	#header nav .gnb > li.active ul{opacity:1; visibility:visible; z-index:10; transition-delay:0s, 0s, 0s;}
	#header nav .gnb > li ul > li > a{display:block; position:relative; padding:10rem var(--yx_FS16); background:#fff; border-top:1rem solid #e1e1e1; font-size:var(--yx_FS16); color:#404040; text-align:left; transition:all 0.3s ease 0s;}
	#header nav .gnb > li ul > li > a:hover{background: var(--yx_Color); color: #fff;}
	#header nav .gnb > li ul > li:first-child > a{border-top-width:0px;}

	#header.active .header_inner {background:#fff;}
	#header.active h1 a {color: #e75a56;}
	#header.active nav .gnb > li > a,
	#header.active .btn_menu {color:#111;}
	#header.active .area_until ul > li a {color:#aaa;}
	#header.active .area_until ul > li::before {background:#e1e1e1; opacity:1;}
	#header.active  .btn_menu > i span {background:#111;}

	#header[data-value="black"] {border-bottom: 1rem solid #e1e1e1;}
	#header[data-value="black"] .header_inner {background:#fff;}
	#header[data-value="black"] h1 a {background-image:url(http://almondkidsbusan.com/images/common/logo_color.svg);}
	#header[data-value="black"] nav .gnb > li > a,
	#header[data-value="black"] .btn_menu {color:#111;}
	#header[data-value="black"] .area_until ul > li a {color:#aaa;}
	#header[data-value="black"] .area_until ul > li::before {background:#e1e1e1; opacity:1;}
	#header[data-value="black"] .btn_menu > i span {background:#111;}
	#header[data-value="black"] .btn_menu_pc{color: #111;}
	#header[data-value="black"] .btn_menu_pc > i span {background:#111}
	#header[data-value="black"] .btn_menu_pc.active {color: #fff;}
	#header[data-value="black"] .btn_menu_pc.active > i span {background:#fff}

	body.active {overflow:hidden;}
}

@media all and (max-width:1023px){
	html,
	html.safari.desktop{font-size:0.09775171065493645vw;}
	body{font-size:16rem;}
	#header .header_inner {position:relative; max-width:100%; margin:0 auto; padding:10px 3vw;}
	#header h1 {z-index:51;}
	#header h1 a {font-size: 24rem;}
	#header nav {position:fixed; opacity: 0; visibility: hidden; top:0; left:0; display:grid; grid-template-rows:auto 1fr; z-index:88; width:100%; height:100vh; padding-bottom:60rem; margin:0; box-sizing:border-box; background:var(--yx_CTwo);}
	#header nav.on{opacity:1; visibility:visible; transition:all 0.3s ease;}
	#header nav .gnb > li{display:block;}
	#header nav .gnb{display:grid; align-content:center; width:100%; overflow-y:auto;}
	#header nav .gnb > li {padding:0; margin:20rem 0;}
	#header nav .gnb > li > a {display:inline-block; padding:0 20rem; font-size:27rem; font-weight:600;   color:#fff; transition:all 0.3s ease 0s;}
	#header nav .gnb > li ul{display:none; padding:0;}
	#header nav .gnb > li ul > li {display:inline-block; padding:0 10rem;}
	#header nav .gnb > li ul > li > a {display:block; padding:10rem 0rem; font-size: 16rem; color:#fff;}
	#header nav .gnb > li ul li.active a{color:#eeaf5e;}
	#header nav > h1 { display:block; width:100%; padding:20rem 31rem; font-size: 24rem; text-transform: uppercase; color: #fff; border-bottom:1px solid rgba(255, 255, 255, .1);}
	#header nav > h1 img {width:170rem; height:40rem;}
#header h1 a img{height: 60px;}
	
	#header .area_until > ul {visibility: hidden; opacity: 0; position:fixed; left:0; bottom:0; display:flex; align-items: center; justify-content: center; width:100%; height:60rem; z-index:99; background:rgba(0, 0, 0, .1);}
	#header .area_until > ul.active {visibility: visible; opacity: 1;}

	#header .btn_menu {display:flex;}
	#header .btn_menu_pc {display:none;}
	#header .btn_close{opacity:1; visibility:visible;}

	body.active {overflow: hidden;}

	#header[data-value="black"] {border-bottom: 1rem solid #e1e1e1;}
	#header[data-value="black"] .header_inner {background:#fff;}
	#header[data-value="black"] h1 a {background-image:url(http://almondkidsbusan.com/images/common/logo_color.svg);}
	#header[data-value="black"] .btn_menu {color:#111;}
	#header[data-value="black"] .btn_menu > i span {background:#111;}
	#header[data-value="black"] .btn_menu.active > i span {background:#fff;}

	.full_menu {display:none;}

	#footer .wrapper {flex-wrap:wrap;flex-direction:column;}
	#footer .footer_logo br {display: none;}
    #footer .footer_address {padding-left:0; margin:30rem 0 0;}
    #footer .footer_sns {margin-left:0;}
    #footer .footer_address address br {display:none;}
}

@media all and (max-width:860px){
    html,
	html.safari.desktop{font-size:0.13020833333333335vw;}

	#footer {padding: 60rem 0;}
	#footer .footer_logo {font-size: 24rem;}
}
@media all and (max-width:540px){
    html,
	html.safari.desktop{font-size:0.26666666666666665vw;}	
    body {font-size: 14rem;}
.area_event .waves{
	display: none !important;
}  
	#header h1 a {font-size: 15rem;}
	#header nav > h1 {font-size: 15rem; padding: 12rem 15rem; box-sizing: border-box;}
	#header nav > h1 img {width: 100rem; height: auto;}
	#header .area_until {right:0;}
	#header .area_until ul {height: 50rem;}
	#header .area_until ul > li a {font-size: 12rem;}
	#header nav .gnb > li {margin: 12rem 0;}
	#header nav .gnb > li ul {margin-top: 8rem;}
	#header nav .gnb > li ul > li {padding: 0 5rem;}
	#header nav .gnb > li ul > li > a {padding: 5rem 0; font-size: 13rem;}
	#header .btn_menu {width: 30rem; height: 30rem; justify-content: center; font-size:14rem;}
	#header .btn_menu > i {width:10rem; height:10rem;}
	#header .btn_menu > i span {width:3rem; height:3rem;}
#header h1 a img,#footer .footer_logo img{height: 40px;}
	#header nav .gnb > li > a {font-size: 16rem; line-height: 60px;}

	#footer {padding:50rem 0;}
	#footer .footer_logo {font-size: 18rem;}s
	#footer .footer_address {margin:25rem 0 0;}
	#footer .footer_address ul {gap:10rem 0;}
	#footer .footer_address ul li {margin-right:15rem; padding-right:15rem;}
	#footer .footer_address ul li a {font-size:13rem;}
    #footer .footer_address address,
    #footer .footer_address > p {font-size: 12rem; line-height: 2;} 
}

@media all and (max-width:480px){
	body{font-size:13rem;}

	.font_jalnan {letter-spacing: -.5rem;}

	#footer .footer_address {font-size: 11rem;}
	#footer .footer_address address {line-height: 1.8;}
	#footer .footer_address ul {gap:7rem 0;}
	#footer .footer_address ul li a {font-size: 12rem;}
	
}
