@charset "UTF-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-gov-dynamic-subset.min.css");
@import url('/WebContent/design/common/css/godo.css');

/*사용자설정 시작*/
:root {
    --sprite_layout: url('/WebContent/design/sunbeeworld/img/layout/layout_sprite.png') no-repeat;
    --common_color : #484848; /*본문 색상*/
    --p_color : #3D8292; /*포인트 색상*/
    --y_color : #FFE05F; /*서브 포인트 옐로*/
    --body_font : "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --point_font : "Godo", "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

.pc_nav .depth2 { width:100%; background:#f9f9f9; border-color:#ddd; }/*2차메뉴 가로사이즈, 배경색상, 테두리색상*/
.pc_nav .depth2 > li > a { border-bottom:1px dashed #efefef; }/*2차메뉴 구분선 색상*/
/*사용자설정 끝*/

::-webkit-scrollbar { width: 6rem; }
::-webkit-scrollbar-thumb { background: var(--common_color); }
::-webkit-scrollbar-track {display: none;}

html, body {width: 100%;}
html {font-size: 1px;}
@media all and (max-width: 1024px) {
    html {font-size: 0.95px;}
}
@media all and (max-width: 768px) {
    html {font-size: 0.9px;}
}

body {
  font-family: var(--body_font);
  font-size: 16rem;
  font-weight: 400;
  color: var(--common_color);
  letter-spacing: -0.25rem;
  line-height: 1.6;
  padding-left: 320rem;
}
@media all and (max-width: 1150px) {
  body {padding-left: 280rem;}
}
a, a:visited {color: inherit;}
a:focus-visible, button:focus-visible, [tabindex="0"]:focus-visible {outline:none; border:2px dashed #ff0000 !important;}
input, button, textarea, select { font-family: var(--body_font); font-weight:400; font-size:16rem; letter-spacing: -0.25rem; line-height: 1.6; color:var(--common_color); border-radius: 0;}
button, input[type="submit"] {cursor:pointer;}
#skipBtn {width: 100%;}

.btn {padding: 10rem 20rem; font-weight: 700; margin: 2rem; line-height: 1.2; display: inline-block;}
.btn.yellow {background: var(--y_color); color: inherit;}
.btn.green {background: var(--p_color); color: #ffffff;}
.btn.black {background: var(--common_color); color: #ffffff;}

.wrap {width: calc(100% - 80rem); max-width: 1420rem; margin: 0 auto;}
@media all and (max-width: 1024px) {
    .wrap {width: calc(100% - 60rem);}
}
@media all and (max-width: 768px) {
    .wrap {width: calc(100% - 40rem);}
}

.toggle {position: relative;}
.toggle-list {display: none; position: absolute; }

header {width: 320rem; height: 100vh; position: fixed; left:0; top: 0; z-index: 100; background: #fff; padding: 60rem 30rem;}
header > .wrap {position: relative; width: 100%; height: 100%;}
header .logo {text-align: center; font-size: 18rem; font-family: var(--point_font);}
header .logo a {display: flex; justify-content: center; flex-wrap: wrap;}
header .logo a span.theme {display: block; text-indent: -999999rem; width: 100%; height: 112rem; margin-bottom: 14rem; background: url('/WebContent/design/sunbi/img/layout/logo.png') no-repeat center/ auto 100%;}
.pc_nav {z-index: 1; position: relative; background: #ffffff;}
.pc_nav .depth1 {display: block; margin-top: 60rem;}
.pc_nav .depth1 > li > a {font-family: var(--point_font); font-weight: 400; font-size: 20rem; padding: 16rem 43rem 16rem 10rem; border-bottom: 1px solid #ddd; position: relative;}
.pc_nav .depth1 > li > a.on {border-color: var(--common_color);}
.pc_nav .depth1 > li > a::after {content: ''; display: block; width: 23rem; height: 23rem; background: url('/WebContent/design/sunbi/img/layout/arrow-nav.png') no-repeat center/contain; position: absolute; right: 10rem; top: 20rem;}
.pc_nav .depth1 > li > a.on::after {transform: rotate(90deg);}
.pc_nav .depth2_wrap {display: none;}
.pc_nav .depth2_wrap .wrap {width: 100%;}
.pc_nav .depth2_wrap dl {display: none;}
.pc_nav .depth2 > li > a {display: block; padding: 10rem 20rem;}
.pc_nav .depth2 > li > a.on, .pc_nav .depth2 > li > a:hover {font-weight: 700;}
.pc_nav .depth3 {display: none;}

header .sns {width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 20rem; position: absolute; bottom: 50rem;}
header .sns a {display: block; text-indent: -999999rem; width: 30rem; height: 30rem; background: url('/WebContent/design/sunbi/img/layout/icon-sns.png') no-repeat 0 0/300%;}
header .sns a.youtube {background-position-x: 0; }
header .sns a.instagram {background-position-x: 50%; }
header .sns a.facebook {background-position-x: 100%; }

#m_nav_open {display: none; position: absolute; right: 0;top: 0; width: 32rem; height: 60rem; background: url('/WebContent/design/sunbi/img/layout/open_m_nav.png') no-repeat center/contain; text-indent: -999999rem;}
.m_nav .site_name strong {font-family: var(--point_font); font-weight: 500; font-size: 30rem;}
.m_nav+.nav_bg {z-index: 15;}

@media all and (max-width: 1150px) {
  header {width: 280rem;}
  .pc_nav .depth1 > li > a {font-size: 18rem;}
}
@media all and (max-width: 1024px) {
    header {height: 60rem; padding: 0; width: auto; position: absolute; width: 100%; position: static;}
    header > .wrap {width: calc(100% - 60rem);}
    header .logo {display: inline-block;}
    header .logo a {height: 60rem; align-items: center;}
    header .logo a span.theme {width: 180rem; height: 28rem; background-image: url('/WebContent/design/sunbi/img/layout/logo-m.png'); margin-bottom: 0; margin-right: 10rem;}
    header .logo a span.sunbi, .pc_nav, header .sns, .top-link .wrap > a:not(#search_open), #container .top-link .lang {display: none !important;}
    .top-link {position: absolute; top: 0; right: 75rem;}
    .top-link > .wrap {width: auto;}
    #search_open {line-height: 60rem !important;}
    #m_nav_open {display: block;}
    body { padding-left: 0;}
}
@media all and (max-width: 768px) {
    header > .wrap {width: calc(100% - 40rem);}
    .top-link {position: absolute; top: 0; right: 60rem;}
}

#container .top-link { height: 60rem; font-family: var(--point_font); text-align: right;}
#container .top-link .wrap > a {padding: 10rem 20rem; line-height: 1; font-size: 18rem;}
#container .top-link .lang {display: inline-block; margin-left: 20rem; position: relative; text-align: left;}
#container .top-link .lang .toggle-btn {background: url('/WebContent/design/sunbi/img/layout/lang_icon.png') no-repeat left center; padding: 10rem 20rem 10rem 21rem; line-height: 60rem; position: relative; font-size: 18rem;}
#container .top-link .lang .toggle-btn::after {content: ''; display: block; position: absolute; width: 11px; height: 6px; background: url('/WebContent/design/sunbi/img/layout/lang_arrow.png') no-repeat center; top: 15rem; right: 0;}
#container .top-link .lang .toggle-btn.on::after {transform: rotate(180deg);}
#container .top-link .lang .toggle-list {position: absolute; line-height: 1.6; width: 100%; top: 60rem; background: #ffffff; border: 1px solid #ddd; box-shadow: 1rem 1rem 3rem rgba(0,0,0,0.1); z-index: 50;}
#container .top-link .lang .toggle-list ul { padding: 4rem 15rem;}
#container .top-link .lang .toggle-list ul li {font-family: var(--body_font); font-size: 14px; margin: 5rem 0; line-height: 1.6;}
#search_open::before {content:''; display:inline-block; width:22px; height:23px; background:var(--sprite_layout) -241px -38px;margin-bottom: -7rem;margin-right: 3rem;
}
#search_area {z-index: 300;}
#search_area form a, #search_area form button, #search_close {
  text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

footer {width: 100%; position: relative; overflow: hidden;}
footer > .wrap {border-top: 1px solid #323232; padding: 50rem 0 120rem;}
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-family: var(--point_font); font-weight: 700; margin: 10rem 27rem; line-height: 1;}
footer .link li:first-child {margin-left: 0;}
footer .link li:last-child {margin-right: 0;}
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: 15rem;}
footer .sns a {display: block; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #dddddd; text-indent: -999999rem;}
footer .sns a.youtube {background: url('/WebContent/design/sunbi/img/layout/ico_youtube.svg') no-repeat center;}
footer .sns a.instagram {background: url('/WebContent/design/sunbi/img/layout/ico_instagram.svg') no-repeat center;}
footer .sns a.facebook {background: url('/WebContent/design/sunbi/img/layout/ico_facebook.svg') no-repeat center;}

.familysite {width: 200rem;}
.familysite .toggle-btn {padding: 10rem 38rem 10rem 15rem; background-color: #f9f9f9; position: relative; display: block; text-align: center;}
.familysite .toggle-btn::after {content: ''; display: block; width: 13rem; height: 8rem; background: url('/WebContent/design/sunbi/img/layout/arrow-familysite.png') no-repeat center/contain; top: 18rem; right: 15rem; position: absolute; transition: all 0.2s;}
.familysite .toggle-btn.on::after {transform: rotate(180deg);}
.familysite .toggle-list {width: 100%; border: 1px solid #ddd; box-shadow: 1rem 1rem 3rem rgba(0,0,0,0.1); z-index: 5; background-color: #ffffff;}
.familysite .toggle-list li a {display: block; padding: 6rem 15rem;}

@media all and (max-width: 1240px) {
  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 { margin: 10rem auto 0;}
  footer .sns {justify-content: center;}
}