@charset 'utf-8';
/* 모바일만 ~767px */
@media screen and (max-width: 767px) { 
 body, input, textarea, select, button { font-size: 1.3rem; } 
 .copy { font-size: 1.2rem; } 
 }

/* 태블릿부터 768px~ */
@media screen and (min-width: 768px){
 #rg-hd:before { top: 7.8rem; } 
 .rg-logo { width: 7.8rem; } 
 #rg-gnb { padding-top: 7.8rem; } 
 .util-sns-wrap { height: 7.8rem; padding-top: 2rem; } 
 #rg-ft { padding: 6rem 0; } 
 .ft-family-site-wrap { width: 18rem; } 
 }

/* 태블릿만 768px~1023px */
@media screen and (min-width: 768px) and (max-width: 1023px) {}

/* PC부터 1024px~ */
@media screen and (min-width: 1024px) { 
 body { overflow-x: auto; } 
 .wrap { padding: 0; } 
 #rg-hd:before { top: 9rem; } 
 .rg-logo { position: relative; float: left; width: 9rem; z-index: 2; } 
 .gnb-toggle-btn { display: none; } 
 .nav-wrap { position: relative; left: 0; top: 0; height: auto; width: 100%; background-color: transparent; } 
 #rg-gnb { height: 9rem; padding-top: 0; padding-left: 14rem; } 

 .rg-gnb { float: left; } 
 /* .rg-gnb-bg { display: none; position: fixed; left: 0; top: 90px; width: 100%; height: 23rem; z-index: -1; } */
 .rg-gnb a { color: #fff; } 
 .depth1 { position: relative; float: left; } 
 
 .depth1 > a { padding: 0 3rem; line-height: 9rem; } 
 .depth1 > a:after { display: none; } 
 .depth2 { height: 22rem; background-color: transparent; line-height: 3.6rem; } 
 .depth1.active .depth2 a { color: #000; } 
 .depth2 a { padding-left: 2.4rem; color: #666; } 
 .util-sns-wrap { right: 1.5rem; width: auto; padding-top: 2.6rem; background-color: transparent; } 
 .util-menu a { border-color: transparent; } 
 /* 헤더 흰색배경으로 활성화 */
 #rg-hd.active { background-color: #fff; } 
 #rg-hd.active .rg-logo a { background-image: url('../images/logo_b.png'); } 
 #rg-hd.active #rg-gnb:before { content: ''; position: absolute; left: 0; top: 9rem; width: 100%; height: 0.1rem; background-color: #ddd; } 
 /* #rg-hd.active .rg-gnb-bg { display: block; } */
 .depth1.active:after { content: ''; position: absolute; left: 0; top: 8.8rem; width: 100%; height: 0.3rem; background-color: #FBB900; } 
 #rg-hd.active .depth1 > a { color: #333; } 
 #rg-hd.active .depth1.active > a { color: #FBB900; } 
 #rg-hd.active .util-sns-wrap a { color: #333; } 
 #rg-hd.active .sns-menu:before { background-color: #333; } 
 /* 헤더 어두운 구간 설계 */
 .shadow #rg-gnb .depth1 > a { color: #333; } 
 .shadow .util-sns-wrap a, .util-sns-wrap.shadow a { color: #333; } 
 .shadow .sns-menu:before, .util-sns-wrap.shadow .sns-menu:before { background-color: #333; } 
 
 .top-btn { right: 4rem; bottom: 4rem; width: 5rem; height: 5rem; } 
 #rg-ft { padding: 8rem 0; } 
 .ft-menu { float: left; } 
 .ft-family-site-wrap { float: right; } 
 .ft-info { clear: both; } 
 #rg-ft .ft-info > * { clear: none; padding: 0 1.5rem; } 
 #rg-ft .ft-info > dd:first-of-type { }
 #rg-ft .ft-info > dt:nth-of-type(3) { clear: both; padding-left: 0; } 
 #rg-ft .ft-info > dt { padding-right: 0; } 
 #rg-ft .ft-info > dd { border-right-width: 1px; padding-left: 0; } 
 #rg-ft .ft-info > dd:nth-of-type(2), #rg-ft .ft-info > dd:last-of-type { border-right-width: 0; } 
 #rg-ft .ft-info > dd:nth-of-type(2) { padding-left: 1.5rem; } 
}
/* PC 작은 구간 */
@media screen and (min-width: 1024px) and (max-width: 1279px){
 .util-menu a { width: 8.6rem; margin: 0; } 
 .sns-menu a { width: 3.4rem; } 
 }

/* PC부터 1280px~ */
@media screen and (min-width: 1280px){
 .rg-logo { margin-left: 4rem; } 
 #rg-gnb { padding-left: 22rem; } 
 .depth1 > a { padding: 0 3.6rem; } 
 .util-sns-wrap a { margin: 0 1rem; } 
 .util-menu { font-size: 1.8rem; } 
 .sns-menu:before { margin: 1.2rem 2rem; } 
}