@charset "UTF-8";

:root {
	--p_color : #154198;
	--sprite_layout: url('/WebContent/design/sunbeeworld/img/layout/layout_sprite.png') no-repeat;
}

body { font-family:'Pretendard GOV Variable', sans-serif; font-weight:400; font-size:16rem; color:#323232; /*letter-spacing:-0.5px;*/}
input, button, textarea, select { font-family:'Pretendard GOV Variable', sans-serif; font-weight:400; font-size:16rem; color:#323232;}
button, input[type="submit"] {cursor:pointer;}
h1, h2, h3, h4, h5 {font-size:16rem; font-weight:400; line-height:1.4;}
a {color: inherit;}
b {font-weight:600;}

a:focus-visible, button:focus-visible {outline:none; border:2px dashed #ff0000;}

.wrap {width:100%; max-width:1330rem; margin:0 auto;}
@media all and (max-width:1440px){
	html {font-size:0.95px;}
	.wrap {max-width:100%; padding-left:30rem; padding-right:30rem;}
}
@media all and (max-width:768px) {
	html {font-size:0.9px;}
	.wrap {padding-left:20rem; padding-right:20rem;}
}
@media all and (max-width:360px) {
	html {font-size:0.85px;}
}

/*기본컨텐츠레이아웃*/
.basic_layout {display:flex; justify-content: space-between;}
.basic_layout .left {width:calc(65.189% - 78rem);}
.basic_layout .right {width:calc(34.813% - 78rem);}
@media all and (max-width:1440px){
	.basic_layout .left {width:calc(60% - 30rem);}
	.basic_layout .right {width:calc(40% - 30rem);}
}

.slick-slide li {display:block !important;}

/*toggle*/
.toggle > div {position:absolute; opacity:0; visibility:hidden; transition:all 0.5s; z-index:30;}
.toggle.on > div {opacity:1; visibility:visible; /*transform:translate(0, 20rem);*/}

/*header*/
#header {position:absolute; top:0; left:0; width:100%; z-index:10; }
#header > .wrap {display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #fff;}
#header .logo a {display:block; width:246rem; height:40rem; background:url('/WebContent/design/sunbichon/img/layout/logo_white.png') no-repeat 0 0/contain; text-indent:-9999rem;}
#header .right {display:flex; align-items:center; }
#header .right > a.go_link {color: #ffffff; font-family: 'Godo', sans-serif; margin-right: 18rem;}
#header .lang { margin-right:20rem; position:relative;}
#header .lang > a {display:block; font-family: 'Godo', sans-serif; color:#ffffff; font-weight:600; display:flex; align-items:center; justify-content:center;}
#header .lang > a::before {content:''; flex-shrink:0; flex-grow:0; width:20rem; height:20rem; margin-right:8rem; margin-top:-2rem; background:url('/WebContent/design/sunbichon/img/layout/icon_lang.svg') no-repeat 0 0/contain;}
#header .lang .list {top:42rem; left:0; width:100%; padding:10rem 0; background:#154198;}
#header .lang .list > a {display:block; margin:7rem 0; color:#fff; text-align:center;}
#header .sitemap {display:none; width:32rem; height:18rem; background:url('/WebContent/design/sunbichon/img/layout/icon_menu.svg') no-repeat 0 0/200% auto; text-indent:-9999rem;}
#header .sitemap.mobile {display:block;}
/*nav*/
.pc_nav .depth1 > li > a {font-family: 'Godo', sans-serif; font-size:20rem; padding:25rem; position:relative; top:0; font-weight:600; color:#fff;}
/*사용자설정 시작*/
.pc_nav .depth2_wrap { top:80rem; z-index:100;}/*펼침메뉴 위치*/
.pc_nav .depth2 { width:200rem; background:#fff; border-color:#ddd; z-index: 1000;}/*2차메뉴 가로사이즈, 배경색상, 테두리색상*/
.pc_nav .depth2 > li > a { border-bottom:1px solid #efefef; }/*2차메뉴 구분선 색상*/
.pc_nav .depth3 { left:199rem; width:200rem; background:#efefef; border:1px solid #dedede; }/*3차메뉴 오픈위치, 가로사이즈, 배경색상*/
/*사용자설정 끝*/
.m_nav {display:none;}
@media all and (max-width:1440px){
	#header > .wrap {width:calc(100% - 60rem); padding:0;}
}
@media all and (max-width:1280px){
	#header > .wrap {padding:25rem 0;}
	#header .lang, #header .right > a.go_link {display:none;}
	#header .sitemap.pc {display:none;}
	#header .sitemap.mobile {display:block;}
	.pc_nav {display:none;}

}
@media all and (max-width:768px){
	#header > .wrap {width:calc(100% - 40rem);}
}
@media all and (max-width:599px){
	#header .logo {width:200rem; height:33rem;}
}

#search_open {color: #ffffff;font-family: 'Godo', sans-serif; margin-right: 18rem;}
#search_open::before {content:''; display:inline-block; width:22px; height:23px; background:url('/WebContent/design/sunbichon/img/layout/icon-search.png') no-repeat center;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*/
#footer {background:#374663; padding-bottom:78rem; padding-top: 20rem;}
#footer .bottom {align-items: center; padding-top: 15rem;}
#footer .bottom .list {display:flex; flex-wrap:wrap; align-items:center;}
#footer .bottom .list li a {display: block; color:#fff; margin-right:59rem; font-weight:600; margin-top: 10rem;}
#footer .bottom .list li a.privacy {color:#FFDA62;}
#footer address {color:#fff; padding-top: 15rem;}
#footer address p {margin-right:59rem; margin-top: 10rem;}
#footer address p strong {display:inline-block; margin-right:19rem; font-weight:600;}
#footer .copy {display: block; color:#A1B6E2; font-size: 14rem; margin-top: 10rem;}
#footer .right {display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;}
#footer .right .family {width:100%; display:flex; align-items:center; position:relative; background:#263657; padding:15rem 20rem;}
#footer .right .family > a {display:flex; align-items:center; justify-content:space-between; width:100%; font-weight:600; color:#fff;}
#footer .right .family > a::after {content:""; flex-shrink:0; flex-grow:0; width:16rem; height:16rem; background:url('/WebContent/design/sunbichon/img/layout/icon_arrow.svg') no-repeat 0 0/200% auto; transition:all 0.5s;}
#footer .right .family .list {bottom:66rem; left:0; width:100%; height:200rem; overflow-y:auto; margin:-10rem 0; padding:25rem; background:#263657;}
#footer .right .family .list > a {display:block; position:relative; margin:10rem 0; padding-left:14rem; color:#fff;}
#footer .right .family .list > a:before {content:''; position:absolute; top:9rem; left:0; width:4rem; height:4rem; background:#fff; border-radius:50%;}
#footer .right .family.on > a::after {transform:scaleY(-1);}
#footer .right .sns {display: flex; flex-wrap: wrap; gap: 20rem; margin-top: 40rem;}
#footer .right .sns a {display: block; width: 30rem; height: 30rem; text-indent: -999999rem; background: url('../img/layout/icon_sns.svg') no-repeat 0 0/300% auto;}
#footer .right .sns a.youtube {background-position: 0 0;}
#footer .right .sns a.instagram {background-position: 50% 0;}
#footer .right .sns a.facebook {background-position: 100% 0;}

#footer .bottom .left, #footer .bottom .right {width:auto;}
@media (max-width: 1023px) {
	#footer .bottom .left, #footer .bottom .right {width:100%;}
	#footer .bottom .list {justify-content: center;}
	#footer .copy {text-align: center; width: 100%;}
}

#footer .logo {display:block; width:300rem; height:50rem; margin-right:5rem; background:url('/WebContent/design/sunbichon/img/layout/logo_blue.png') no-repeat 0 0/contain; text-indent:-9999rem;}
@media all and (max-width:1440px){
	#footer .left address {flex-wrap:wrap;  min-height:auto; margin-top:20rem;}
	#footer .left p {width:100%; margin:10rem 0 0 0;}
}
@media all and (max-width:1240px){
	#footer .logo {width: 100%; max-width:300rem; height:49rem;}
}
@media all and (max-width:1023px){
	#footer {position:relative; padding-bottom:60rem;}
	#footer .wrap {flex-wrap:wrap;}
	#footer .basic_layout {flex-wrap: wrap; text-align: center;}
	#footer .left {width:100%;}
	#footer .left .list {min-height:auto; padding:25rem 0;}
	#footer .left .list li a {margin-right:30rem;}
	#footer .copy {margin-top:40rem; margin-bottom:40rem;}
	#footer .right {width:100%; justify-content: center;}
	#footer .right .family {min-height:60rem; padding:0 30rem; margin-top: 20rem;}
	#footer .right .family > a::after {width:14rem; height:14rem;}
	#footer .right .family .list {bottom:60rem; text-align: left;}
	#footer .right .sns {margin: 40rem auto 0;}
	#footer .logo {margin: 10rem auto 0;}
}
@media all and (max-width:650px){
	#footer .left .list {margin:-5rem 0; padding: 15rem 0;}
	#footer .left .list li {width:100%; margin:0;}
	#footer .left .list li a {margin-right:0;}
	#footer .right .sns {margin: 30rem auto 0;}
}
@media all and (max-width:599px){
	#footer .left .list {margin:-5rem 0;}
	#footer .left .list li a {margin-right:0;}
}