@charset "UTF-8";
@import url('/design2026/common/css/A2Z.css');
@import url('/design2026/common/css/pretendard-subset.css');

:root {
	--p_color : #355CFA;
	--radius: 10rem;
	--A2Z: 'A2Z', sans-serif;
	--pret : 'Pretendard', sans-serif;
	--shadow: 0 18px 48px rgba(18, 49, 90, 0.08);

}
@media all and (max-width:1023px){
	html {font-size:0.9px; }
}

html {scroll-behavior: auto !important;}
body { font-family:'A2Z', sans-serif; font-weight:400; letter-spacing:-0.5rem; font-size:17rem; color:#444; }
html, body {overflow:unset;}
input, select, button { font-family:'A2Z', sans-serif; letter-spacing:-0.5rem; font-size:17rem; color:#444; }
strong {font-weight:600; }
a { color:#444; }


/*header*/
.wrap { width:96%; max-width:1720px; margin:0 auto; }
.header { height: 80rem; border-bottom: 1px solid #ddd; }
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.brand span { width: 1px; height: 25rem; margin: 0 20rem; background: #ddd; }
.brand strong { font-size: 20rem; font-weight: 600;  }

.pc_nav .depth1 > li > a { font-size: 19rem; padding:20rem 25rem; }
.pc_nav .depth2_wrap { top:65rem; z-index:10; }
.pc_nav .depth2 { width:200rem; background:#fff; border-color:#ddd; font-size:0.95em;  }
.pc_nav .depth2 > li > a { border-bottom:1px solid #efefef; }
.pc_nav .depth3 { left:199rem; width:200rem; background:#efefef; border:1px solid #dedede; font-weight:300; }

.header__tools { display: flex; align-items: center; gap:20rem; flex: 0 0 auto; }
.city-link { display:flex; align-items:center; color:#555; font-size: 15rem; margin-right:20rem;}
.city-link span { display:flex; align-items:center; justify-content:center; width:20rem; height:20rem; background:#D9D9D9; border-radius:50%; margin-left:10rem; }
.city-link span::before {content:''; display:block; width:5px; height:5px; border-top:1px solid #444; border-right:1px solid #444; transform:rotate(45deg); }
.icon-button { display:flex;  align-items:center; justify-content:center;  width:30rem; height:30rem; }

#m_nav_open {display:none;}
.m_nav .site_name strong {font-size:24rem;}


/*footer*/
.footer { background: #323645; color: #fff; font-weight:300; padding:60rem 0;overflow:hidden;  }
.footer__inner { position:relative; display: flex; align-items:flex-start; justify-content: space-between; }
.footer__inner .brand span {background:#fff; opacity:0.2; }
.footer__inner .brand strong {color:#fff;}
.brand--footer { margin-bottom: 28rem; }
address {display:flex; flex-wrap:wrap;}
address p {margin:5rem 40rem 0 0 ; }
address p strong {margin-right:10rem; }
.copyright { font-size: 14rem; letter-spacing:0; margin-top:20rem; opacity:0.6; }
.family-site { position:absolute; right:0; top:0; width:250rem; background:#474A58; border-radius:var(--radius); }
.family-site > a {display:flex; align-items:center; justify-content:space-between; height: 50rem; padding:0 20rem;  color:#fff; }
.family-site > a::after { content:''; display:block; width:5rem; height:5rem; border-bottom:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg);}
.family-site > a.active::after { transform:rotate(-135deg); }
.family-site .list { display:none; padding:5rem 0 15rem; height:100rem; overflow-y:auto;}
.family-site .list::-webkit-scrollbar {width: 5px;}
.family-site .list::-webkit-scrollbar-thumb {background: rgba(255,255,255,0.5);}
.family-site .list a {display:block; color:#fff; font-size:15rem; padding:5rem 20rem;}


@media all and (max-width:1500px){
	.brand img {height:45rem;}
	.brand span {margin:0 10rem; }
	.brand strong {font-size:18rem; }
	.pc_nav .depth1 > li > a { font-size:18rem; padding:20rem 15rem; }
	.city-link {margin-right:0;}
	.header__tools {gap:10rem;}
}
@media all and (max-width:1400px){
	.footer {padding:40rem 0;}
}
@media all and (max-width:1300px){
	.city-link {display:none;}
	.pc_nav .depth1 > li > a { padding:20rem 13rem; }
}
@media all and (max-width:1023px){
	.pc_nav,
	.icon-button--menu {display:none;}
	#m_nav_open {display:flex;}
}
@media all and (max-width:768px){
	.footer__inner {padding-top:80rem;}
	.family-site { width:100%; }
}


/*sub_layout*/
.sub { position:relative; display:flex; justify-content:space-between; padding:60rem 0; }
.sub::before {content:''; position:absolute; left:400rem; top:0; width:1px; height:100%; background:#ddd; }
.sub .content_wrap { width:calc(100% - 440rem);  }
.sub_nav { position:relative; width:360rem; }
@media all and (max-width:1400px){
	.sub {padding:40rem 0;}
	.sub::before {content:''; position:absolute; left:340rem; top:0; width:1px; height:100%; background:#ddd; }
	.sub .content_wrap { width:calc(100% - 380rem); }
	.sub_nav { position:relative; width:300rem; }
}
@media all and (max-width:1023px){
	.sub::before,
	.sub_nav {display:none;}
	.sub .content_wrap {width:100%;}
}

.sub_nav > .sticky { position:sticky; top:30rem; overflow:hidden;  }
.sub_nav h2 { margin-bottom:25rem; font-size: 28rem; font-weight: 600; }
.sub_nav.ver1 .depth1 > li { padding:3rem 0;}
.sub_nav.ver1 .depth1 > li > a { position:relative; border:0; padding:0 25rem; height:55rem; align-items:center; margin-top:0; }
.sub_nav.ver1 .depth1 > li > a::before {content:''; position:absolute; left:10rem; top:50%; width:4px; height:4px; border-radius:50%; border:2px solid var(--p_color); box-shadow:2rem 2rem 3rem rgba(0,0,0,0.2); transform:translateY(-50%); z-index:-1; }
.sub_nav.ver1 a.more::after { flex-shrink:0; width:7rem; height:10rem; border-bottom:3px solid #999; border-right:3px solid #999; margin-right:5rem; }
.sub_nav.ver1 .depth1 > li > a.on::after,
.sub_nav.ver1 .depth1 > li > a:hover::after { display:block; }
.sub_nav.ver1 .depth2 > li > a {font-size:0.95em; padding:8rem 0; }
.sub .plant-card { position:relative; display:flex; align-items:center; justify-content:space-between; background:#E0EEFF; border-radius:var(--radius); padding:25rem 30rem; margin-top:40rem; }
.sub .plant-card > img { position:absolute; right:30rem; top:50%; transform:translateY(-50%); width:110rem;}
.sub .plant-card h3 span {display:block; color:var(--p_color); line-height:1.2;  }
.sub .plant-card .detail-button { display: inline-flex; align-items: center; height:30rem; border-radius:var(--radius); background: var(--p_color); color:#fff; font-size: 12rem; padding:0 15rem; margin-top:13rem;  }
.sub .plant-card .detail-button::after { content: ""; width: 5rem; height: 5rem; border-top: 2rem solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); margin-left:10rem; }


.sub_top { position:relative; display:flex; flex-wrap:wrap; margin-bottom:60rem; }
.sub_top h3 { width:100%; font-size:35rem; line-height:1.2; margin-bottom:20rem;}
.sub_top .location { display:flex; align-items:center; flex-wrap:wrap; }
.sub_top .location a {display:flex; align-items:center; font-size:15rem; }
.sub_top .location a::after {content:''; display:block; width:6rem; height:6rem; border-top:1px solid #999; border-right:1px solid #999; transform:rotate(45deg); margin:0 10rem; }
.sub_top .location a:last-of-type::after {display:none;}
.sub_top .location a.home::after {border:0; width:1px; height:15rem; background:#999; transform:none;}
.sub_top .location a.home img { width:12rem; opacity:0.8; }
.sub_top .location a:last-of-type { color:var(--p_color); }
.sub_util { position:absolute; right:0; top:0; }
.sub_util > li > a { justify-content:center; width:50rem; height:50rem; background:#f3f3f3; border-radius:50%; }
.sub_util > li > a::before {display:none;}
.sub_util li:not(:first-of-type) {margin-left:10rem;}
.sub_util .share div { top:60rem; border-radius:10rem; }
@media all and (max-width:1023px){
	.sub_top h3 {padding-right:140rem; font-size:32rem; margin-bottom:30rem;}
}